js实现5秒倒计时重新发送短信功能
更新时间：2017年02月05日 12:23:25 作者：秋天1014童话
这篇文章主要为大家详细介绍了js实现5秒倒计时重新发送短信功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例讲述了js实现倒计时重新发送短信验证码功能的方法。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js-手机发送短信倒计时</title>
<style>
button{
width: 100px;
height: 30px;
border: none;
}
input{
outline: none;
}
</style>
<script>
window.onload = function(){
function $(id){ return document.getElementById(id); }
$('btn').onclick = function(){
clearInterval(timer); //清除计时器
var that = this;
that.disabled = true;
var count = 5;
var timer = setInterval(function(){
if(count>0){
count--;
that.innerHTML = "剩余时间"+ count +"s";
}else{
that.innerHTML ="重新发送短信";
that.disabled = false;
clearInterval(timer); //清除计时器
}
},1000);
}
}
</script>
</head>
<body>
<div class="box">
<input type="text" id="txt">
<button id="btn" >点击发送短信</button>
</div>
</body>
</html>
或者使用setTimeout来模拟，一般情况下，还是推荐使用setTimeout，更安全一些。当使用setInterval(fn,1000)时，程序是间隔1s执行一次，但是每次程序执行是需要3s，那么就要等程序执行完才能执行下一次，即实际间隔时间为（间隔时间和程序执行时间两者的最大值）。而setTimeout（fn，1000）,代表的是，延迟1s再执行程序，且仅执行一次。每次程序执行是需要3s，所以实际时间为 1s+3s=4s。可以使用setTimeout递归调用来模拟setInterval。
<script>
window.onload = function(){
function $(id){ return document.getElementById(id); }
$('btn').onclick = function(){
var that = this;
that.disabled = true;
var count = 5;
var timer = setTimeout(fn,1000);
function fn(){
count--;
if(count>0){
that.innerHTML = "剩余时间"+ count +"s";
setTimeout(fn,1000);
}else{
that.innerHTML ="重新发送短信";
that.disabled = false;
}
}
}
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript 值类型和引用类型的初次研究,需要的朋友可以参考下2017-07-07
简单数值类型: 有Undefined, Null, Boolean, Number和String。注意，描述中的英文单词在这里仅指数据类型的名称，并不特指JS的全局对象N an, Boolean, Number, String等，它们在概念上的区别是比较大的。2010-10-10
这篇文章主要介绍了开发中常用的25个JavaScript单行代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
微信小程序如何修改radio和checkbox的默认样式和图标
这篇文章主要介绍了微信小程序修改radio和checkbox的默认样式和图标,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要为大家详细介绍了javascrip+HTML5 Canvas绘制转盘抽奖的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
有关script注入想必大家也有所了解，在本文将为大家介绍下如何屏蔽script注入，下面有个不错的示例大家可以感受下2013-11-11
这篇文章主要为大家详细介绍了javascript编写简易计算器的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
在一些框架中看到了类似这样的写法:+new Date();感觉有些怪,查阅了相关资料和一些网友的帮助.对此用法解释如下,希望对大家有所帮助,不合适的地方请大家指正!2009-12-12
这篇文章主要介绍了javascript获取flash版本号的方法,以实例形式分析了javascript判断用户是否安装了Flash及获取Flash版本号的方法,具有一定的实用价值,需要的朋友可以参考下2014-11-11
这篇文章主要介绍了JavaScript this绑定过程,结合实例形式深入分析了JavaScript中this关键字的功能、原理、绑定方式及相关操作注意事项,需要的朋友可以参考下2018-12-12
最新评论