初学JS会遇到的一个案例（发送验证码的倒计时效果）-原创手记-慕课网

初学JS会遇到的一个案例（发送验证码的倒计时效果）原创

人生还有多少个二十年 2016-11-25 21:49:02 浏览 2268

人生还有多少个二十年

关注TA

手记 19

粉丝 13

获赞 492

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>发送验证码的倒计时效果</title>
    <script type="text/javascript">
    // 总体思路：
    //  获取按钮，绑定点击事件，在事件处理函数中先把按钮设置为不可用状态(以防止用户多次点击)，接着调用一个函数来实现60s的倒计时（函数内部逻辑可以用分支语句来做）
    window.onload=function(){

        var send=document.getElementById('send'),//获取按钮
            times=60;   //设置倒计时的初值

        function DownToZero(){

            if(times>0){
                send.value=times+"s后重试";    //更新按钮的文本
                times--;    //递减
                setTimeOut(DownToZero,1000);    //通过定时器再次调用函数本身
            }else{
                send.value="发送验证码"; //将文本复原
                send.disabled = false;  //将按钮置为可用
                times=60;   //将数字还原为初值，以便再次计数
                }
        }
        send.onclick=function(){
          // 计时开始 
          send.disabled = true;
          DownToZero();

        } 
    }
    </script>
</head>
<body>
    <input type="button" id="send" value="发送验证码">
<!--    attention:故意写错一个词，希望你能看出来。（因为自己手写代码曾写错，所以在这里提醒一下大家。）
setTimeOut要改为setTimeout
 -->
</body>
</html>

2人推荐

发表评论