JavaScript 设置发送验证码

O_oregou

已于 2023-01-12 23:20:29 修改

阅读量769

点赞数

文章标签： javascript 前端 css

于 2023-01-12 22:12:24 首次发布

本文链接：https://blog.csdn.net/O_osange/article/details/128667202

版权

效果要求：

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

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

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

实现原理：

给表单设置disabled属性，使其一开始无法点击

给对应元素设置单击响应函数，绑定单击响应函数之后，该按钮不可点击，并且变成60s的倒计时，并且对应表单的disabeled属性值变为flase，使其可以点击

用setInterval计时器控制60s的倒计时

并且在倒计时结束的时候清除计时器

代码展示：

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="./index.css">
</head>
<body>
    <div class="box">
        <form action="">
            <p>验证码</p><input type="text" id="yzm" placeholder="请输入验证码">
            <input type="button" value="发送" id="fs">
            <input type="button" value="提交" id="tj" disabled>
        </form>
    </div>
    <script src="./index.js"></script>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}

.box{
    margin: 0 auto;
    margin-top: 30px;
    padding-top: 20px;

    width: 300px;
    height: 70px;
    background-color: pink;
    border: 1px solid black;
    border-radius: 10px;

    display: flex;
    justify-content: center;


    position: relative;
}

.box p{
    display:inline-block;
    width: 70px;
    text-align:center;
}

#yzm{
    height: 25px;
    outline: none;
}

#fs{
    height: 25px;
}

#tj{
    float: right;
    height: 25px;
    position:absolute;
    top: 55px;
    right: 13px;
}

js

//获取节点
var fs = document.getElementById("fs")
var tj = document.getElementById("tj")

var wc = 0

//给发送按钮绑定单击响应函数
fs.onclick = function(){
    tj.disabled = false
    fs.disabled = true

    fs.value = 60+"s"
    //创建60s倒计时的计时器
    var i = 59
    var fsTime = setInterval(function(){
        fs.value = i+"s"
        i--
        if(i == 0){
            clearInterval(fsTime)
            fs.disabled = false
            fs.value = "发送"
        }
        if(wc){
            clearInterval(fsTime)
            fs.value = "发送"
        }
    },1000)
}

//为提交按钮绑定单击响应函数
tj.onclick = function(){
    if(!(yzm.value == "0505")){
        alert("请输入正确的验证码")
    }else{
        alert("提交成功")
        fs.value = "发送"
        wc = 1
    }
}