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

一、需求如下图

重点是要实现进度条。

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

原理：动态设置p的子元素跨度的宽度值。

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

风格。long { width :100 pxborder:1px实心# 7f 7 f7f高度：14px背景-颜色： # d6d 6；}.短{ float:leftheight:14px背景色-: # 0FF；}/style body p class=' long ' span class=' short '/span/Pscript src=' http :http://代码。jquery。com/jquery-最新。js '/脚本var百分比=0.5；var longWidth=100var shortWidth=百分比* longWidth$('。短')。动画({width:shortWidth 'px'}，' slow ')；/脚本/正文

2、投票进度条实现过程第一步：结构如下

meta charset='utf-8 '样式/*样式重置*/ul，h4，p { margin:0划水：0;}/*清除浮动*/.清除修复程序：在{可见性：隐藏显示：块；字号：0；内容： " "；clear:both高度：0;}车身{ font: 12px/1.5 arial，宋体；}html，正文{ color: # 333333}/*投票css*/.投票箱列表{border:1px，纯红；位置：绝对；}.投票框列表李{列表式：无；边距3 336010 px 0；}.投票项目包装h4 ,投票结束vnum { float : left font-size :14 px；字体粗细：正常；行高：16 px}.投票项目包装p { float : leftheight :14 px宽度宽度：200像素边界：1像素实心# e2e 2；背景-color : # EFEFEF；margin:0 10px }。投票项目包装高度：14px/*宽度：30 px背景-颜色： # c2f 263*/}/style ul class=' vote-box-list clear fix ' id=' appVoteBox ' Li class=' VL-item ' id=' vote item 0 ' div class=' vote-item-wrap clear fix ' H4a://H4 p class='审案span/span/p span class=' vnum ' 79(2%)；给跨度增加一个宽度和背景色，就可以出现进度条的效果。这一步用射流研究…实现。

第二步、js设置跨度的宽度

脚本src=' http :3358代码。jquery。com/jquery-最新。js '/script脚本var Vote={ }；投票吧listshow=(function(){ var long width；var percentArr=[]；var短宽度=[]；var SPanArr=[]；/*初始化*/function init(o){ VOTEid=o . id；long width=o . width percentarr=o . percent short width=calWidth()；spanar=find spans()；} /*根据百分比计每个算跨度的实际宽度*/function calWidth(){ var arr=[]；for(var I=0；ipercentarr . lengthi){ var templatlength=百分比arr[I]* long width；由…改编推送(模板长度)；}返回arr} /*将全部跨度存为一个数组*/function find spans(){ var litems=$(' # ' voteId).查找('。诉讼');var arr=[]for(var I=0；Ili tems . lentigi){ arr . push(litems[I]).children[0])；}返回arr} /*每个跨度元素设置宽度*/函数setWidth(){ for(I=0；ipercentarr . lengthi){ $(spanArr[I]).动画({width:shortWidth[i] 'px'}，' slow ')；$(spanArr[i]).css({ '底色： ' # c2f 263 ' })；} }返回{init:init，set : setwithts }；})();/*调用*/投票列表显示。init({ id : ' appVoteBox '，width:200-2，percent 3360[0.02，0.61，0.36，0.13，0.3]，})；投票吧列表显示。set()；/script效果：

第三步，js设置跨度的背景色第二步中的背景色都是如下设置为一样。

$(spanArr[i]).css({ '底色： ' # c2f 263 ' })；现在随机生成背景色，做一个彩色的进度条脚本src=' http :http://代码。jquery。com/jquery-最新。js '/script脚本var Vote={ }；投票吧listshow=(function(){ var long width；var percentArr=[]；var短宽度=[]；var SPanArr=[]；var colorar=[]；/*初始化*/function init(o){ VOTEid=o . id；long width=o . width percentarr=o . percent short width=calWidth()；spanar=find spans()；colorar=GenColor()；} /*根据百分比计每个算跨度的实际宽度*/function calWidth(){ var arr=[]；for(var I=0；ipercentarr . lengthi){ var templatlength=百分比arr[I]* long width；由…改编推送(模板长度)；}返回arr} /*将全部跨度存为一个数组*/function find spans(){ var litems=$(' # ' voteId).查找('。诉讼');var arr=[]for(var I=0；Ili tems . lentigi){ arr . push(litems[I]).children[0])；}返回arr} /*o是颜色数组，随机选择长度种颜色返回*/function GenColor(){ var o=[]；var n=['#5dbc5b '，' #6c81b6 '，' #9eb5f0 '，' #a5cbd6 '，' #aee7f8 '，' #c2f263 '，' #d843b3 '，' #d8e929 '，' #e58652 '，' #e7ab6d '，' #ee335f '，' #fbe096 '，' # ffc 535 ']；//彩色进度条var color sar=n . slice()；for(var I=0；I percentarr . lentigi){//math . random()返回0.0 ~ 1.0 之间的一个伪随机数//Math.floor()向下取整var k=数学。地板(数学。random()* colorsar。长度)；o . push(color sar[k])；//取完一种颜色后就从颜色数组中删除colorsar。拼接(k，1)；if(colorsar。长度==0){ colorsar=n . slice()} }返回o；} /*每个跨度元素设置宽度*/函数setWidth(){ for(I=0；ipercentarr . lengthi){ $(spanArr[I]).动画({width:shortWidth[i] 'px'}，' slow ')；$(spanArr[i]).css({ '背景色： colorar[I]})；} }返回{init:init，set : setwithts }；})();/*调用*/投票列表显示。init({ id : ' appVoteBox '，width:200-2，percent 3360[0.02，0.61，0.36，0.13，0.3]，})；投票吧列表显示。set()；/script最终效果：

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