栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

应用场景

在开发“发送短信验证”功能时候,要解决一个问题,防止恶意或频繁发送短信验证码问题。一般原理是“当点击发送按钮时,发送ajax请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定时器,按钮显示倒计时”。如果就这样不对倒计时存储做处理,那么当刷新页面,会出现倒计时失效,按钮可点击。提供以下解决方案:

  • 利用cookie存储倒计时
  • 利用HTML5的localStorage 存储倒计时

利用cookie存储倒计时

发送成功后把剩余倒计时存储到cookie,当页面刷新时,检查cookie 是否还存储着剩余倒计时?,如果有,发送按钮则保持倒计时状态,不可点击,否则发送按钮可点击。

HTML代码

jQuery代码




以上所述是小编给大家介绍的JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/86476.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号