码迷,mamicode.com
首页 > 其他好文 > 详细

点击发送验证码倒计时

时间:2017-10-09 19:40:47      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:htm   doc   oct   text   interval   点击   inpu   char   短信   

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text"/>
<button id="btn">点击发送短信</button>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    var count = 5;  // 数据的 10
    var timer = null; // 定时器的名字
    btn.onclick = function() {
        clearInterval(timer);  // 先清除掉原来的定时器
        // alert(11);
        this.disabled = true;
         //alert(this);  // this 指向的是 btn
        var that = this;  // 把 btn 对象 给 that  var _this = this;
        timer = setInterval(sendTextMessage,1000);  // 开启定时器 名字  timer
        function sendTextMessage() {
            count--;
        //this.innerHTML = "还剩余"+count+"秒";
           // alert(this); // this 指向的是 定时器  window
            //alert(that);
            if(count >= 0 )
            {
                that.innerHTML =  "还剩余"+count+"秒";
            }
            else
            {
                that.innerHTML = "重新发送短信";
                that.disabled = false;
                clearInterval(timer);  // 清除定时器
                count = 5;
            }


        }

    }
</script>

 

点击发送验证码倒计时

标签:htm   doc   oct   text   interval   点击   inpu   char   短信   

原文地址:http://www.cnblogs.com/fdxxiaobai/p/7642449.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!