1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>倒计时</title>
8 <style>
9
10 </style>
11 </head>
12 <body>
13 <div id="box">
14 3
15 </div>
16 <input type="button" id="btn" value="开始">
17 </body>
18 <script>
19 var obox = document.getElementById("box");
20 var obtn = document.getElementById("btn");
21 var start = obox.innerHTML;
22 var num = obox.innerHTML;
23 var t;
24 var onoff = 0;//1. 重点，需要声明一个开关，来决定你每次执行的功能，以及能够联系起来整个程序。
25
26 obtn.onclick=function(){
27 //2.点击按钮触发事件
28 if (onoff==0) {
29 //3.每次点击之前，判断开关的状态，在开关为0的时候，进行
30 clearInterval(t);
31 //在每次计时器开始的时候都要清除上一次计时器
32 t = setInterval(function(){
33 // 7.计时器每次执行都要判断是否结束
34 if(num == 1){
35 //在结束的时候，设置按钮为2，改变内容，清除计时器
36 num = "结束了";
37 obtn.value = "复位";
38 onoff = 2;
39 clearInterval(t);
40 }else{
41 //如果没有结束，就接着进行倒计时
42 num--;
43 }
44 obox.innerHTML = num;
45 },1000);
46 //4.在开始功能完成之后，把按钮修改成下次功能
47 obtn.value = "暂停";//5.在这里如果不是开始的功能，那么有可能就是暂停功能
48 onoff = 1;
49 }else if(onoff == 1){
50 clearInterval(t);
51 //6.停止功能做完之后，把状态修改成下次的功能
52 obtn.value = "继续";
53 onoff = 0;
54 }else if(onoff == 2){
55 //8.如果不是开始和暂停的功能，那么有可能是复位功能
56 //复位显示的数字，计算的数字，按钮的文字，功能的状态
57 obox.innerHTML = start;
58 num = start;
59 obtn.value = "开始";
60 onoff = 0;
61 }
62 }
63
64
65
66
67
68 // 初始倒计时的实现
69
70 // var obtn=document.getElementById("btn");
71 // var num=10;//初始化计数器
72 // document.getElementById("div1").innerHTML=num+"秒";// 在页面中显示10秒
73 // var tim=setInterval(function (){//定义匿名函数，
74 // num--; //函数每调用一次num减一
75 // document.getElementById("div1").innerHTML=num+"秒"; //在页面中显示减一后的秒数
76 // if(num==1){ //当num变为1的时候，通过 clearInterval()结束倒计时
77 // clearInterval(tim);
78 // }
79 // },1000);
80 // obtn.onclick=function(){
81 // clearInterval(tim);
82
83
84 // }
85
86
87
88 </script>
89
90
91 </html>
浙公网安备 33010602011771号