案例：发送短信
//案例分析
/*
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>
