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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jquery仿微信聊天界面
May 06 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现动态操作table行
Nov 23 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实现即时输出、实时输出内容方法
2015/05/27 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
如何将python中的List转化成dictionary
2016/08/15 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
python字典的值可以修改吗
2020/06/29 Python
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
公司业务主管岗位职责
2013/12/07 职场文书
工业设计专业个人求职信范文
2013/12/28 职场文书
领导失职检讨书
2014/02/24 职场文书
市场推广策划方案
2014/06/02 职场文书
2014年检验科工作总结
2014/11/22 职场文书
单位考核鉴定意见
2015/06/05 职场文书
离婚民事起诉状
2015/08/03 职场文书
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android
MySQL导致索引失效的几种情况
2022/06/25 MySQL