前端手机发送验证码在发送成功后120秒内禁止重复发送
时间: 2023-10-24 09:07:42 浏览: 77
一分钟内不能重复手机验证码JS代码
5星 · 资源好评率100%
可以通过以下步骤来实现:
1. 首先,当用户点击发送验证码按钮时,记录下当前时间,可以使用`Date.now()`方法获取当前时间的时间戳。
2. 接着,将当前时间存储在本地存储(localStorage)中。
3. 每次用户点击发送验证码按钮时,先从本地存储中获取上一次发送验证码的时间戳,然后计算当前时间和上一次发送时间的差值(以秒为单位)。
4. 如果差值小于120秒,则禁止用户再次发送验证码,否则允许发送验证码并更新本地存储中的时间戳。
以下是一个示例代码:
```javascript
// 获取发送验证码按钮元素
const sendBtn = document.querySelector('#send-btn');
// 发送验证码时间间隔(单位:秒)
const interval = 120;
// 监听发送验证码按钮点击事件
sendBtn.addEventListener('click', () => {
// 获取上一次发送时间戳
const lastSendTime = localStorage.getItem('lastSendTime');
// 获取当前时间戳
const now = Date.now();
if (lastSendTime) {
// 计算时间差(单位:秒)
const diff = Math.floor((now - lastSendTime) / 1000);
if (diff < interval) {
// 禁止发送验证码
alert(`请${interval - diff}秒后再发送验证码`);
return;
}
}
// 发送验证码
// ...
// 更新本地存储中的时间戳
localStorage.setItem('lastSendTime', now);
});
```
阅读全文