倒计时获取手机验证码

<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="utf-8">
        <style>
            input{
                outline: none;
                border: 1px solid #ccc;
                border-radius: 5px;
                padding: 5px 10px;
                background-color: #fff;
                color: #444;
            }
        </style>
        <script src='common.js'></script>
        <script type="text/javascript">
            window.onload = function(){
                $id('send').onclick = function(){
                    var count = 5;
                    if(this.timer){
                        clearInterval(this.timer);
                    }
                    var that = this;
                    this.timer = setInterval(function(){
                        that.value = '还剩' + count + '秒';
                        count--;
                        that.style.backgroundColor = 'skyblue';
                        that.style.color = '#fff';
                        that.disabled = true;
                        if(count < 0){
                            clearInterval(that.timer);
                            that.value = '点击重新发送验证码';
                            that.style.backgroundColor = '#fff';
                            that.style.color = '#444';
                            that.disabled = false;
                        }
                    }, 1000);


                }
            }
        </script>
    </head>
    <body>
        <input type="text" >
        <input type="button" id="send" value="点击获取手机验证码">
    </body>
</html>
posted @ 2019-02-12 11:03  我和我的小生活  阅读(130)  评论(0编辑  收藏  举报