js实现精确到秒的倒计时效果
本文实例为大家分享了两种倒计时效果，供大家参考，具体内容如下
效果图：
1.倒计时效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>倒计时</title>
<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>
<style type="text/css">
*{ margin:0; padding:0;}
.dtime{ margin:10px;}
.dtime span{ color:#C30;}
</style>
</head>
<body>
<div class="dtime" id="a1"></div>
<div class="dtime" id="a2"></div>
<div class="dtime" id="a3"></div>
<div class="dtime" id="a4"></div>
<div class="dtime" id="a5"></div>
</body>
<script>
function tbdTimeCountdown(args){//倒计时函数
var ele=document.getElementById(args.id);
var alltime=args.alltime;
var arr=[];
var t=Math.floor(alltime/(24*60*60));
var yt=alltime%(24*60*60);
var s=Math.floor(yt/(60*60));
var ys=yt%(60*60);
var f=Math.floor(ys/(60));
var yf=ys%(60);
var m=yf;
arr[0]=[t,"天"];
arr[1]=[s,"小时"];
arr[2]=[f,"分"];
arr[3]=[m,"秒结束"];
var s=ce(arr,0);
ele.innerHTML=s;
var dong;
dong=setInterval(function(){
alltime-=1;
if(alltime<=0){
clearInterval(dong);
ele.innerHTML="<span>0</span>秒";
args.end();
}else{
t=Math.floor(alltime/(24*60*60));
yt=alltime%(24*60*60);
s=Math.floor(yt/(60*60));
ys=yt%(60*60);
f=Math.floor(ys/(60));
yf=ys%(60);
m=yf;
arr[0]=[t,"天"];
arr[1]=[s,"小时"];
arr[2]=[f,"分"];
arr[3]=[m,"秒结束"];
var s=ce(arr,0);
ele.innerHTML=s;
};
},1000);
function ce(arr,sta){
var i=sta;
if(i<arr.length){
if(arr[i][0]!=0){
var s="";
for(var j=i;j<arr.length;j++){
s+="<span>"+arr[j][0]+"</span>"+arr[j][1];
};
return s;
}else{
return ce(arr,i+1);
};
};
};
};//倒计时end
//效果1
//86402 3602 62
tbdTimeCountdown({id:"a1",//含有倒计时容器
alltime:3,//倒计时总秒数
end:function(){//倒计时结束，时间为0是调用的函数
//alert("倒计时结束才会执行！");
},
});
//效果2
tbdTimeCountdown({id:"a2",//含有倒计时容器
alltime:62,//倒计时总秒数
end:function(){//倒计时结束，时间为0是调用的函数
},
});
//效果3
tbdTimeCountdown({id:"a3",//含有倒计时容器
alltime:3602,//倒计时总秒数
end:function(){//倒计时结束，时间为0是调用的函数
},
});
//效果4
tbdTimeCountdown({id:"a4",//含有倒计时容器
alltime:86402,//倒计时总秒数
end:function(){//倒计时结束，时间为0是调用的函数
},
});
//效果4
tbdTimeCountdown({id:"a5",//含有倒计时容器
alltime:154789,//倒计时总秒数
end:function(){//倒计时结束，时间为0是调用的函数
},
});
</script>
</html>
2.倒计时2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>倒计时</title>
<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>
<style type="text/css">
*{ margin:0; padding:0;}
.dtime{ margin:10px;}
.dtime span{ color:#C30;}
</style>
</head>
<body>
<div class="dtime" id="a1" alltime="3"></div>
<div class="dtime" id="a2" alltime="62"></div>
<div class="dtime" id="a3" alltime="3605"></div>
<div class="dtime" id="a4" alltime="48605"></div>
<div class="dtime" id="a5" alltime="123456"></div>
</body>
<script>
function tbdTimeCountdown(args){//倒计时函数
var ele=document.getElementById(args.id);
var alltime=Number(ele.getAttribute(args.alltime));
var arr=[];
var t=Math.floor(alltime/(24*60*60));
var yt=alltime%(24*60*60);
var s=Math.floor(yt/(60*60));
var ys=yt%(60*60);
var f=Math.floor(ys/(60));
var yf=ys%(60);
var m=yf;
arr[0]=[t,"天"];
arr[1]=[s,"小时"];
arr[2]=[f,"分"];
arr[3]=[m,"秒结束"];
var s=ce(arr,0);
ele.innerHTML=s;
var dong;
dong=setInterval(function(){
alltime-=1;
ele.setAttribute(args.alltime,alltime);
if(alltime<=0){
clearInterval(dong);
ele.innerHTML="<span>0</span>秒";
args.end();
}else{
t=Math.floor(alltime/(24*60*60));
yt=alltime%(24*60*60);
s=Math.floor(yt/(60*60));
ys=yt%(60*60);
f=Math.floor(ys/(60));
yf=ys%(60);
m=yf;
arr[0]=[t,"天"];
arr[1]=[s,"小时"];
arr[2]=[f,"分"];
arr[3]=[m,"秒结束"];
var s=ce(arr,0);
ele.innerHTML=s;
};
},1000);
function ce(arr,sta){
var i=sta;
if(i<arr.length){
if(arr[i][0]!=0){
var s="";
for(var j=i;j<arr.length;j++){
s+="<span>"+arr[j][0]+"</span>"+arr[j][1];
};
return s;
}else{
return ce(arr,i+1);
};
};
};
};//倒计时end
//效果1
//86402 3602 62
tbdTimeCountdown({id:"a1",//含有倒计时容器
alltime:"alltime",//倒计时总秒数
end:function(){//倒计时结束，时间为0是调用的函数
alert("倒计时结束才会执行！");
},
});
//效果2
tbdTimeCountdown({id:"a2",//含有倒计时容器
alltime:"alltime",//倒计时总秒数
end:function(){//倒计时结束，时间为0是调用的函数
},
});
//效果3
tbdTimeCountdown({id:"a3",//含有倒计时容器
alltime:"alltime",//倒计时总秒数
end:function(){//倒计时结束，时间为0是调用的函数
},
});
//效果4
tbdTimeCountdown({id:"a4",//含有倒计时容器
alltime:"alltime",//倒计时总秒数
end:function(){//倒计时结束，时间为0是调用的函数
},
});
//效果4
tbdTimeCountdown({id:"a5",//含有倒计时容器
alltime:"alltime",//倒计时总秒数
end:function(){//倒计时结束，时间为0是调用的函数
},
});
</script>
</html>
大家可以参考专题 《js倒计时功能汇总》 进行深入学习。
以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。
-
本文向大家介绍javascript实现倒计时（精确到秒），包括了javascript实现倒计时（精确到秒）的使用技巧和注意事项，需要的朋友参考一下 代码相当简单实用，这里就不多废话了，小伙伴们简单看下就能明白 以上所述就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍JS实现秒杀倒计时特效，包括了JS实现秒杀倒计时特效的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JS实现秒杀倒计时特效的具体代码，供大家参考，具体内容如下 知识点 添加一个定时器，对时间标签不断进行更新设置即可。 引入工具库工具库 运行效果 代码 引入MyTool.js 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍Andorid实现精确到天时分秒的抢购倒计时，包括了Andorid实现精确到天时分秒的抢购倒计时的使用技巧和注意事项，需要的朋友参考一下 今天项目用到了抢购时倒计时的功能 ，今天找了好多哥们，也百度了好多，但是没有自己喜欢并且能消化的。好不容易找到了一个能容易看懂的，然而又不符合我想要的需求，所以自己搞一下。不知道是否简单，但是最起码是项目的功能可以实现。（一下午，没白费。开心） 直
-
本文向大家介绍基于javascript实现精确到毫秒的倒计时限时抢购，包括了基于javascript实现精确到毫秒的倒计时限时抢购的使用技巧和注意事项，需要的朋友参考一下 这篇文章为大家分享了javascript实现倒计时限时抢购，精确到毫秒的倒计时，供大家参考，具体内容如下 一、效果图 下面的图片就是聚划算上面的限时抢的效果 二、实现限时抢的效果需要用到的知识 ：Javascript Date(
-
我在代码中使用倒计时。问题是，倒计时不准确。onTick方法并不总是每秒执行一次，它可能需要几毫秒的时间。当试图基于millisUntilFinished执行某项任务时，这会成为一个问题。当我的20秒计时器超过10秒时，我正在尝试登录： 以下是相关代码： 这里出现了一个问题，因为countDownTimer可能永远不会有millisUntilFinished==10000，它可能等于1001，因此
-
本文向大家介绍js实现新年倒计时效果，包括了js实现新年倒计时效果的使用技巧和注意事项，需要的朋友参考一下 一年又一年，新年又快到了，最近大家又开始抢回家过年的车票了，我们就来算一算离新年还有多少天，总结总结在即将过去的2015年大家都收获了什么？ 本文实例讲述了js实现新年倒计时效果代码。分享给大家供大家参考。具体如下： 运行效果图： 具体代码： 希望本文所述对大家学习javascript程序设
-
本文向大家介绍js实现n秒倒计时后才可以点击的效果，包括了js实现n秒倒计时后才可以点击的效果的使用技巧和注意事项，需要的朋友参考一下 在我们进行注册用户时经常遇到点击按钮后，60秒倒计时后才能继续可以点击，按钮上还能显示倒计时，这60秒时间就是为大家提供”细阅读协议“做准备的，这种功能是如何实现的，下面为大家分享详细代码。 希望本文所述对大家学习javascript程序设计有所帮助。
-
本文向大家介绍JS倒计时实例_天时分秒，包括了JS倒计时实例_天时分秒的使用技巧和注意事项，需要的朋友参考一下 HTML代码： JavaScript代码： 以上这篇JS倒计时实例_天时分秒就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。