博客
关于我
短信验证码倒计时代码
阅读量: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/

    你可能感兴趣的文章
    nginx配置一、二级域名、多域名对应(api接口、前端网站、后台管理网站)
    查看>>
    nginx配置中的服务器名称
    查看>>
    Nginx配置代理解决本地html进行ajax请求接口跨域问题
    查看>>
    nginx配置全解
    查看>>
    Nginx配置参数中文说明
    查看>>
    Nginx配置后台网关映射路径
    查看>>
    nginx配置域名和ip同时访问、开放多端口
    查看>>
    Nginx配置多个不同端口服务共用80端口
    查看>>
    Nginx配置好ssl,但$_SERVER[‘HTTPS‘]取不到值
    查看>>
    Nginx配置如何一键生成
    查看>>
    Nginx配置实例-动静分离实例:搭建静态资源服务器
    查看>>
    Nginx配置实例-反向代理实例:根据访问的路径跳转到不同端口的服务中
    查看>>
    Nginx配置实例-反向代理实现浏览器请求Nginx跳转到服务器某页面
    查看>>
    Nginx配置实例-负载均衡实例:平均访问多台服务器
    查看>>
    Nginx配置文件nginx.conf中文详解(总结)
    查看>>
    Nginx配置自带的stub状态实现活动监控指标
    查看>>
    nginx配置详解、端口重定向和504
    查看>>
    Nginx配置负载均衡到后台网关集群
    查看>>
    Nginx配置限流,技能拉满!
    查看>>
    Nginx配置静态代理/静态资源映射时root与alias的区别,带前缀映射用alias
    查看>>