一、计时器方法概述
计时器方法可以实现在指定的时间过后，单次或重复调用函数的功能，setTimeout可以实现函数在指定毫秒数后单次执行，setInterval可以实现函数在指定毫秒数后重复执行，语法如下所示：
代码语言：javascript复制1 setTimeout(function(){
2 //一秒后执行
3 },1000);
4
5 setInterval(function(){
6 //一秒后执行，并且每隔一秒重复执行
7 },1000)二、setTimeout
下面我们来实现一个效果，页面加载3秒后在控制台输出hello world
代码语言：javascript复制1 setTimeout(function(){
2 console.log("hello world");
3 },3000)当计时器开始计时后，我们可以使用clearTimeout方法让计时器停下来，下面我们来定义一个按钮，当页面加载后，如果我们在3秒钟之内点击按钮，计时器会停止，不会输出hello world，如果不点击按钮，3秒钟之后就会输出hello world
代码语言：javascript复制1 var btn = document.querySelector("button");
2 var t = setTimeout(function(){
3 console.log("hello world");
4 },3000)
5 btn.onclick = function(){
6 clearTimeout(t);
7 }setTimeout方法会返回一个整数类型的值，通过这个值，我们可以停止计时器,我们将setTimeout方法的返回值赋值给一个变量，当点击按钮的时候，使用clearTimeout方法，传入t，这样计时器就会停止，hello world就不会在控制台输出。
三、setInterval
setInterval的用法与setTimeout的用法非常类似，都是传入两个参数，第一个参数是计时器执行的函数，第二个参数是毫秒数。下面我们来实现一个效果，每3秒钟在控制台输出依次hello world
代码语言：javascript复制1 setInterval(function(){
2 console.log("hello world");
3 },3000)从代码可以看出，setInterval与setTimeout完全相同，区别在于setInterval参数中的函数没个指定毫秒数后都会重复执行，当我们不希望计时器重复执行的时候，就可以使用clearInterval方法来停止计时器
代码语言：javascript复制1 var btn = document.querySelector("button");
2 var t = setInterval(function(){
3 console.log("hello world");
4 },3000)
5 btn.onclick = function(){
6 clearInterval(t);
7 }下面我们来实现一个效果，让控制台输出每隔1秒按顺序输出正整数，从数字1开始输出
代码语言：javascript复制1 var n = 1;
2 function showNumber(){
3 console.log(n);
4 n ;
5 }
6 setInterval(showNumber,1000);
7 showNumber(); //调用函数，可以在页面加载时直接输出1。上面的代码与之前有一点区别，我们并没有直接给setInterval传递一个匿名函数，而是先定义了一个函数showNumber，然后将showNumber传递给setInterval，这两种写法效果是一样的，但是如果将匿名函数传入setInterval，这个函数将不能被调用。
在上面代码的结尾，我们在页面加载之后调用了一次showNumber，目的是为了让页面加载的时候就输出1，否则我们将要等待一秒之后才能看到控制台输出1。
这个案例会一直输出数字，下面我们来改进这个例子，当数字为10的时候就停止，效果看起来有些想之前讲过的for循环输出数字，但用计时器输出可以实现每个1秒输出一个数字，而不是连续的输出
代码语言：javascript复制 1 var n = 1,t=0;
2 function showNumber(){
3 console.log(n);
4 if(n === 10){
5 clearInterval(t);
6 }
7 n ;
8 }
9 t=setInterval(showNumber,1000);
10 showNumber(); 我们通过一个if语句判断n的值，当n到达10的时候，就停止计时器，这样计时器就不会再继续输出数字了。
我们还可以继续用按钮控制计时器，这次我们定义一个h1标签存放数字，再用两个按钮来实现“开始计数”和“停止计数”功能
代码语言：javascript复制 1 <h1>0</h1>
2 <button id="start">开始计数</button>
3 <button id="stop">停止计数</button>
4 <script>
5 var btnStart = document.querySelector("#start");
6 var btnStop = document.querySelector("#stop");
7 var h1 = document.querySelector("h1");
8 var t;
9 btnStart.onclick = function(){
10 clearInterval(t); //防止连续点击开始计时，导致创建多个计时器
11 t = setInterval(function(){
12 var number = Number(h1.innerHTML); //将h1的文本节点转换成数字
13 number ;
14 h1.innerHTML = number;
15 },300);
16 }
17
18 btnStop.onclick = function(){
19 clearInterval(t);
20 }
21 </script>在网页中我们经常会看到指定秒数跳转到其他网页，我们可以用计时器方法来实现这个功能
代码语言：javascript复制 1 <p><span class="seconds">5</span>秒后跳转到百度</p>
2 <script>
3 var seconds = document.querySelector(".seconds");
4 setInterval(function(){
5 var s = Number(seconds.innerHTML);
6 s--;
7 seconds.innerHTML = s;
8 if(s === 0){
9 location.href = "http://baidu.com"; //location.href可以实现页面跳转
10 }
11 },1000)
12 </script>课后练习
制作一个倒计时的功能，要求如下：
- 计算距离指定日期还有多少天，多少小时，多少分钟，多少秒;
- 在网页上动态输出这个时间;
