按钮发送验证码等待时间效果——定时器setInterval使用

按钮发送验证码等待时间效果——定时器setInterval使用_第1张图片

按钮发送验证码等待时间效果——定时器setInterval使用_第2张图片


<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Documenttitle>
   <script type="text/javascript">
   window.onload=function(){
       var send=document.getElementById('send');
           times=60;
           timer=null;
       send.οnclick=function(){
         // 计时开始 
           timer=setInterval(function(){
            times--;
           if(times<=0){
               send.value='发送验证码';
               clearInterval(timer);
            times=60;
               send.disabled=false;    //是否可点击
           }else{
               send.value=times+'秒后重试';
               send.disabled=true;
           }console.log(times);
       },1000);
       } 
   }
   script>
head>
<body>
   <input type="button" id="send" value="发送验证码">
body>
html>

你可能感兴趣的:(HTML5+CSS3,验证码,html,css,javascript,表单)