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封装的分页组件
Jun 26 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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中strlen和mb_strlen的区别
2014/08/31 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
js实现缓动动画
2020/11/25 Javascript
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
python实现横向拼接图片
2020/03/23 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
美容院考勤制度
2014/01/30 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
行政监察建议书
2014/05/19 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
校长新学期致辞
2015/07/30 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android