jQuery倒计时进度条
效果如下图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery倒计时进度条</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
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}
</style>
</head>
<body>
<div class="votebox">
<dl class="barbox">
<dd class="barline">
<div style="width:0px;" class="charts"></div>
</dd>
</dl>
<p>倒计时 <span></span> 天</p>
</div>
<script 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天
</script>
</body>
</html>
进度条的图片：
