发送短信验证，后按钮倒计时，防止刷新倒计时失效

Rocture 发布于2019-08-01 15:26 / 1839人阅读

摘要：一般原理是当点击发送按钮时，发送请求到服务器发送短信验证码，成功则把发送按钮设置为不可点击，并且调用定时器，按钮显示倒计时。

应用场景

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

利用cookie存储倒计时

利用HTML5的localStorage 存储倒计时

利用cookie存储倒计时

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

HTML代码

JQuery代码

云服务器 GPU云服务器倒计时按钮功能 js怎么让计时器失效 java倒计时后执行验证码倒计时

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49910.html

发送短信验证，后按钮倒计时，防止刷新倒计时失效

摘要：一般原理是当点击发送按钮时，发送请求到服务器发送短信验证码，成功则把发送按钮设置为不可点击，并且调用定时器，按钮显示倒计时。应用场景在开发发送短信验证功能时候，要解决一个问题，防止恶意或频繁发送短信验证码问题。一般原理是当点击发送按钮时，发送ajax请求到服务器发送短信验证码，成功则把发送按钮设置为不可点击，并且调用定时器，按钮显示倒计时。如果就这样不对倒计时存储做处理，那么当刷...

DevWiki 2019-08-19 18:45 评论0 收藏0
JavaScript 基础知识 - BOM篇

摘要：在中我们需要掌握定时器。定时器不是我们调用，我们只需要把函数的地址传过去，时间到了，会自己调用。参数延时的时间单位毫秒返回定时器的，用于清除示例代码延时定时器秒后将执行的代码。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言本篇文章是JavaScript基础知识的BOM篇，...

garfileo 2019-08-01 18:16 评论0 收藏0
JavaScript 基础知识 - BOM篇

摘要：在中我们需要掌握定时器。定时器不是我们调用，我们只需要把函数的地址传过去，时间到了，会自己调用。参数延时的时间单位毫秒返回定时器的，用于清除示例代码延时定时器秒后将执行的代码。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言本篇文章是JavaScript基础知识的BOM篇，...

Object 2019-08-21 18:24 评论0 收藏0
JQ实现发送短信验证码/倒计时60S~

摘要：部分立即获取部分部分注意此处要自行引入发送验证码倒计时立即获取还剩发布于阅读原博之后补充了部分代码方便下次己用供小白参考侵删 html部分 css部分 .gainCodeBtn{ background-color: #ff4646; color: #ffffff; border: none; font-size: 1rem; letter-s...

岳光 2019-08-22 16:22 评论0 收藏0