初级（低版本）60秒后重试-优快云博客

本文分享了关于HTML页面中计时按钮的实现过程及修复的bug，详细介绍了如何使用JavaScript控制按钮状态，并通过定时器实现倒计时功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天早上的，学习的第一个代码是80%是自己写的，当然和demo是有出入的，有的地方demo比我好，我也解决了demo中的一个bug,这一点还是比较欣慰的。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7    
 8   
 9 </style>
10 <script type="text/javascript">
11     window.onload=function()
12 {
13     
14      /* 这里是对button的样式设置，如果没有就是默认样式，这个程序有一个bug，当多次点击是，就会很快 
15       input{
16        height:30px;
17        width:100px;
18        text-align:center;}  */
19        
20       var oSbmit=document.getElementById('sbmit');
21       var t=60;
22       var timer=null; //timer要声明；
23       oSbmit.onclick=function(){
24               clearInterval(timer);//这个程序有一个bug，当多次点击是，就会很快，所以添加一个这一句就好了
25         timer=setInterval(function(){
26            t--;//这里就有循环，不要到对时间再做单独循环
27           if(t>0){
28             oSbmit.value=t+'秒后重试';
29             oSbmit.disabled=true;//这里是表示，此时点击代码时，按钮是无效的。
30             }else {
31              oSbmit.value='发送验证码';
32              clearInterval(timer);
33              oSbmit.disabled=false;
34              }
35           },1000)
36         }
37 }
38 </script>
39 </head>
40 
41 <body>
42 <!--<form>,此时不需要form,只有向服务器提交内容时，才用form-->
43 <!-- <input type="submit" value="发送验证码" id="sbmit" />-->
44  <input type="button" value="发送验证码" id="sbmit" />
45 <!--</form>-->
46 </body>
47 </html>