js实现发送验证码

浪漫季

于 2023-01-18 00:44:56 发布

阅读量632

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/lishunyu1226/article/details/128722323

版权

js实现发送验证码

要求
原理
html
css
js

要求

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

原理

按钮点击之后会禁用disabled 值为true，同时按钮里面的内容也会变化
然后用到计时器，再定义一个变量再计时器里不断递减
未达到第三个要求可以用if判断条件是否正确

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>
    <style>
</head>
<body style="background-color:pink">
    <div>
        
        <input type="text" placeholder="请输入验证码" class="in" >
        <button class="yanzheng">点击发送验证码</button>
        <button class="queren">请点击确认</button>
    </div>
</body>
</html>

css

<style>
        div{
            height: 200px;
            width: 120px;
            margin: 0 auto;
            margin-top: 200px;
        }
    </style>

js

<script>
        var number=60;
        oy=document.querySelector('.yanzheng');
        oq=document.querySelector('.queren');
        oy.onclick=function(){
            move=setInterval(function(){
                if(number>0){
                    oy.disabled=true;
                    oy.innerHTML="请在"+number+"秒后重试";
                    number--;
                }
                else{
                    clearInterval(move)
                    number=60;
                    oy.disabled=false;
                    oy.innerHTML="点击发送验证码";
                }
            },1000)
        }
        oq.onclick=function(){
            var oinput=document.querySelector('.in').value;
            console.log(typeof(oinput))
            //判断要求
            if(oinput==="0505"){
                alert('验证成功');
            }
            else{
                alert('验证失败！')
            }
        }
    </script>