jQuery 点击获取验证码按钮及倒计时功能
时间:2018-09-20
验证码倒计时功能,在前端开发中经常会遇到,下面小编给大家带来了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 点击获取验证码按钮及倒计时,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- c++STL容器之string容器
- AWS(Amazon Linux 2 AMI)在线迁移到腾讯云
- 2020-08-26:裸写算法:树的非递归先序遍历。
- TypeScript手记(一)
- Codeforces Round #665 (Div. 2)
- MONGODB 加索引 大内存 与连锁思维
- 3分钟短文|Laravel 使用like匹配字符串的用法示例
- 3分钟短文|Laravel命令行调用控制器方法,你会几个?
- 3分钟短文 | Laravel 给所有视图追加公共数据
- 为主题用pugjs编写的hexo博客添加网站运行时间
- Qt UDP广播
- Qt文件操作QFile
- 终端shell美化
- Qt CMake GUI项目生成脚本
- Hexo + Git Pages搭建个人博客(一)