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异步上传文件的插件用法详解
Jul 19 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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/03 咖啡文化
PHP注释实例技巧
2008/10/03 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
Python 求数组局部最大值的实例
2019/11/26 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
python实现翻译word表格小程序
2020/02/27 Python
python中wx模块的具体使用方法
2020/05/15 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
财务副总经理工作职责
2013/11/25 职场文书
大学军训自我鉴定
2013/12/15 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
女方离婚起诉书
2015/05/18 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python