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 相关文章推荐
jquery append与appendTo方法比较
May 24 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jquery向后台提交数组的代码分析
Feb 20 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
PHP下MAIL的另一解决方案
2006/10/09 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
python中的列表推导浅析
2014/04/26 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
Python3离线安装Requests模块问题
2019/10/13 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
现场施工员岗位职责
2015/04/11 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python