版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/y75475/article/details/66035911
//思路:
点击发送按钮过后。按钮变成:10秒–;倒计时直到0秒时候,按钮内的文本内容变成’点击重新发送’。并且清除定时器。
//当鼠标再一次点击时 重复之前的过程。
//容易出现的问题:
1、当时间变量数值=0的时候,要清除定时器,否则会出现负数。
2、倒计时的时间变量一定要定义在点击事件函数内部,如果放在外,当第一次点击事件函数执行完毕后,第二次执行时,
3、定时器一定是在点击事件发生后启动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
请输入手机号:<input type="" name="" id="" value="" />
<button onclick="run()">点击发送验证码</button >
<script type="text/javascript">
var btn = document.getElementsByTagName('button')[0];
var ipt = document.getElementsByTagName('input')[0];
function run(){
var time = 10;//定义时间变量。用于倒计时用
var timer = null;//定义一个定时器;
timer = setInterval(function(){///开启定时器。函数内执行
btn.disabled = true;
btn.innerText = time+"秒后重新发送"; //点击发生后,按钮的文本内容变成之前定义好的时间值。
time--;//时间值自减
if(time ==0){ //判断,当时间值小于等于0的时候
btn.innerText='重新发送验证码'; //其文本内容变成……点击重新发送……
btn.disabled = false;
clearInterval(timer); //清除定时器
}
},1000)
}
</script>
</body>
</html>