博客
关于我
短信验证码倒计时代码
阅读量:378 次
发布时间:2019-03-05

本文共 905 字,大约阅读时间需要 3 分钟。

###短信验证码倒计时功能实现

.getCode {    position: absolute;    top: 0.5rem;    right: 0;    font-size: 0.34rem;    color: #fbb111;    background: none;    border: none;    outline: none;}.getCode:disabled {    color: #ccc;}
$("getCode").on("click", function() {    time($(this));});var wait = 5;function time(obj) {    if (wait === 0) {        $(obj).removeAttr("disabled");        $(obj).text("获取验证码");        wait = 5;    } else {        $(obj).attr("disabled", "true");        $(obj).text(wait + "秒后重试");        wait--;        setTimeout(function() {            time(obj);        }, 1000);    }}

###功能说明

  • 点击"获取验证码"按钮后,按钮将禁用并显示倒计时
  • 倒计时将从5秒开始,每秒减1
  • 当倒计时达到0时,按钮将恢复原状,重新显示"获取验证码"
  • 整个过程中,按钮不可重复点击,确保用户只能获取一次验证码
  • 当前实现支持5位短信验证码输入,适用于常见的手机验证码格式
  • ###技术实现细节

  • 使用了jQuery选择器对按钮进行事件绑定
  • 通过递减wait变量实现倒计时功能
  • 使用JavaScript的setTimeout函数实现多次递归调用
  • 在倒计时结束时,恢复按钮的可用状态
  • 通过CSS样式控制按钮的显示状态和禁用效果
  • 该实现采用了模块化的方式,代码结构清晰,易于维护和扩展。

    转载地址:http://sqdwz.baihongyu.com/

    你可能感兴趣的文章
    NIFI大数据进阶_NIFI集群知识点_集群的断开_重连_退役_卸载_总结---大数据之Nifi工作笔记0018
    查看>>
    NIFI大数据进阶_使用NIFI表达式语言_来获取自定义属性中的数据_NIFI表达式使用体验---大数据之Nifi工作笔记0024
    查看>>
    NIFI大数据进阶_内嵌ZK模式集群1_搭建过程说明---大数据之Nifi工作笔记0015
    查看>>
    NIFI大数据进阶_外部ZK模式集群1_实际操作搭建NIFI外部ZK模式集群---大数据之Nifi工作笔记0017
    查看>>
    NIFI大数据进阶_实时同步MySql的数据到Hive中去_可增量同步_实时监控MySql数据库变化_操作方法说明_01---大数据之Nifi工作笔记0033
    查看>>
    NIFI大数据进阶_实时同步MySql的数据到Hive中去_可增量同步_实时监控MySql数据库变化_操作方法说明_02---大数据之Nifi工作笔记0034
    查看>>
    NIFI大数据进阶_离线同步MySql数据到HDFS_01_实际操作---大数据之Nifi工作笔记0029
    查看>>
    NIFI大数据进阶_离线同步MySql数据到HDFS_02_实际操作_splitjson处理器_puthdfs处理器_querydatabasetable处理器---大数据之Nifi工作笔记0030
    查看>>
    NIFI大数据进阶_离线同步MySql数据到HDFS_说明操作步骤---大数据之Nifi工作笔记0028
    查看>>
    NIFI大数据进阶_连接与关系_设置数据流负载均衡_设置背压_设置展现弯曲_介绍以及实际操作---大数据之Nifi工作笔记0027
    查看>>
    NIFI数据库同步_多表_特定表同时同步_实际操作_MySqlToMysql_可推广到其他数据库_Postgresql_Hbase_SqlServer等----大数据之Nifi工作笔记0053
    查看>>
    NIFI汉化_替换logo_二次开发_Idea编译NIFI最新源码_详细过程记录_全解析_Maven编译NIFI避坑指南001---大数据之Nifi工作笔记0068
    查看>>
    NIFI汉化_替换logo_二次开发_Idea编译NIFI最新源码_详细过程记录_全解析_Maven编译NIFI避坑指南002---大数据之Nifi工作笔记0069
    查看>>
    NIFI集群_内存溢出_CPU占用100%修复_GC overhead limit exceeded_NIFI: out of memory error ---大数据之Nifi工作笔记0017
    查看>>
    NIFI集群_队列Queue中数据无法清空_清除队列数据报错_无法删除queue_解决_集群中机器交替重启删除---大数据之Nifi工作笔记0061
    查看>>
    NIH发布包含10600张CT图像数据库 为AI算法测试铺路
    查看>>
    Nim教程【十二】
    查看>>
    Nim游戏
    查看>>
    NIO ByteBuffer实现原理
    查看>>
    Nio ByteBuffer组件读写指针切换原理与常用方法
    查看>>