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

获取验证码倒计时60秒按钮

2026-02-24 03:5500

这是一个简单的HTML和JavaScript代码示例,用于创建一个倒计时按钮,该按钮在点击后会开始倒计时以获取验证码。倒计时为60秒。请注意,此示例仅用于演示目的,实际使用时可能需要添加更多功能,例如后端验证等。

获取验证码倒计时60秒按钮

HTML部分:

<!DOCTYPE html>
<html>
<head>
    <title>获取验证码倒计时按钮</title>
</head>
<body>
    <button id="getVerificationCodeBtn" onclick="startCountdown()">获取验证码</button>
    <div id="countdown">60</div>
    <script src=https://www.271shop.com/static/image/nopic320.png>

JavaScript部分(countdown.js):

let countdownNumber = 60; // 设置倒计时的总时间
let intervalId; // 用于存储setInterval返回的ID
function startCountdown() {
    // 重置按钮文字为“获取验证码”
    document.getElementById(’getVerificationCodeBtn’).innerText = ’获取验证码’;
    // 显示倒计时数字
    document.getElementById(’countdown’).innerText = countdownNumber;
    // 每秒更新倒计时并递减
    intervalId = setInterval(function() {
        countdownNumber--;
        if (countdownNumber >= 0) { // 当倒计时大于或等于0时更新显示
            document.getElementById(’countdown’).innerText = countdownNumber;
        } else { // 当倒计时结束,重置按钮为可用状态并停止倒计时
            clearInterval(intervalId); // 停止倒计时
            document.getElementById(’getVerificationCodeBtn’).disabled = false; // 使按钮可用
        }
    }, 1000); // 每秒更新一次倒计时
}

这个简单的示例创建了一个按钮,当点击该按钮时,会开始一个倒计时,倒计时从60秒开始,每秒递减并在页面上显示剩余时间,当倒计时结束时,按钮将重新变为可用状态,这只是一个简单的示例,实际使用时可能需要添加更多的功能,例如与后端服务器交互以验证用户身份等。

举报
收藏 0
打赏 0
评论 0
怎么修改微信小程序的手机号
微信小程序的手机号简介修改,建议简洁明了,突出个人或企业信息。“原手机号已不再使用,现已更换为XXX新手机号,方便联系,请谅解。联系方式变更不影响服务质量,感谢您的关注与支持。”或者“为方便联系,现更新小程序手机号为XXX。随时欢迎联系咨询,我们将竭诚为您服务。”

0评论2026-04-030

怎么注册邮箱在手机上登录
在手机应用商店下载邮箱应用,打开应用后选择注册,填写相关信息如用户名、密码、手机号等,完成验证后,即可成功注册邮箱。登录邮箱,可查看邮件、管理联系人等。

0评论2026-04-030

 
友情链接