清楚定时器有两种方式：
1、循环执行：
var timeid = window.setInterval（“方法名或方法”，“延时”）
window.clearInterval(timeid)
例如：
<script type="text/javascript">
$(document).ready(function(){
//循环执行，每隔1秒钟执行一次 1000
var t1=window.setInterval(refreshCount, 1000)
function refreshCount() {
console.log("ready")
}
//去掉定时器的方法
window.clearInterval(t1)
})
</script>
2、定时执行：当方法执行完成定时器停止(但是定时器还在,只不过没用了)
var tmid = window.setTimeout(“方法名或方法”, “延时”)
window.clearTimeout(tmid)
例如：
<script type="text/javascript">
$(document).ready(function(){
//定时执行，5秒后执行
var t1=window.setTimeout(refreshCount, 1000 * 5)
function refreshCount() {
console.log("ready")
}
//去掉定时器的方法
window.clearTimeout(t1)
})
</script>
当然，下面提供一个例子
原理
既然是倒计时，肯定是要涉及到时间日期的操作了。js 里可以用 new Date() 来创建各种格式的时间日期。要能够倒计时，我们需要设置一个起始时间以及一个终止时间，计算出这两段时间的差，然后通过循环调用，每隔 1 秒刷新一次就实现了。假设我们以当前电脑的时间作为起始时间，然后定死一个终止时间，由于起始时间一直在递增，而终止时间不变，那么通过递归后就是一个倒计时了。
实战
知道了大致实现思路后，你可以试着开始手写代码。我们定义一个函数，名为 counter 。首先获取当前时间，现在是北京时间 2019 年 12 月 3 日，16 时 12 分，倒计时 1 小时，那么终止时间是 2019 年 12 月 3 日，17 时 12分 。
function counter(){
var nowtime = new Date()
var endtime = new Date("2019/12/3,17:12:00")
var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000)
}
lefttime 保存着两个时间的差值，getTime() 方法获取到时间戳，由于它是以 ms 为单位的，我们需要精确到秒就可以，所以除以 1000 就是以 s 为单位。
接着，我们可以将这个时间分别计算为 天，时，分，秒 了。代码如下
var d = parseInt(lefttime / (24*60*60))
var h = parseInt(lefttime / (60 * 60) % 24)
var m = parseInt(lefttime / 60 % 60)
var s = parseInt(lefttime % 60)
1 天 24 小时，1 小时 60 分钟，1 分钟 60 秒，稍微转换就能计算出上面几个变量的值。到了这里，有个小细节需要注意，如果是 10 以下的数我们要进行补零！。于是我们在写一个补零函数，名为 addZero .
function paddingZero(){
return i <10 ? "0" + i: i + ""}
好了，接下来对上面求得的 d,h,m,s 进行补零。
d = paddingZero(d)
h = paddingZero(h)
m = paddingZero(m)
s = paddingZero(s)
最后我们只需要利用 setTimeout 循环调用，每隔 1 s 刷新就可以了。
setTimeout(showtime, 1000)
判断当倒计时为 0 的时候，就显示 活动已结束 , 并且把函数 return 掉。完整例子如下
<html>
<body>
<p class="count"></p>
<script>
window.onload = function () {
countDown()
function addZero(i) {
return i <10 ? "0" + i: i + ""
}
function countDown() {
var nowtime = new Date()
var endtime = new Date("2019/03/16,17:57:00")
var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000)
var d = parseInt(lefttime / (24*60*60))
var h = parseInt(lefttime / (60 * 60) % 24)
var m = parseInt(lefttime / 60 % 60)
var s = parseInt(lefttime % 60)
d = addZero(d)
h = addZero(h)
m = addZero(m)
s = addZero(s)
document.querySelector(".count").innerHTML = `活动倒计时 ${d}天 ${h} 时 ${m} 分 ${s} 秒`
if (lefttime <= 0) {
document.querySelector(".count").innerHTML = "活动已结束"
return
}
setTimeout(countDown, 1000)
}
} </script></body></html>
首先获取当前时间与目标时间的时间差，然后通过定时器更新这个时间差，就实现了倒计时效果。实现上述过程需要以下两个函数：
getTime() // 返回距1970年1月1日之间的毫秒数，这样将时间差（毫秒数）÷3600÷24即为天数，时分秒类似setTimeout(code,millisec) // 在指定的毫秒数后调用函数
实例演示如下
创建Html元素
<div class="box"><span>距离2015年国庆节还剩：</span><br>
<div class="content">
<input type="text" id="time_d">天<input type="text" id="time_h">时<input type="text" id="time_m">分<input type="text" id="time_s">秒
</div>
</div>
设置css样式
div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}div.box>span{color:#999font-style:italic}
div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}
input[type='text']{width:45pxheight:35pxpadding:5px 10pxmargin:5px 0border:1px solid #ff9966}
编写jquery代码
$(function(){show_time()
})
function show_time(){
var time_start = new Date().getTime() //设定当前时间
var time_end = new Date("2015/10/01 00:00:00").getTime() //设定目标时间
// 计算时间差
var time_distance = time_end - time_start
// 天
var int_day = Math.floor(time_distance/86400000)
time_distance -= int_day * 86400000
// 时
var int_hour = Math.floor(time_distance/3600000)
time_distance -= int_hour * 3600000
// 分
var int_minute = Math.floor(time_distance/60000)
time_distance -= int_minute * 60000
// 秒
var int_second = Math.floor(time_distance/1000)
// 时分秒为单数时、前面加零
if(int_day < 10){
int_day = "0" + int_day
}
if(int_hour < 10){
int_hour = "0" + int_hour
}
if(int_minute < 10){
int_minute = "0" + int_minute
}
if(int_second < 10){
int_second = "0" + int_second
}
// 显示时间
$("#time_d").val(int_day)
$("#time_h").val(int_hour)
$("#time_m").val(int_minute)
$("#time_s").val(int_second)
// 设置定时器
setTimeout("show_time()",1000)
}
观察效果
某个时刻的截图
几秒后的截图
<div class="timercon">距离活动结束还有
<div id="timer">计算中。。。</div>
</div>
<script type="text/javascript" src="timer.js"></script><!--src 中改成你实际的地址-->
从这行以下 保存为 timer.js 放在你要放的位置，不包括这行说明 然后更新上面的 src
function TimeTo(dd){
var t = new Date(dd),//取得指定时间的总毫秒数
n = new Date().getTime(),//取得当前毫秒数
c = t - n//得到时间差
if(c<=0){//如果差小于等于0 也就是过期或者正好过期，则推出程序
document.getElementById('timer').innerHTML ='活动已经结束'
clearInterval(window['ttt'])//清除计时器
return//结束执行
}
var ds = 60*60*24*1000,//一天共多少毫秒
d = parseInt(c/ds),//总毫秒除以一天的毫秒 得到相差的天数
h = parseInt((c-d*ds)/(3600*1000)),//然后取完天数之后的余下的毫秒数再除以每小时的毫秒数得到小时
m = parseInt((c - d*ds - h*3600*1000)/(60*1000)),//减去天数和小时数的毫秒数剩下的毫秒，再除以每分钟的毫秒数，得到分钟数
s = parseInt((c-d*ds-h*3600*1000-m*60*1000)/1000)//得到最后剩下的毫秒数除以1000 就是秒数，再剩下的毫秒自动忽略即可
document.getElementById('timer').innerHTML = '<p style="margin-top:5px"><b>'+d+'</b>天 <b>'+h+'</b>小时 <b>'+m+'</b>分</p><p class="ss"><b>'+s+'</b>秒</p>'
//最后这句讲定义好的显示 更新到 ID为 timer的 div中
}
(function(){
window['ttt']=setInterval(function(){
TimeTo('2011/1/1 00:00:00')//定义倒计时的结束时间，注意格式
},1000)//定义计时器，每隔1000毫秒 也就是1秒 计算并更新 div的显示
})()
从这行以上保存为 timer.js 不包括这行说明
