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点击获取验证码倒计时效果，希望对大家的学习有所帮助。
相关文章
本篇主要是对js二维数组排序的简单示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
超级标签之一键解除网页复制限制、网页自由编辑、显示星号密码功能代码
实现以上功能不用安装任何插件，把下列书签图标拖动到浏览器书签栏，就可以实现一键解除网页复制限制、网页自由编辑、显示星号密码功能2022-09-09
这篇文章主要为大家介绍了JavaScript中的动态import()用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了JavaScript enum枚举类型定义及使用方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
本文主要介绍了js对table和ul li实现前台分页,需要的朋友可以参考下2014-02-02
这篇文章是一段关于js点击文本框后才加载验证码实例代码，而不是直接显示验证码，感兴趣的小伙伴们可以参考一下2015-10-10
这篇文章主要介绍了webpack打包js的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了JavaScript箭头函数的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了JavaScript Array.flat()函数用法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了微信小程序实现可拖动悬浮图标的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
最新评论