案例:发送短信
//案例分析
/*
1.点击按钮 会禁用disabled 为ture
2.同时按钮里面的内容会变化 注意button里面的内容通过 innerHTML修改
3.里面的内容是由变化的 因此需要用定时器
4.定义一个变量 在定时器里面不断递减
5.如果变量为0 我们要停止计时 clearInterval 并且复原 按钮初始状态
*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" placeholder="请输入电话号码" > <button>点击发送</button> <script> //案例分析 /* 1.点击按钮 会禁用disabled 为ture 2.同时按钮里面的内容会变化 注意button里面的内容通过 innerHTML修改 3.里面的内容是由变化的 因此需要用定时器 4.定义一个变量 在定时器里面不断递减 5.如果变量为0 我们要停止计时 clearInterval 并且复原 按钮初始状态 */ var button = document.querySelector('button'); var time = 10; button.addEventListener('click',function(){ this.disabled = true; var timer = setInterval(function(){ button.innerHTML = "请等待" + time + "秒" ; time--; if(time == 0){ clearInterval(timer); button.disabled = false; button.innerHTML = '点击发送'; } },1000) }) </script> </body> </html>