热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQuery点击获取验证码按钮及倒计时功能

验证码倒计时功能,在前端开发中经常会遇到,下面小编给大家带来了jQuery点击获取验证码按钮及倒计时功能,感兴趣的朋友跟随小编一起看看吧

1.具体思路

        点击获取验证码按钮 —> 调用获取验证码接口(忽略)—>获取验证码按钮切换到不可点击状态,按钮背景色呈灰色,按钮文字呈现为“倒计时秒数+后可重新获取”—> 倒计时60s后按钮恢复可点击状态,按钮背景呈橙色,按钮文字呈现为“重新发送”

2.HTML代码

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 点击获取验证码按钮及倒计时,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
  • 本文详细解析了HTML5中nav标签的功能及其在网页设计中的应用,帮助开发者更好地理解和使用这一标签来提升网站的结构化水平。 ... [详细]
  • 本文详细介绍了如何使用JavaScript实现数据的双向绑定,包括MVVM架构的基本概念、不同框架下的实现方式以及具体的代码示例。 ... [详细]
  • 前端常用的布局类型——前端布局
    1.Static静态布局固定宽高:2.Liquid流式布局宽高用百分比,按屏幕分辨率调整,布局不发生变化3.Adaptive自适应 ... [详细]
  • 探讨在 Vue 框架中遇到的数据更新延迟或失败的问题,并提供解决方案。 ... [详细]
  • 本文探讨了ES6为字符串操作引入的新方法,包括但不限于查找、替换等高级功能。 ... [详细]
  • 本文详细介绍了SQL中的DELETE和UPDATE命令,包括它们的基本语法、应用场景以及如何通过这些命令高效地管理数据库中的数据。重点解释了DELETE用于删除数据行,而UPDATE则用于更新数据行中的特定字段值。 ... [详细]
  • 本文详细介绍了MooseFS中的副本管理(Goal)以及文件回收机制。副本管理允许用户设定文件的复制份数,确保数据的安全性和可用性;而文件回收机制则提供了在误删除文件后的恢复途径,通过设置合理的隔离时间,保护重要数据。 ... [详细]
  • 深入理解JVM内存加载机制与实践
    本文通过一个简单的Java类`Person`的示例,详细解析了JVM在加载和运行时如何处理类和对象的内存分配过程。通过具体代码演示,帮助读者更好地理解和掌握JVM内存管理的核心概念。 ... [详细]
  • 本文详细介绍了Android开发中的关键组件——View和ViewGroup类,以及Android平台上的两种主要事件处理方式。同时,文章还探讨了如何利用Android提供的标准布局文件来优化UI设计。 ... [详细]
  • 在尝试重新激活已过期的 Visual Studio 2008 试用版时遇到了困难,特别是找不到输入序列号的位置。经过一番探索,最终找到了有效的解决方法,包括未安装和已安装过期后的处理方式。 ... [详细]
  • 开发笔记:精通 CSS 第 10 章 变换过渡与动画 学习笔记
    开发笔记:精通 CSS 第 10 章 变换过渡与动画 学习笔记 ... [详细]
  • Eclipse 中 Maven 的基础配置指南
    本文详细介绍了如何在 Eclipse 环境中配置 Maven,包括环境变量的设置、Maven 插件的安装与配置等关键步骤,旨在帮助开发者顺利搭建开发环境。 ... [详细]
  • select下拉箭头改变,兼容ie8/9
    各个浏览器下select默认的下拉箭头差别较大,通常会清除默认样式,重新设计<html><head><metacharsetutf-8> ... [详细]
  • 本文介绍了如何在Angular CLI创建的项目中安装并配置Bootstrap,包括必要的依赖项jQuery和Popper.js的安装步骤。 ... [详细]
author-avatar
shangce
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有