JS实现随机验证码登录

人生之路不会是一帆风顺的,我们会遇上顺境,也会遇上逆境,在所有成功路上折磨你的,背后都隐藏着激励你奋发向上的动机,人生没有如果,只有后果与结果,成熟,就是用微笑来面对一切小事。

导读:本篇文章讲解 JS实现随机验证码登录,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

JS实现随机验证码登录

 

<!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>
      .login {
        width: 236px;
        height: 90px;
        background-color: aqua;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 2px solid blue;
        border-radius: 7px;
        position: absolute;
        top: 50%; 
        left: 50%;
        transform: translate(-50%,-50%);
      }
      .input {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        margin-top: 10px;
      }
      .input input {
        border: 0;
        outline: none;
      }
      .input div {
        width: 36px;
        height: 19px;
        margin-left: 6px;
        padding: 0 5px;
        background-color: pink;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <div class="login">
      <span>验证码登录</span>
      <div class="input">
        <input id="txt" type="text" name="" placeholder="请输入验证码" />
        <div id="code">1d1s</div>
      </div>
      <div class="button">
        <button id="btn">登录</button>
      </div>
    </div>
    <script>
      var code = document.getElementById("code");
      var txt = document.getElementById("txt");
      var btn = document.getElementById("btn");

      //    生成验证码的函数
      function coderandom(codelen) {
        var str = "abcdef1234567890";
        var strcode = "";
        for (var i = 0; i < codelen; i++) {
          var n = Math.floor(Math.random() * str.length);
          strcode+=str[n]
        }
        code.innerText=strcode
      }
      coderandom(4);
      // 点击验证码  切换验证码
      code.onclick = function () {
        coderandom(4);
      };

    //   点击登录 进行判断
    btn.onclick=function(){
        if(txt.value===code.innerText){
            alert("验证码正确")
            location.href="https://blog.csdn.net/weixin_62765236?type=blog"
        }else{
            alert("验证码不正确")
        }
    }
    </script> 
  </body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/126768.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!