JavaScript实现短信发送按钮倒计时功能详解

<div>
        <input type="tel" placeholder="验证码"><button>发送</button>
</div>

div {
            width: 570px;
            height: 200px;
            margin: 200px auto;
            font-size: 22px;
        }
 
        input {
            float: left;
            width: 180px;
            height: 25px;
            outline: none;
            border: 1px solid pink;
            padding-left: 10px;
        }
 
        button {
            float: left;
            width: 60px;
            height: 29px;
            line-height: 29px;
            outline: none;
            border: 1px solid pink;
        }

let btn = document.querySelector("button");
let time = 10;
btn.addEventListener('click', function () {
        btn.disabled = true;
 
        let timer = setInterval(function () {
            if (time == 0) {
                // 清除定时器和复原按钮
                btn.disabled = false;
                clearInterval(timer);
                btn.innerHTML = "发送";
                time = 10; //这个10需要重新开始
            } else {
                btn.innerHTML = time + "s"
                time--;
            }
 
        }, 1000)
    })