摘要:一般原理是当点击发送按钮时,发送请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定时器,按钮显示倒计时。
应用场景
利用cookie存储倒计时在开发“发送短信验证”功能时候,要解决一个问题,防止恶意或频繁发送短信验证码问题。一般原理是“当点击发送按钮时,发送ajax请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定时器,按钮显示倒计时”。如果就这样不对倒计时存储做处理,那么当刷新页面,会出现倒计时失效,按钮可点击。提供以下解决方案:
利用cookie存储倒计时
利用HTML5的localStorage 存储倒计时
发送成功后把剩余倒计时存储到cookie,当页面刷新时,检查cookie 是否还存储着剩余倒计时?,如果有,发送按钮则保持倒计时状态,不可点击,否则发送按钮可点击。
HTML代码
JQuery代码
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/49910.html
摘要:一般原理是当点击发送按钮时,发送请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定时器,按钮显示倒计时。 应用场景 在开发发送短信验证功能时候,要解决一个问题,防止恶意或频繁发送短信验证码问题。一般原理是当点击发送按钮时,发送ajax请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定时器,按钮显示倒计时。如果就这样不对倒计时存储做处理,那么当刷...
摘要:在中我们需要掌握定时器。定时器不是我们调用,我们只需要把函数的地址传过去,时间到了,会自己调用。参数延时的时间单位毫秒返回定时器的,用于清除示例代码延时定时器秒后将执行的代码。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言 本篇文章是JavaScript基础知识的BOM篇,...
摘要:在中我们需要掌握定时器。定时器不是我们调用,我们只需要把函数的地址传过去,时间到了,会自己调用。参数延时的时间单位毫秒返回定时器的,用于清除示例代码延时定时器秒后将执行的代码。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言 本篇文章是JavaScript基础知识的BOM篇,...
摘要:部分立即获取部分部分注意此处要自行引入发送验证码倒计时立即获取还剩发布于阅读原博之后补充了部分代码方便下次己用供小白参考侵删 html部分 css部分 .gainCodeBtn{ background-color: #ff4646; color: #ffffff; border: none; font-size: 1rem; letter-s...
阅读 1135·2023-04-26 00:34
阅读 3333·2023-04-25 16:47
阅读 2089·2021-11-24 11:14
阅读 3071·2021-09-26 09:55
阅读 3607·2019-08-30 15:56
阅读 3186·2019-08-29 16:57
阅读 1879·2019-08-26 13:38
阅读 2647·2019-08-26 12:22