分享好友 资讯首页 资讯分类 切换频道

js发送短信验证码后60秒倒计时

2025-11-10 15:4000

在JavaScript中实现一个倒计时功能,用于发送短信验证码后的等待时间,可以通过使用 setTimeout 函数和 setInterval 函数来实现。以下是一个简单的例子,展示了如何实现一个发送短信验证码后的60秒倒计时。这个例子假设你已经有一个发送验证码的函数和一个显示倒计时的HTML元素。

js发送短信验证码后60秒倒计时

HTML部分可能如下:

<div id="countdown">60</div> <!-- 用于显示倒计时的元素 -->
<button id="sendCodeBtn">发送验证码</button> <!-- 用于发送验证码的按钮 -->

JavaScript部分可能如下:

let countdown = 60; // 设置倒计时时间(秒)
let intervalId = null; // 用于存储setInterval的ID
let sendCodeBtn = document.getElementById(’sendCodeBtn’); // 获取按钮元素
let countdownElement = document.getElementById(’countdown’); // 获取显示倒计时的元素
sendCodeBtn.addEventListener(’click’, function() {
  // 当按钮被点击时,开始倒计时并显示剩余时间
  countdownElement.innerText = countdown; // 显示剩余时间
  intervalId = setInterval(function() { // 每秒更新一次剩余时间
    countdown--; 
    countdownElement.innerText = countdown; // 更新显示的剩余时间
    if (countdown <= 0) { // 如果倒计时结束,执行相应的操作(例如再次发送验证码)
      clearInterval(intervalId); // 清除定时器
      // 这里可以添加再次发送验证码的代码
    }
  }, 1000); // 设置定时器的时间间隔为1秒(1000毫秒)
});

这个例子中的代码会在用户点击按钮后开始倒计时,并在每秒更新一次剩余时间,当倒计时结束时(即剩余时间为零时),会清除定时器并执行相应的操作(例如再次发送验证码),你可以根据自己的需求修改这个代码,以适应你的应用程序的具体需求。

举报
收藏 0
打赏 0
评论 0
怎么注册飞机聊天账号和密码呢
注册飞机聊天账号,先下载软件,填写手机号,设置密码,提交验证码后即可完成注册。为保障账号安全,建议密码包含字母、数字和特殊符号,避免简单密码。具体步骤以软件内指引为准。

0评论2026-04-070

 
友情链接