jQuery 点击获取验证码按钮及倒计时功能


Posted in jQuery onSeptember 20, 2018

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 点击获取验证码按钮及倒计时功能

jQuery 点击获取验证码按钮及倒计时功能

总结

以上所述是小编给大家介绍的jQuery 点击获取验证码按钮及倒计时,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery使用each遍历循环的方法
Sep 19 #jQuery
jquery 动态遍历select 赋值的实例
Sep 12 #jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 #jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 #jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 #jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 #jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 #jQuery
You might like
如何选购合适的收音机
2021/03/01 无线电
php socket方式提交的post详解
2008/07/19 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
python中二维阵列的变换实例
2014/10/09 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
python七夕浪漫表白源码
2019/04/05 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
浅谈Python协程
2020/06/17 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
生活小常识广播稿
2014/09/16 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
召开会议通知范文
2015/04/15 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
Node.js实现断点续传
2021/06/23 Javascript
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL