demo5 发送短信的倒计时实现

   手机：<input type="text"> <button>发送</button>

    <script>
        let btn = document.querySelector('button')
        let time = 5 //定义剩余时间
        btn.addEventListener('click', function () {
            // 按钮点击后禁用
            btn.disabled = true
            let timer = setInterval(function () {
                // time为0时 停止定时器
                if (time === 0) {
                    clearInterval(timer)
                    // 复原按钮
                    btn.disabled = false
                    btn.innerHTML = '发送'
                    // 重新开始
                    time = 5
                } else {
                    // 点击按钮后 按钮文字变化 秒数递减
                    btn.innerHTML = '还剩下' + time + '秒'
                    time--
                }
            }, 1000)

        })
    </script>

另：

 <input type="button" value="已阅读用户协议(5)" id="btn" disabled>

<script>
    // 定时器、每隔1秒让时间减少1、当时间为0的时候，要启动元素
		let inp = document.querySelector('input')
		let i = 5;

		function time() {
			i--;
			inp.value = `已阅读用户协议(${i})`
			if(i===0){
                //清除定时器
				clearInterval(timer);
				inp.disabled = false
				inp.value ='已阅读用户协议'
			}
		}
		// 开启定时器
		let timer = setInterval(time,1000);
</script>