前言
倒计时是一个比较经典的案例，能较为深刻的体现事件和函数相结合的现象，同时能对计时器有一个较为充分的使用。具体要注意点在代码中有详细解释。
代码
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
#box{width:200px;height:200px;margin:30px auto;border:solid 1px black;text-align:center;line-height:200px;font-size:40px}
#btn{width:200px;height:40px;display:block;margin:0 auto}
<div id="box">
10
<input type="button" value="开始" id="btn">
// 倒计时，从10到0，停止，//点击按钮还原倒计时，到0，再停-----------------------点击，再还原
var obox =document.getElementById("box");
var obtn =document.getElementById("btn");
var start =obox.innerHTML;
var num =obox.innerHTML;
var t;
// 1.开关：表示多次点击时，每次要做的事情不一样
var onoff =0;
obtn.onclick =function(){
// 2.每次点击之前，先判断状态，决定要执行的功能
if(onoff ==0){
clearInterval(t);
t =setInterval(function(){
// 6.计时器每次执行都要判断是否结束
if(num ==1){
// 如果结束，设置内容，设置按钮，改变状态，清除计时器
num ="结束了";
obtn.value ="复位";
onoff =2;
clearInterval(t);
}else{
num--;
}
obox.innerHTML =num;
}, 1000);
// 3.开始功能做完之后，把状态修改成下次的功能
obtn.value ="暂停";
onoff =1;
}else if(onoff ==1){//4.如果不是开始的功能，那么有可能是停止功能
clearInterval(t);
// 5.停止功能做完之后，把状态修改成下次的功能
obtn.value ="继续";
onoff =0;
}else if(onoff ==2){//7.如果不是开始和暂停的功能，那么有可能是复位功能
// 复位显示的数字，计算的数字，按钮的文字，功能的状态
obox.innerHTML =start;
num =start;
obtn.value ="开始";
onoff =0;
}
}
</html>
功能演示
小结
注意其中每次点击事件是如何产生不同的结果的。
第一次点击后，就会执行将onoff赋值的功能，不同的值对应的功能，如onoff=0,就是计时器，onoff就是清除计时器，在onclick,事件外面设置onoff的值为0，当第一次点击的时候，计时器开始工作，同时将onoff的值设置为1,。因为onoff是在事件函数外面设置的，所以此处对onoff的修改相当于对全局变量的修改。再次点击事件的时候，事件函数执行onoff=1的情况下要执行的操作。我们在此处设置的“暂停”功能，即清除计时器功能（必须将onoff等于1 的函数中计时器功能赋值给一个变量t）方便后续对计时器的操作。在执行onoff等于1的操作之后，同时将onoff的值改成0，如此，多次点击的时候可以实现不断暂停和开始的功能。
所谓的复位功能就是再设置一种onoff的情况
当计时器从设置的初始值（如10）递减到0的时候，要设置从0复位到10，的时候，可以在onoff等于0的情况中再次设置两种情况，讨论数值为0或其他要执行的操作。
