案例分析:
1.点击按钮之后,会禁用disabled 为true
2.同时按钮里面的内容会变化,注意button里面的内容通过innerHTML修改
3.里面的秒数有变化,用到计时器
4.定义一个变量在定时器里不断递减
5.如果变量为0说明到了时间,我们需要停止定时器,并且复原按钮初始状态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
手机号码: <input type="number" /> <button type="button">发送</button>
<script type="text/javascript">
var btn = document.querySelector('button');
var time = 10; //定义剩下的秒数
btn.addEventListener('click', function() {
this.disabled = true;
var timer = setInterval(function() {
if (time == 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 10;
} else{
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
},1000);
})
</script>
</body>
</html>