基于JavaScript实现手机短信按钮倒计时
作者:函数茶馆时间:2026-10-29 19:36:39浏览:102
本文介绍如何使用JavaScript实现淘宝等购物网站常见的短信验证码按钮倒计时功能。通过禁用按钮、修改样式及定时器逻辑,确保用户在120秒内无法重复点击,提升交互体验与安全性。
短信按钮倒计时功能介绍
在淘宝等主流电商平台上,用户经常能看到发送短信验证码的按钮带有倒计时效果。这种设计旨在防止用户频繁请求验证码。下面将提供一段简洁实用的代码来实现该功能。
此处直接展示核心JavaScript代码实现。
JavaScript代码实现
/*
120秒手机短信按钮倒计时
*/
exports.sendmessage = function (name) {
var second = 120;
$(name).attr("disabled", true);
var color = $(name).css('background-color');
$(name).attr("style", "background-color : #c1c1c1");
function update(num) {
if (num == second) {
$(name).attr("style", "background-color : "+color);
$(name).text("获取验证码");
$(name).attr("disabled", false);
}
else {
var printnr = second - num;
$(name).text(printnr + "秒后获取");
}
}
function uupdate(i) {
return function () {
update(i);
}
}
for (var i = 1; i <= second; i++) {
setTimeout(uupdate(i), i * 1000);
}
}
上述代码完整展示了JavaScript实现短信按钮倒计时的逻辑,供参考使用。
作者最新文章
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
