倒计时,从10到0,停止,//点击按钮还原倒计时,到0,再停-----------------------点击,再还原

 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>

<!DOCTYPE html><html lang="en"><head><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>倒计时</title><style>
</style></head><body><div id="box">3</div><input type="button" id="btn" value="开始"></body><script>var obox = document.getElementById("box");var obtn = document.getElementById("btn");var start = obox.innerHTML;var num = obox.innerHTML;var t;var onoff = 0;//1. 重点,需要声明一个开关,来决定你每次执行的功能,以及能够联系起来整个程序。
obtn.onclick=function(){//2.点击按钮触发事件if (onoff==0) {//3.每次点击之前,判断开关的状态,在开关为0的时候,进行clearInterval(t);//在每次计时器开始的时候都要清除上一次计时器t = setInterval(function(){// 7.计时器每次执行都要判断是否结束if(num == 1){//在结束的时候,设置按钮为2,改变内容,清除计时器num = "结束了";obtn.value = "复位";onoff = 2;clearInterval(t);}else{//如果没有结束,就接着进行倒计时num--;}obox.innerHTML = num;},1000);//4.在开始功能完成之后,把按钮修改成下次功能obtn.value = "暂停";//5.在这里如果不是开始的功能,那么有可能就是暂停功能onoff = 1;}else if(onoff == 1){clearInterval(t);//6.停止功能做完之后,把状态修改成下次的功能obtn.value = "继续";onoff = 0;}else if(onoff == 2){//8.如果不是开始和暂停的功能,那么有可能是复位功能            //复位显示的数字,计算的数字,按钮的文字,功能的状态obox.innerHTML = start;num = start;obtn.value = "开始";onoff = 0;}}

// 初始倒计时的实现
// var obtn=document.getElementById("btn");//     var num=10;//初始化计数器// document.getElementById("div1").innerHTML=num+"秒";//   在页面中显示10秒//     var tim=setInterval(function (){//定义匿名函数,// num--; //函数每调用一次num减一//         document.getElementById("div1").innerHTML=num+"秒";       //在页面中显示减一后的秒数//         if(num==1){ //当num变为1的时候,通过 clearInterval()结束倒计时//               clearInterval(tim);//         }//     },1000); // obtn.onclick=function(){// clearInterval(tim);
// }

</script>

</html>

原文地址:https://www.cnblogs.com/zhuangch/p/11402707.html

时间: 2024-10-07 12:01:50

倒计时,从10到0,停止,//点击按钮还原倒计时,到0,再停-----------------------点击,再还原的相关文章

jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title&

js jquery 实现点击按钮后,倒计时60秒才能再次点击发送验证码

1 <input type="button" id="btn" value="免费获取验证码" /> 2 <script type="text/javascript"> 3 var wait=60; 4 function time(o) { 5 if (wait == 0) { 6 o.removeAttribute("disabled"); 7 o.value="免费获取

点击按钮带编号增加一行js

<table class="tblborder" cellspacing="1" cellpadding="5" width="100%" align="center" bgcolor="#42344a" border="0">      <tr><td><strong id="add_process"&g

Andorid实现点击获取验证码倒计时效果

这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文 我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取,为了方便以后使用,这里做个记录,讲讲倒计时器的实现. 1.先进行倒计时工具类的封装 1 public class CountDownTimerUtils extends CountDownTimer { 2 private TextView mTextView; 3 4 /** 5 * @param

js jquery 按钮点击后 60秒之后才能点击 60秒倒计时

var wait = 60; function time(o) { if (wait == 0) { $(o).attr("disabled", false); $(o).val("获取验证码"); wait = 60; } else { $(o).attr("disabled", true); o.val(wait + "秒后重新发送"); wait--; setTimeout(function () {time(o);},

Mac OS X 10.10.5 中 VirtualBox 5.0 里的 Win7 虚拟机无法使用 USB 3.0 设备的解决办法

VirtualBox 5.0 已经可以很好的支持 USB 3.0 了,当然前提是宿主机本身支持 USB 3.0.前几天因为要刻录一个 Win10 的可引导安装光盘映像到 U 盘中,而自己使用的物理机是一台 MacBook Pro,想到它上面已经安装了 VirtualBox 5.0 和一个 Win7 虚拟机,于是就在 VirtualBox 中启动 Win7 虚拟机,然后插入一个 USB 3.0 的 U 盘,发现 VirtualBox 报错,说找不到端口.仔细检查了一下各种设置,这个 U 盘是 US

点击按钮 倒计时60秒方可再次点击发送的Js代码

本节内容:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果. 比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 本文用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子: 复制代码代码示例: <input type="button" id="btn" value="免费获取验证码" /><script type="

点击按钮,然后实现30S倒计时

点击按钮的之后,按钮进行30S倒计时 HTML <input type="button" id="getCode" name="" value="获取验证码" class="btnCode"/> CSS .btnCode { width: 40%; height: 42px; background: #FFF; color: #323333; font-size: 14px; line-heig

点击按钮出现60秒倒计时js代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-