发送短信的60s倒计时按钮

版权声明：本文为博主原创文章，未经博主允许不得转载。
实现效果为：

css:

button {
    width: 100px;
    height: 30px;
    border: none;
    border: 1px solid #378eef;
    background: #378eef;
    color: #fff;
    border-radius: 4px;
    outline: none;
}
button.disabled {
    background: #ccc;
    border: 1px solid #ccc;
}
input {
  outline: none;
}

html:

<input type="text" id="txt">
<button id="btn" >点击发送短信</button>

js:

window.onload = function() {
    var btn = document.getElementById('btn');
    btn.onclick = function() {
        clearInterval(timer); //清除计时器  
        this.disabled = true;
        var count = 60;
        var timer = setInterval(() => {
            if (count > 0) {
                count-- ;
                this.innerHTML = "剩余时间"+ count + "s";
                btn.classList.add('disabled');
            } else {
                this.innerHTML = "重新发送短信";
                this.disabled = false;
                btn.classList.remove('disabled');
                clearInterval(timer); //清除计时器
            }
        }, 1000);
    }
}