js 发送验证码

最新推荐文章于 2023-11-01 22:48:28 发布

优降宁

最新推荐文章于 2023-11-01 22:48:28 发布

阅读量1k

点赞数 1

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

本文链接：https://blog.csdn.net/yjnlovepy/article/details/128660863

版权

该代码展示了一个网页版的短信验证功能，用户在输入框输入0505会弹出验证成功的提示，点击发送短信按钮后，按钮会被禁用并开始60秒倒计时。使用JavaScript实现计时器功能，当倒计时结束，按钮恢复初始状态。

摘要由CSDN通过智能技术生成

效果展示图

短信

需求分析
输入框内输入0505弹出验证成功
点击发送短信，按钮禁用并出现一分钟倒计时

功能实现
检验input里的值是否正确，正确弹出正确，错误弹出错误
点击发送短信，改变button里的内容，利用计时器，number从60开始，每执行一次减一，直到为0，改变button内容回到初始，禁用解除

<!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>
        div{
            height: 100px;
            width: 300px;
            margin: 0 auto;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div>
        
        <input type="text" placeholder="请输入验证码" class="in" >
        <button class="yanzheng">点击发送验证码</button>
        <button class="queren">请点击确认</button>
    </div>
    
    <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>
</body>
</html>