运用JAVASCRIPT简单完成倒计时，一个按钮实现多个功能

最新推荐文章于 2022-11-24 19:39:03 发布

dongdihui9603

最新推荐文章于 2022-11-24 19:39:03 发布

阅读量184

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhuangch/p/11402707.html

版权

 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.οnclick=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.οnclick=function(){
81 //         clearInterval(tim);
82         
83 
84 //     }
85                  
86 
87 
88 </script>
89 
90 
91 </html>

转载于:https://www.cnblogs.com/zhuangch/p/11402707.html

dongdihui9603

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
运用JAVASCRIPT简单完成倒计时，一个按钮实现多个功能

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"> ...
复制链接

扫一扫