使用定时器实现倒计时
setInterval()和setTimeout()
区别原文地址
setTimeout() :函数或字符串在指定的毫秒数之后执行。它返回一个整数，表示定时器的编号，这个值可以传递给clearTimeout()用于取消这个函数的执行;
setInterval():setInterval的用法与setTimeout几乎完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行 ;
1.setInterval();
<html><head><meta charset="UTF-8">
<title>简单时长倒计时</title>
<SCRIPT type="text/javascript">
var maxtime = 60 * 60; //一个小时，按秒计算，自己调整!
function CountDown() {
if (maxtime >= 0) {
minutes = Math.floor(maxtime / 60);
seconds = Math.floor(maxtime % 60);
msg = "距离结束还有" + minutes + "分" + seconds + "秒";
document.all["timer"].innerHTML = msg;
if (maxtime == 5 * 60)
alert("还剩5分钟");
--maxtime;
} else{
//记得在倒计时完成关掉计时器,参数是创建计时器是返回的编号
clearInterval(timer);
alert("时间到，结束!");
}
}
timer = setInterval("CountDown()", 1000);
</SCRIPT>
</head>
<body>
<div id="timer" style="color:red">
</div><div id="warring" style="color:red"></div>
</body>
</html>
2.setTimeout
<html>
<head>
<meta charset="UTF-8">
<title>js简单时分秒倒计时</title>
<script type="text/javascript">
function countTime() {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间 var str="2019/5/17 00:00:00";
var endDate = new Date(str);
var end = endDate.getTime();
//时间差
var leftTime = end-now;
//定义变量 d,h,m,s保存倒计时的时间
var d,h,m,s;
if (leftTime>=0) {
d = Math.floor(leftTime/1000/60/60/24);//天
h = Math.floor(leftTime/1000/60/60%24);//时
m = Math.floor(leftTime/1000/60%60);//分
s = Math.floor(leftTime/1000%60); } //秒
//将倒计时赋值到div中
document.getElementById("_d").innerHTML = d+"天";
document.getElementById("_h").innerHTML = h+"时";
document.getElementById("_m").innerHTML = m+"分";
document.getElementById("_s").innerHTML = s+"秒";
//递归每秒调用countTime方法，显示动态时间效果
//为了更准确得的显示结果把参数毫秒设的更小一些
setTimeout(countTime,500);
}
</script>
</head >
<body onload="countTime()" >
<div>
<span id="_d">00</span>
<span id="_h">00</span>
<span id="_m">00</span>
<span id="_s">00</span>
</div>
</body>
</html>
引用地址JS倒计时两种种实现方式
浪客行1213的简书
