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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery实现简单聊天室
Feb 08 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
php自动获取关键字的方法
2015/01/06 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
使用tensorflow实现线性回归
2018/09/08 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
详解python中list的使用
2019/03/15 Python
pytorch 模型可视化的例子
2019/08/17 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
python中如何写类
2020/06/29 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
WSDL的操作类型主要有几种
2013/07/19 面试题
在职人员函授期间自我评价分享
2013/11/08 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
节约用水的口号
2014/06/20 职场文书
刘胡兰观后感
2015/06/16 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android