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>