第四题小demo-发送验证码效果案例

小黑子史蒂夫

已于 2023-01-18 06:52:00 修改

阅读量88

点赞数

分类专栏：前端三剑客小demo 文章标签： javascript css css3

于 2023-01-18 05:15:06 首次发布

本文链接：https://blog.csdn.net/VanWot/article/details/128722589

版权

前端三剑客小demo 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

小黑子的发送验证码效果案例

需求：
1.发送按钮点击后，会被禁用；

2.被点击后，按钮里面的内容会变化成1分钟的倒计时；

3.待发送按钮被触发后才可以点击提交按钮，需在验证码框里填写0505，用弹窗提示成功。

实现原理：

首先将提交按钮用submit禁用，在js中通过点击事件点击发送验证码按钮后，才可以点击
在开始时设置全局变量tim=e60，发送按钮被点击后，利用间隔定时器实现倒计时，并在时间<1s时，用if语句恢复初始状态
在点击事件发生后，用if语句判断0505填写成功后才弹窗

html部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./发送验证码css.css">
    <script src="./发送验证码js.js"></script>
</head>

<body>
    <input type="text" id="text" value="">
    <button id="send">发送验证码</button>
    <button id="submit" disabled>提交</button>
</body>

</html>

css部分：

*{
    margin: 0;
    padding: 0;
}

body{
    display: flex;
	justify-content: center;
	align-items: center;
    height: 100vh;  
}

#send{
    margin: 5px;
}

js部分：

window.onload = function () {
    let time = 60;
    //获取按钮元素
    let send = document.getElementById("send");
    let submit = document.getElementById("submit");
    submit.disabled = true;

    //计时器，用来给发送验证码添加disabled和倒计时
    send.onclick = function () {
       let otime = setInterval(function () {
            submit.disabled = false;//移除提交按钮的disabled，使提交按钮可以被点击
            time--;
            send.disabled = true;
            send.innerText = `等待(${time+"s"})重新发送`;
            if (time < 1) 
            {//重新使按钮位于初始状态
                clearInterval(otime);
                send.disabled = false;
                send.innerHTML = `发送验证码`;
                submit.disabled = true;
            }
        }, 1000)
    }
    
    //给提交按钮赋予点击事件
    submit.onclick = function () { 
        let text = document.getElementById("text").value;
        if (text == "0505") 
        {//判断input内的值是否为0505
            alert("验证码正确");
        } 
        else 
        {
            alert("验证码错误");
        }
    }
}