案例：验证码

最新推荐文章于 2024-10-18 17:51:23 发布

IT噜噜

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量104

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/Ghlys/article/details/128692591

版权

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

实现原理：
1、通过给发送按钮绑定点击后改变其原生属性的事件实现点击禁用
2、使用延时定时器设置按钮解放时间
3、使用间隔定时器使发送按钮内的秒数更新，并在里面设置if语句，当到达目标秒即停止更新
4、给数字框绑定键盘事件实现，并使用数组收集用户键盘事件信息后，用keycode判断输入是否正确
5、在数字框的键盘时间内设置if语句，当用户按下删除键，计算机停止收集信息，并删除数组内对应下标内容
需要注意的是，当删除数组对应成员内容后会留下空值，此时需要我们缩短一个单位的数组长度，才能实现完全删除前面一个收集的数组成员
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <style>
    *{
        margin: 0 ;
        padding: 0;
    }
    #btn{
        margin: 20px;
        width: 100px;
    }
    #next{
        width: 60px;
        height: 30px;
        position: absolute;
        top: 60px;
        left: 50px;
        background-color: skyblue;
        border: none;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <input type=tel placeholder="请输入验证码" name="name_number" id="num">
    <button type=submit id="btn" name="name_btn">发送验证码</button>
    <button type=submit disabled id="next" name="name_next">下一步</button>
</body>
<script>
	$("#btn").click(function(){
        //点击发送按钮后禁用两个按钮
        $("#btn").attr("disabled", "disabled");
        $("#next").attr("disabled")
        //设置间隔计时器，每一s更新一次发送框内的倒计时
        var cd=60
        var time2=setInterval
        (function(){
        //当ct大于0时继续倒数显示
        if(cd>0){
           //修改发送按钮内的文本
            $("#btn").text(`重新发送${cd-=1}s`)
            console.log(cd)}
        else{
            $("#btn").text(`重新发送`)
            }
        },1000)   
        //设置延时定时器设置两个按钮解放禁用
        var time1=setTimeout(function(){
            $("#btn").removeAttr("disabled")
            $("#next").removeAttr("disabled")
        },60000) 
    })
    //设置数组装数字框输入内容
    var arr=new Array(j)
    //与77行代码相消使j=0；
    var j=-1
    document.onkeyup=function(event){
        //当用户删去内容时，删去数组对应的成员，并缩短一个数组长度，再结束语句等待用户的重新输入触发键盘事件
        if (event.keyCode==8){
            arr.splice(j,2)
            j-=1
            return
        }
        //更新下标，使用户输入内容进入对应数组位置
        j++
        arr[j]=`${event.keyCode}`
        console.log(arr)
        //用keycode判断输入是否正确，分为字母键盘数字和数字键盘数字，输入正确提示框
        if(arr==`${['101','96','101','96']}`||arr==`${['53','48','53','48']}`){
            alert("提交成功")
        }
    }
</script>
</html>

效果：

QQ录屏20230115105637