1.发送按钮点击后,会被禁用; 2被点击后,按钮里面的内容会变化成1分钟的倒计时; 3.待发送按钮被触发后才可以点击提交按钮,需在验证码框里填写0505,用弹窗提示成功

1.发送按钮点击后,会被禁用;
2被点击后,按钮里面的内容会变化成1分钟的倒计时;
3.待发送按钮被触发后才可以点击提交按钮,需在验证码框里填写0505,用弹窗提示成功

html部分

 验证码: <input type="number" id="number"> <button>发送</button>
    <input type="button" onclick="validateCode()"  value="确定" />

JS部分


        var btn = document.querySelector('button');
        var btn2 = document.querySelector("#tijiao");
        var time = 60; 
        btn2.disabled = true;
        // 定义剩下的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true;
            btn2.disabled = false;
            var timer = setInterval(function() {
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    time = 60; 
                    //这个需要重新开始
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);

        })
        
    function validateCode()
    {
        //获取输入的验证码
        var inputCode = document.getElementById("number").value;
        console.log(inputCode);
        if (inputCode.length <= 0)
        {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
            alert("请输入验证码!");
        }
        else if (inputCode.toUpperCase() != "0505")
        {
            alert("验证码输入有误!");
        }
        else
        {
            alert("验证码正确!");
        }       
    }    

首先设置btn2.disabled = true;
点击发送,会解封btn2。
设置定时器
定义timer=60并且不断递减。如果变量为0则清除定时器,并且复原按钮初始状态,并且显示提交按钮

验证码正确

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 JavaScript 中的定时器 setInterval() 来实现按钮点击禁用时间和倒计时功能。具体实现如下: 1. 定义一个计时器变量,用于存储定时器的 ID。 ``` var timer; ``` 2. 给按钮添加点击事件,点击按钮禁用按钮并开始倒计时。 ``` document.getElementById("btn").onclick = function() { // 禁用按钮 document.getElementById("btn").disabled = true; // 设置倒计时时间 var seconds = 60; // 启动定时器 timer = setInterval(function() { // 更新倒计时时间 seconds--; // 显示倒计时时间 document.getElementById("countdown").innerHTML = seconds + "秒"; // 倒计时结束,清除定时器 if (seconds <= 0) { clearInterval(timer); // 恢复按钮 document.getElementById("btn").disabled = false; // 清除倒计时显示 document.getElementById("countdown").innerHTML = ""; } }, 1000); } ``` 3. 页面刷新后,需要保留倒计时时间。可以使用浏览器的本地存储(localStorage)来实现。在页面加载时,读取本地存储中的倒计时时间,如果存在则恢复倒计时,否则不进行操作。 ``` window.onload = function() { // 从本地存储中读取倒计时时间 var seconds = localStorage.getItem("countdownSeconds"); // 如果倒计时时间存在,恢复倒计时 if (seconds) { // 禁用按钮 document.getElementById("btn").disabled = true; // 启动定时器 timer = setInterval(function() { // 更新倒计时时间 seconds--; // 显示倒计时时间 document.getElementById("countdown").innerHTML = seconds + "秒"; // 倒计时结束,清除定时器 if (seconds <= 0) { clearInterval(timer); // 恢复按钮 document.getElementById("btn").disabled = false; // 清除倒计时显示 document.getElementById("countdown").innerHTML = ""; // 移除本地存储中的倒计时时间 localStorage.removeItem("countdownSeconds"); } else { // 更新本地存储中的倒计时时间 localStorage.setItem("countdownSeconds", seconds); } }, 1000); } } ``` 4. 在定时器中更新本地存储中的倒计时时间,以便在页面刷新后恢复倒计时。 ``` // 更新本地存储中的倒计时时间 localStorage.setItem("countdownSeconds", seconds); ``` 注意,以上代码仅供参考,具体实现需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值