html验证码倒计时按钮

 

 

 

<span class="title">验证码：</span>

                <input type="text" placeholder="请输入验证码">

                <input type="button" style="height:32px;width:130px;coral;border-radius: 10px;"

                    value="点击发送验证码" onclick="sendCode(this)" />

 

js代码

var clock = '';

    var nums = 10;

    var btn;

    function sendCode(thisBtn) {

        btn = thisBtn;

        btn.disabled = true; //将按钮置为不可点击

        btn.value = nums + '秒后可重新获取';

        clock = setInterval(doLoop, 1000); //一秒执行一次

    }

    function doLoop() {

        nums--;

        if (nums > 0) {

            btn.value = nums + '秒后可重新获取';

        } else {

            clearInterval(clock); //清除js定时器

            btn.disabled = false;

            btn.value = '点击发送验证码';

            nums = 10; //重置时间

        }

    }