js 发送短信验证码

最新推荐文章于 2022-05-27 14:51:43 发布

qq_37137999

最新推荐文章于 2022-05-27 14:51:43 发布

阅读量930

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_37137999/article/details/80665261

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<body>
<input type="" name="" id="txt" value="" /><button id="btn">发送短信验证码</button>
</body>
<script type="text/javascript">
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
var count = 5; // 存放数据的
var timer = null; // 存放定时器

/*
* btn 点击事件，首先清除定时器，设置btn按钮不可用，
* 里面一个函数，设置一个定时器使这个函数每隔一秒执行，
* 当count>=0,设置btn的内容为还剩下count秒，
* 否则内容为重新发送短信，btn可以点击使用，清楚定时器，使count =5，
*/
btn.onclick = function(){
clearInterval(timer); // 首先清除定时器，防止出现再次点击越来越快的情况
//alert(11);
this.disabled = true;
var that = this; // 所以 var 一个变量来存放 btn 的 this
timer = setInterval(send,1000); // 开启定时器
function send(){
count--;
if(count >= 0){
//this.innerHTML = ""; // 这里的this 指的是调用者定时器而我们需要的是btn
that.innerHTML = "还有"+ count +"秒"; // 这里的that 指的是btn 而不是定时器
}else{
that.innerHTML = "重新发送短信";
that.disabled = false;
clearInterval(timer); // 清楚定时器
count = 5;
}
}
}

</script>

效果：