JavaScript发送验证码按钮,一分钟内不能重复发送,前端计时器
2021/11/4 11:10:09
本文主要是介绍JavaScript发送验证码按钮,一分钟内不能重复发送,前端计时器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
昨天遇到了验证码发送,发出来给新人借鉴一下,觉得有用的话点个赞哦 首先body中给按钮加一个id方便取用
<input type="button" value="发送验证码" onclick="getCode()">
js中:
//设置一个发送验证码的冷却时间 let cd = 0; //用来保存当前计时器编号 let timerId = 0; //发送验证码的按钮 let bt = $("[value='发送验证码']"); //保存css设定的颜色 let bgColor = bt.css("background-color") // alert(bgColor) function getCode() { if(cd===0) { //cd为0,向服务器发一送请求(已省略!!!) //然后将cd改为60(一分钟内不能再次发送) cd = 60 //设置一个计时器,每1000毫秒执行一次设置冷却时间的函数 timerId = setInterval(setTime, 1000) //设置计时器后弹出一下它的编号(不必要) // alert(timerId) //修改按钮背景色 bt.css("background-color","#ccc") }else{ alert("请在"+cd+"秒后重试") } } function setTime() { //冷却时间未结束 if(cd>0){ //冷却时间减一秒 cd -- //将按钮的文字修改(在后面附带剩余冷却时间秒数) bt.val("发送验证码("+cd+")") }else{ //冷却时间为0,清除当前计时器 clearTimeout(timerId) //恢复按钮显示文字 bt.val("发送验证码") //恢复按钮背景色 bt.css("background-color",bgColor) } }
这篇关于JavaScript发送验证码按钮,一分钟内不能重复发送,前端计时器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28微服务架构中API版本控制的实践
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南