周期性定时器
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，
直到 clearInterval() 被调用或窗口被关闭。
周期性定时器（计时器）：每隔一段时间 执行一段代码
特点：一旦开启 就会永久执行，只能手动停止
setInterval(参数1,参数2)
参数1：回调函数 （就是执行代码）
参数2：时间间隔 （单位是ms）
setInterval有一个返回值 就是timeID（定时器ID）
clearInterval(定时器ID)：清除定时器
定时器的ID: 在页面可以开启多个定时器 那么浏览器为了区分这些定时器，每当开启
一个定时器的时候，浏览器就会给这个定时器一个唯一的编号，那么这个编号就是定时器的ID
<button id="start">开始</button>
<button id="end">结束</button>
var timeID;
//点击开始计时
document.getElementById("start").onclick=function(){
var num=0;
timeID=setInterval(function(){
console.log(num++);
},1000);
}
//清除定时器
document.getElementById("end").onclick=function(){
clearInterval(timeID)
}
一次性定时器
setTimeout()：在指定的毫秒数后调用函数或计算表达式，一次性的，时间到就执行。
开启一次性定时器
var timeID=setTimeout(function(){
console.log(123);
},3000)
clearTimeout():清除定时器,一般很少用
clearTimeout(timeID);
案例
京东秒杀倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.seckill .seckill-header .time {
width: 300px;
height: 37px;
position: absolute;
top: 9px;
left: 20px;
background-color: red;
text-align: center;
}
.seckill .seckill-header .time span.span-time {
display: inline-block;
width: 35px;
height: 37px;
background: #000000;
font-size: 24px;
color: #ffffff;
line-height: 37px;
text-align: center;
font-weight: 900;
border-radius: 3px;
}
.span-txt {
color: white;
}
.span-point {
font-size: 24px;
font-weight: 900;
}
</style>
</head>
<body>
<div class="seckill">
<div class="seckill-header">
<div class="time">
<span class="span-txt">当前场次</span>
<span class="span-time" id="spanHour">03</span>
<span class="span-point">:</span>
<span class="span-time" id="spanMin">30</span>
<span class="span-point">:</span>
<span class="span-time" id="spanSec">00</span>
<span class="span-txt">后结束抢购</span>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/*
需求分析：
开启重复计时器
1.获取页面元素文本内容
2.秒数--
3.当s<0,s=59,m--;
4.当m<0,m=59,h--;
5.如果h m s小于10,在前面拼一个0
注意：不要使用字符串去和数字做计算，一般需要先数字
6.将计算好的s m h赋值给元素文本
*/
setInterval(function() {
//1.获取页面元素文本内容
var Hour = document.getElementById("spanHour");
var Min = document.getElementById("spanMin");
var Sec = document.getElementById("spanSec");
//取元素的文本
var h = Hour.innerText;
var m = Min.innerText;
var s = Sec.innerText;
//2.秒数--
s--;
//3.当s<0,s=59,m--
if (s < 0) {
s = 59;
m--;
}
//4.当m<0,m=59,h--;
if (m < 0) {
m = 59;
h--;
}
//5.如果h m s小于10,在前面拼一个0
h=+h;//h=parseInt(h);
m=+m;//m=parseInt(m);
s=+s;//s=parseInt(s);
// if (h < 10) {
// h = "0" + h;
// }
// if (m < 10) {
// m = "0" + m;
// }
// if (s < 10) {
// s = "0" + s;
// }
h=h<10?("0"+h):h;
m=m<10?("0"+m):m;
s=s<10?("0"+s):s;
//6.将计算好的s m h赋值给元素文本
Hour.innerText=h;
Min.innerText=m;
Sec.innerText=s;
}, 1000)
</script>
</html>
