知识梳理
// 1 button 比较特殊 获取它的值不是value 而是innerHTML
核心逻辑
// 1 点击按钮后鼠标禁用 // 2 按钮里面的内容有变化 button的内容用innerHTML获取 // 3 里面的秒数有变化 需要用到定时器 // 4 定义一个变量 在定时器里面 不断递减 // 5 如果变量为0 说明到了时间 清除定时器 并且恢复按钮初始状态
代码实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>发送短信案例</title> </head> <body> 手机号码： <input type="number"> <button id="btn">发送</button> <script> var btn = document.getElementById(‘btn‘); var time = 3; //剩下的秒数 btn.onclick = function () { btn.disabled = true;//顶级后按钮禁用 var timer = setInterval(function () { if (time == 0) { btn.disabled = false; clearInterval(timer);//清除定时器 btn.innerHTML = ‘发送‘; } else { btn.innerHTML = ‘还剩下‘ + time + ‘秒‘; time--; } },1000); } </script> </body> </html>
原文：https://www.cnblogs.com/fuyunlin/p/14453972.html