jQuery 点击获取验证码按钮及倒计时功能
更新时间：2018年09月20日 10:29:13 作者：dingFY_Demi
验证码倒计时功能，在前端开发中经常会遇到，下面小编给大家带来了jQuery 点击获取验证码按钮及倒计时功能，感兴趣的朋友跟随小编一起看看吧
1.具体思路
点击获取验证码按钮 —> 调用获取验证码接口（忽略）—>获取验证码按钮切换到不可点击状态，按钮背景色呈灰色，按钮文字呈现为“倒计时秒数+后可重新获取”—> 倒计时60s后按钮恢复可点击状态，按钮背景呈橙色，按钮文字呈现为“重新发送”
2.HTML代码
<button type="button" class="feachBtn">获取验证码</button>
3.JS代码
// 点击获取验证码操作
$('.feachBtn').click(function() {
let count = 60;
const countDown = setInterval(() => {
if (count === 0) {
$('.feachBtn').text('重新发送').removeAttr('disabled');
$('.feachBtn').css({
background: '#ff9400',
color: '#fff',
});
clearInterval(countDown);
} else {
$('.feachBtn').attr('disabled', true);
$('.feachBtn').css({
background: '#d8d8d8',
color: '#707070',
});
$('.feachBtn').text(count + '秒后可重新获取');
}
count--;
}, 1000);
}
});
4.效果图
总结
以上所述是小编给大家介绍的jQuery 点击获取验证码按钮及倒计时，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
jQuery针对input的class属性写了多个值情况下的选择方法
这篇文章主要介绍了jQuery针对input的class属性写了多个值情况下的选择方法,结合实例形式对比分析了jQuery选择器针对class属性中有多个值情况下的选中方法,需要的朋友可以参考下2016-06-06
下面小编就为大家带来一篇浅谈jQuery 中的事件冒泡和阻止默认行为。小编举得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中.2010-12-12
这篇文章主要介绍了JS中判断null、undefined与NaN的方法,需要的朋友可以参考下2014-03-03
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
cookie 是存储于访问者计算机中的变量。这篇文章主要介绍了jQuery利用cookie 实现本地收藏功能不重复无需多次命名,需要的朋友可以参考下2019-11-11
浅谈EasyUi ComBotree树修改 父节点选择的问题
下面小编就为大家带来一篇浅谈EasyUi ComBotree树修改 父节点选择的问题。2016-11-11
这篇文章主要为大家详细介绍了jquery实现计算器小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
ID是html页面中一些元素都可以有个本页面唯一的id包括如,div,input,iframe等等都是可以的,下面我来给大家介绍利用jquery 获取id值方法,有需要了解的朋友可参考2013-09-09
这篇文章主要为大家详细介绍了jQuery实现滑动开关效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
基于jquery的3d效果实现代码，需要的朋友可以参考下。2011-03-03
最新评论