jquery彩色投票进度条简单实例演示


Posted in Javascript onJuly 23, 2020

本文实例为大家分享了jquery实现彩色投票进度条的具体代码,供大家参考,具体内容如下

一、需求

如下图

jquery彩色投票进度条简单实例演示

重点是要实现进度条。

二、分析

html5新增及删除标签一文中提到过html5新增了progress标签。但是肯定有兼容性问题。生成环境不适用,所以要模拟实现。

原理:动态设置<p>的子元素<span>的宽度值。

1、简单的雏形

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

<style>
.long{width:100px;border:1px solid #7f7f7f;height:14px;background-color:#d6d6d6;}
.short{float:left;height:14px;background-color:#0FF;}
</style>

<body>
<P class="long"><span class="short"></span></P>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var percent=0.5;
var longWidth=100;
var shortWidth=percent*longWidth;

$(".short").animate({width:shortWidth+"px"},'slow');

</script>
</body>

jquery彩色投票进度条简单实例演示

2、投票进度条实现过程

第一步:结构如下

<meta charset="utf-8">
<style>
/*样式重置*/
ul,h4,p{margin:0;padding:0;}
/*清除浮动*/
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

body { font: 12px/1.5 arial, 宋体; }
html, body { color: #333333; }
/*投票css*/
.vote-box-list{border:1px solid red;position:absolute;}
.vote-box-list li{list-style:none;margin:10px 0;}
.vote-item-wrap h4,.vote-item-wrap .vnum{float:left;font-size:14px;font-weight:normal;line-height:16px;}
.vote-item-wrap p{float:left;height:14px;width:200px;border:1px solid #E2E2E2;background-color:#EFEFEF;margin:0 10px;}
.vote-item-wrap p span{float:left;height:14px;/*width:30px;background-color:#c2f263;*/}
</style>
<ul class="vote-box-list clearfix" id="appVoteBox">
 <li class="vl-item" id="voteItem0">
 <div class="vote-item-wrap clearfix">
 <h4>A:</h4>
 <p class="litem"><span></span></p>
 <span class="vnum">79(2%)</span>
 </div>
 </li>
 <li class="vl-item" id="voteItem1" >
 <div class="vote-item-wrap clearfix">
 <h4>B:</h4>
 <p class="litem"><span></span></p>
 <span class="vnum">1986(61%)</span>
 </div>
 </li>
 <li class="vl-item" id="voteItem2">
 <div class="vote-item-wrap clearfix">
 <h4>C:</h4>
 <p class="litem"><span></span></p>
 <span class="vnum">1153(36%)</span>
 </div>
 </li>
 <li class="vl-item" id="voteItem3" >
 <div class="vote-item-wrap clearfix">
 <h4>D:</h4>
 <p class="litem"><span></span></p>
 <span class="vnum">415(13%)</span>
 </div>
 </li>
 <li class="vl-item" id="voteItem4" >
 <div class="vote-item-wrap clearfix">
 <h4>E:</h4>
 <p class="litem"><span></span></p>
 <span class="vnum">89(3%)</span>
 </div>
 </li>
</ul>

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

jquery彩色投票进度条简单实例演示

第二步、js设置span的宽度

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

var Vote={};
Vote.ListShow=(function(){
 var longWidth;
 var percentArr=[];
 var shortWidth=[];
 var spanArr=[];
 
 /*初始化*/
 function init(o){
 voteId=o.id;
 longWidth=o.width;
 percentArr=o.percent;
 shortWidth=calWidth();
 spanArr=findSpans();
 }
 /*根据百分比计每个算span的实际宽度*/
 function calWidth(){
 var arr=[];
 for(var i=0;i<percentArr.length;i++){
 var tempLength=percentArr[i]*longWidth;
 arr.push(tempLength);
 }
 return arr;
 }
 /*将全部span存为一个数组*/
 function findSpans(){
 var litems=$("#"+voteId).find(".litem");
 var arr=[]
 for(var i=0;i<litems.length;i++){
 arr.push(litems[i].children[0]);
 }
 return arr;
 }
 /*每个span元素设置宽度*/
 function setWidth(){
 for(i=0;i<percentArr.length;i++){
 $(spanArr[i]).animate({width:shortWidth[i]+"px"},'slow');
 $(spanArr[i]).css({'background-color':"#c2f263"}); 
 }
 
 }
 return {init:init,set:setWidth};
})();

/*调用*/
Vote.ListShow.init(
{
 id:'appVoteBox',
 width:200-2 ,
 percent:[0.02,0.61,0.36,0.13,0.3],
});
Vote.ListShow.set();

</script>

效果:

jquery彩色投票进度条简单实例演示

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

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

$(spanArr[i]).css({'background-color':"#c2f263"}); 
 现在随机生成背景色,做一个彩色的进度条。
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

var Vote={};
Vote.ListShow=(function(){
 var longWidth;
 var percentArr=[];
 var shortWidth=[];
 var spanArr=[];
 var colorArr=[];
 
 /*初始化*/
 function init(o){
 voteId=o.id;
 longWidth=o.width;
 percentArr=o.percent;
 shortWidth=calWidth();
 spanArr=findSpans();
 colorArr=genColor();
 }
 /*根据百分比计每个算span的实际宽度*/
 function calWidth(){
 var arr=[];
 for(var i=0;i<percentArr.length;i++){
 var tempLength=percentArr[i]*longWidth;
 arr.push(tempLength);
 }
 return arr;
 }
 /*将全部span存为一个数组*/
 function findSpans(){
 var litems=$("#"+voteId).find(".litem");
 var arr=[]
 for(var i=0;i<litems.length;i++){
 arr.push(litems[i].children[0]);
 }
 return arr;
 }
 /*o是颜色数组,随机选择length种颜色返回*/
 function genColor() { 
 var o = []; 
 var n = ["#5dbc5b", "#6c81b6", "#9eb5f0", "#a5cbd6", "#aee7f8", "#c2f263", "#d843b3", "#d8e929", "#e58652", "#e7ab6d", "#ee335f", "#fbe096", "#ffc535"]; //彩色进度条
 var colorsArr = n.slice(); 
 for (var i = 0;i < percentArr.length; i++){ 
 //Math.random()返回0.0 ~ 1.0 之间的一个伪随机数。
 //Math.floor()向下取整
 var k = Math.floor(Math.random()* colorsArr.length); 
 o.push(colorsArr[k]); 
 //取完一种颜色后就从颜色数组中删除
 colorsArr.splice(k, 1); 
 if (colorsArr.length == 0){ 
 colorsArr = n.slice()} 
 } 
 return o;
 } 
 /*每个span元素设置宽度*/
 function setWidth(){
 for(i=0;i<percentArr.length;i++){
 $(spanArr[i]).animate({width:shortWidth[i]+"px"},'slow');
 $(spanArr[i]).css({'background-color':colorArr[i]}); 
 }
 
 }
 return {init:init,set:setWidth};
})();

/*调用*/

Vote.ListShow.init(
{
 id:'appVoteBox',
 width:200-2 ,
 percent:[0.02,0.61,0.36,0.13,0.3],
});
Vote.ListShow.set();

</script>

最终效果:

jquery彩色投票进度条简单实例演示

以上就是彩色的进度条特效,特别适合用于投票,效果很明显,希望对大家的学习有所帮助,会喜欢上这个彩色进度条。

Javascript 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
AngularJS Module方法详解
Dec 08 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
js生成随机数的过程解析
Nov 24 #Javascript
jquery制作图片时钟特效
Mar 30 #Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 #Javascript
JS鼠标拖拽实例分析
Nov 23 #Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 #Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 #Javascript
jquery实现图片放大镜功能
Nov 23 #Javascript
You might like
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
vue如何将v-for中的表格导出来
2018/05/07 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
python发送邮件接收邮件示例分享
2014/01/21 Python
Python函数式编程
2017/07/20 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
社区居务公开实施方案
2014/03/27 职场文书
加强党性修养心得体会
2016/01/21 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
z-index不起作用
2021/03/31 HTML / CSS
Python3接口性能测试实例代码
2021/06/20 Python
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript