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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
深入分析jQuery.one() 函数
Jun 03 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中的string类型使用说明
2010/07/27 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
乐观大学生的自我评价
2014/01/10 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
大学入学感言
2015/08/01 职场文书
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python