JS 获取验证码按钮改变案例

Posted 2021-03-02 徐许

html代码

<div class="box">
        <label for="">手机号</label> <input type="number"> <button>获取</button>
    </div>

JS代码

 1 var btn = document.querySelector(‘button‘)
 2         var time = 10;
 3         btn.addEventListener(‘click‘, function () {
 4             this.disabled = true;
 5             var timer = setInterval(function () {
 6                 if (time == 0) {
 7                     clearTimeout(timer)
 8                     btn.disabled = false;
 9                     btn.innerHTML = ‘发送‘
10                     time = 10;
11                 } else {
12                     btn.innerHTML = ‘还剩下‘ + time + ‘秒‘
13                     time--;
14                 }
15             }, 1000)
16         })