JQuery|jQuery倒计时进度条 jquery|进度条|项目实例

效果如下图：

文章图片

代码如下：

jQuery倒计时进度条 - 锐客网 src="https://www.it610.com/article/js/jquery.min.js" type="text/javascript"> > body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0; padding:0; border:0; } ul,ol,li{list-style:none; } input,button{margin:0; font-size:12px; vertical-align:middle; } body{font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; text-align:center; } table{border-collapse:collapse; border-spacing:0; } a{color:#333; text-decoration:none; } a:hover{color:#c00; text-decoration:underline; } .votebox{width:200px; margin:120px auto 0 auto; text-align:left; position:relative; z-index:66; } .barbox{height:16px; line-height:16px; overflow:hidden; } .barbox dt a{color:#0048CC; } .barbox dd{float:left; } .barbox dd.last{color:#999; } .barbox dd.barline{width:200px; height:16px; background:url(images/jdtbg.png) left center no-repeat; overflow:hidden; display:inline-block; } .barbox dd.barline div.charts{height:16px; overflow:hidden; background:url(images/barbg.gif) right center repeat-x; border-radius:8px; } p{text-align: center} 倒计时 > 天 language="javascript"> function animate(t) { $(".charts").each(function (i, item) { $(item).animate({ width: t + "%" }, 100); }); }function progressBar(t){ $("span").html(t); var i = 0, int = setInterval(function(){ i++; if(t-i>=0){ animate((100/t)*i) $("span").html(t-i) }else{ clearInterval(int) } },1000) animate(0); } progressBar(3); //倒计时3天

进度条的图片：
【JQuery|jQuery倒计时进度条】