js实现点击获取验证码倒计时效果
更新时间：2021年01月28日 11:09:24 投稿：lijiao
这篇文章主要为大家详细介绍了js实现点击获取验证码倒计时效果，这种效果大家经常遇到，示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
网站中为了防止恶意获取验证短信、验证邮箱，都会在点击获取验证码的按钮上做个倒计时的效果。实现这个功能，一个setInterval和一个clearInterval就能搞定了，不需要太多的代码。实例效果和代码如下：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<input type="button" style="height:32px;width:120px;" value="点击发送验证码" onclick="sendCode(this)" />
<script type="text/javascript">
var clock = '';
var nums = 10;
var btn;
function sendCode(thisBtn)
{
btn = thisBtn;
btn.disabled = true; //将按钮置为不可点击
btn.value = nums+'秒后可重新获取';
clock = setInterval(doLoop, 1000); //一秒执行一次
}
function doLoop()
{
nums--;
if(nums > 0){
btn.value = nums+'秒后可重新获取';
}else{
clearInterval(clock); //清除js定时器
btn.disabled = false;
btn.value = '点击发送验证码';
nums = 10; //重置时间
}
}
</script>
更多关于倒计时的文章请查看专题：《倒计时功能》
利用setInterval和clearIntervaljs实现js点击获取验证码倒计时效果，希望对大家的学习有所帮助。
相关文章
Bootstrap提供了四种用于<img>类的样式，在本文给大家详细介绍，需要的朋友可以参考下2016-12-12
下面小编就为大家带来一篇用JS生成UUID的方法实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-03-03
使用uni-app框架开发微信小程序,可以使用高德地图开发地图选点、搜索位置、定位、获取详细的地址信息、码值等信息,下面这篇文章主要给大家介绍了关于uniapp使用高德地图的超详细步骤,需要的朋友可以参考下2022-12-12
下面小编就为大家带来一篇js操作浏览器的参数方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
这篇文章主要介绍了kindeditor编辑器点中图片滚动条往上顶的bug的相关资料,需要的朋友可以参考下2015-07-07
高阶函数：英文叫Higher-order function。JavaScript的函数其实都指向某个变量。下面这篇文章主要给大家介绍了关于JavaScript中高阶函数的魅力，文中通过示例代码介绍的非常详细，需要的朋友可以参考下2018-09-09
这篇文章主要给大家介绍了关于JavaScript伪数组和数组使用与区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要分享一个Javascript打印局部页面实例,需要的朋友可以参考下。2016-06-06
这篇文章介绍了JS代码同步文本框内容的方法，有需要的朋友可以参考一下2013-07-07
这篇文章主要介绍了JavaScript实现修改伪类样式的方法以及代码实现过程，一起学习参考下吧。2017-11-11
最新评论