点击按钮获取验证码,倒计时。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/y75475/article/details/66035911

//思路:
点击发送按钮过后。按钮变成:10秒–;倒计时直到0秒时候,按钮内的文本内容变成’点击重新发送’。并且清除定时器。
//当鼠标再一次点击时 重复之前的过程。
//容易出现的问题:
1、当时间变量数值=0的时候,要清除定时器,否则会出现负数。
2、倒计时的时间变量一定要定义在点击事件函数内部,如果放在外,当第一次点击事件函数执行完毕后,第二次执行时,
3、定时器一定是在点击事件发生后启动。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>

        请输入手机号:<input type="" name="" id="" value="" />
        <button onclick="run()">点击发送验证码</button >
        <script type="text/javascript">

            var btn = document.getElementsByTagName('button')[0];
            var ipt = document.getElementsByTagName('input')[0];
                    function run(){
                        var time = 10;//定义时间变量。用于倒计时用
                        var timer = null;//定义一个定时器;
                        timer = setInterval(function(){///开启定时器。函数内执行
                            btn.disabled = true;
                            btn.innerText = time+"秒后重新发送";    //点击发生后,按钮的文本内容变成之前定义好的时间值。
                            time--;//时间值自减
                            if(time ==0){     //判断,当时间值小于等于0的时候
                                btn.innerText='重新发送验证码'; //其文本内容变成……点击重新发送……
                                btn.disabled = false;
                                clearInterval(timer); //清除定时器
                            }
                        },1000)

                        }

        </script>

    </body>
</html>

猜你喜欢

转载自blog.csdn.net/y75475/article/details/66035911