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

//思路：
点击发送按钮过后。按钮变成：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>

秒客网

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

相关文章