實現進度條

<!--進度條--> <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> <!--剩余秒數走完進度--><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){// 執行函數，進度條執行$(item).animate({width: ss+"%"},100, function() {// 如果進度條滿100，執行替換文字if(ss == 100){$('.votebox').width("825px")$('.barbox dd.barline').width("825px")$('.mms').empty().html('已完成').attr('su', 'yi');}});});} // 進度條初始值 ss = 0 // 需要執行多少秒 mm = 19; function setTime() {// 顯示剩余秒數$('.mm').html(mm);mm = mm-1console.log(mm)// 獲取su屬性，表示完成，停止執行if($('.mms').attr('su') === 'yi') {return false;}// 每秒鐘執行一次setTimeout('setTime()',1000);// 進度條每秒加5ss = ss +5;// 執行進度條animate(ss)} setTime();

效果圖：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。