好资源导航 » 文章资讯 » 基于jquery实现彩色投票进度条代码解析

基于jquery实现彩色投票进度条代码解析

2023-07-17 22:50:04 169

一、需求

如下图

重点是要实现进度条。

二、分析

原理：动态设置

的子元素的宽度值。

1、简单的雏形

假设只有一个进度条，如下，我们只需要知道p元素的宽度，span元素的百分比，相乘即得到span的宽度，浏览器加载时动态设置span的宽度即可实现进度条的效果。

2、投票进度条实现过程

第一步：

结构如下






A：

79（2%）

B：

1986（61%）

C：

1153（36%）

D：

415（13%）

E：

89（3%）

给span增加一个width和背景色，就可以出现进度条的效果。这一步用js实现。

第二步、js设置span的宽度

效果：

第三步，js设置span的背景色

第二步中的背景色都是如下设置为一样。

$(spanArr[i]).css({'background-color':"#c2f263"});

现在随机生成背景色，做一个彩色的进度条。

最终效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

基于jquery实现彩色投票进度条代码解析

A：

B：

C：

D：

E：

热门推荐

随机推荐