實(shí)現(xiàn)進(jìn)度條

<!--進(jìn)度條--> <div class="votebox" style="margin:0 auto 0 33px"><dl class="barbox"><dd class="barline"><div w="1000" style="width:0px;" class="charts"></div></dd></dl> </div> <!--剩余秒數(shù)走完進(jìn)度--><p style="color: gray; position:absolute; top:228px; right:27px;font-size:28px;" class="mms"><span class="mm">0</span>s</p> /* votebox */ .votebox{width:860px;margin-left:15px;text-align:left;position:relative;z-index:66;} /* barbox */ .barbox{height:26px;line-height:26px;overflow:hidden;} .barbox dt a{color:#0048CC;} .barbox dd{float:left;} .barbox dd.last{color:#999;} .barbox dd.barline{width:860px;background:url(../images/jdtbg.png) left center no-repeat;height:26px;overflow:hidden;display:inline;border-radius:12px;} .barbox dd.barline div.charts{height:26px;overflow:hidden;background:url(../images/barbg.gif) center no-repeat;} function animate(ss){var m = 0;$(".charts").each(function(i,item){// 執(zhí)行函數(shù)，進(jìn)度條執(zhí)行$(item).animate({width: ss+"%"},100, function() {// 如果進(jìn)度條滿100，執(zhí)行替換文字if(ss == 100){$('.votebox').width("825px")$('.barbox dd.barline').width("825px")$('.mms').empty().html('已完成').attr('su', 'yi');}});});} // 進(jìn)度條初始值 ss = 0 // 需要執(zhí)行多少秒 mm = 19; function setTime() {// 顯示剩余秒數(shù)$('.mm').html(mm);mm = mm-1console.log(mm)// 獲取su屬性，表示完成，停止執(zhí)行if($('.mms').attr('su') === 'yi') {return false;}// 每秒鐘執(zhí)行一次setTimeout('setTime()',1000);// 進(jìn)度條每秒加5ss = ss +5;// 執(zhí)行進(jìn)度條animate(ss)} setTime();

效果圖：

https://download.csdn.net/download/sqitarn/12979210 圖片素材

總結(jié)

以上是生活随笔為你收集整理的简单进度条实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。