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>
进度条的图片:
本文作者:猫老板的豆
本文链接:https://www.cnblogs.com/bingcola/p/16499256.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步