欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

有了这样的登录页面,你还怕你的访问量低吗?

程序员文章站 2022-03-25 11:05:45
效果是不是见过很多类似的网站?都是采用这种效果的呢?看起来很简洁,也很舒服,那么你知道是怎么实现的吗?接下来就分享给小伙伴们吧代码下面的代码是不完全的哟,我后期会将代码上传到此处,想要学习的小伙伴们可以下载来学习一下哈~ ...

效果

有了这样的登录页面,你还怕你的访问量低吗?

是不是见过很多类似的网站?都是采用这种效果的呢?看起来很简洁,也很舒服,那么你知道是怎么实现的吗?接下来就分享给小伙伴们吧

代码

下面的代码是不完全的哟,我后期会将代码上传到此处,想要学习的小伙伴们可以下载来学习一下哈~

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>跃动科技登录界面</title>
    <!-- 引入bootstrap样式 -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <!--图标库-->
    <link
      href="css/materialdesignicons.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <!--自定义样式-->
    <link href="css/style.min.css" rel="stylesheet" type="text/css" />

    <style>
      .lear-wrapper {
        position: relative;
        background-color: antiquewhite;
      }
      .lear-login {
        display: flex !important;
        min-height: 100vh;
        align-items: center !important;
        justify-content: center !important;
      }
      .login-center1 {
        background: #fff;
        min-width: 38.25rem;
        padding: 2.14286em 3.57143em;
        border-radius: 5px;
        margin: 2.85714em 0;
      }
      .login-header {
        margin-bottom: 1.5rem !important;
      }
      .login-center .has-feedback.feedback-left .form-control {
        padding-left: 38px;
        padding-right: 12px;
      }
      .login-center .has-feedback.feedback-left .form-control-feedback {
        left: 0;
        right: auto;
        width: 38px;
        height: 38px;
        line-height: 38px;
        z-index: 4;
        color: #dcdcdc;
      }
      .login-center .has-feedback.feedback-left.row .form-control-feedback {
        left: 15px;
      }
    </style>
  </head>
  <body size-sensor-id="1" style="position: relative">
    <div class="row lear-wrapper">
      <div class="lear-login">
        <div class="login-center1">
          <div class="login-header text-center">
            <h1>跃动科技</h1>
          </div>
          <form>
            <div class="form-group has-feedback feedback-left">
              <input
                type="text"
                placeholder="请输入您的用户名"
                class="form-control"
                name="username"
                id="username"
              /><span class="help-block"></span>
              <span
                class="mdi mdi-account form-control-feedback"
                aria-hidden="true"
              ></span>
            </div>
            <div class="form-group has-feedback feedback-left">
              <input
                type="password"
                placeholder="请输入密码"
                class="form-control"
                id="password"
                name="password"
              /><span class="help-block"></span>
              <span
                class="mdi mdi-lock form-control-feedback"
                aria-hidden="true"
              ></span>
            </div>

            <div
              id="captcha_note_parent"
              class="form-group has-feedback feedback-left row"
            >
              <div class="col-xs-7">
                <input
                  type="text"
                  id="captcha"
                  name="captcha"
                  class="form-control"
                  placeholder="请输入验证码"
                />
              </div>
              <div class="col-xs-5">
                <canvas id="canvas" width="120" height="45"></canvas>
              </div>
              <span
                id="captcha_note_child"
                class="help-block"
                style="margin-left: 15px"
              ></span>
            </div>

            <div class="form-group">
              <button
                id="login_btn"
                class="btn btn-block btn-primary"
                type="button"
              >
                立即登录
              </button>
            </div>
          </form>
          <div style="margin-left: 100px">
            <a href="">还没有账号?去注册</a>
          </div>
          <!--源码世界   www.ym4j.com-->
        </div>
      </div>
    </div>

    <!-- 引入jQuery和bootstrap的js -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/md5.js"></script>
    <!-- 点线粒子插件 -->
    <script
      color="255,0,255"
      opacity="0.8"
      zindex="9999"
      count="99"
      src="js/canvas-nest.js"
    ></script>
    <canvas
      width="1280"
      height="641"
      style="
        display: block;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: 9999;
        opacity: 0.8;
      "
    ></canvas>
    <script>
      var show_num = [];
      $(function () {
        $("input[name='username']").blur(verifyUsername);
        $("input[name='password']").change(removeLoginDisabled);
        //生成图片验证码
        drawPic(show_num);
        $("#canvas").click(function (e) {
          //取消事件的默认动作。
          e.preventDefault();
          drawPic(show_num);
        });
        $("#captcha").blur(verifyCaptcha);
        $("#login_btn").mousedown(verifyLogin);
        //回车登录
        $("body").keyup(function (event) {
          if (event.keyCode === 13) {
            //keyCode=13是回车键
            verifyLogin();
          }
        });
      });

      function verifyCaptcha() {
        var captcha_num = $("#captcha").val().toLowerCase();
        var real_num = show_num.join("");
        $("#captcha_note_parent").removeClass("has-success has-error");
        $("#captcha_note_child").text("");
        if (captcha_num == "") {
          $("#captcha_note_parent").addClass("has-error");
          $("#captcha_note_child").text("验证码为空");
          $("#login_btn").attr("disabled", "disabled");
          return false;
        } else if (captcha_num == real_num) {
          $("#captcha_note_parent").addClass("has-success");
          $("#captcha_note_child").text("验证码正确");
          $("#login_btn").removeAttr("disabled");
          return true;
        } else {
          $("#captcha_note_parent").addClass("has-error");
          $("#captcha_note_child").text("验证码错误");
          $("#login_btn").attr("disabled", "disabled");
          return false;
        }
      }

      function verifyUsername() {
        //发送ajax请求校验用户名是否可用
        var username = document.getElementById("username").value;
        var lock = true;
        if (username === "") {
          show_validate_msg("#username", "error", "用户名为空");
          $("#login_btn").attr("disabled", "disabled");
          return false;
        } else {
          $.ajax({
            url: "/login/loginVerifyUsername/" + username,
            type: "GET",
            success: function (result) {
              if (result.code === 200) {
                show_validate_msg("#username", "error", "用户名不存在");
                $("#login_btn").attr("disabled", "disabled");
                lock = false;
              } else {
                show_validate_msg(
                  "#username",
                  "success",
                  "欢迎" + username + "登录"
                );
                $("#login_btn").removeAttr("disabled");
              }
            },
          });
          return lock;
        }
      }

      function removeLoginDisabled() {
        $("#login_btn").removeAttr("disabled");
      }

      function verifyLogin() {
        $("input[name='username']").blur(verifyUsername);
        $("#captcha").blur(verifyCaptcha);

        if ($("#username").val() == "") {
          show_validate_msg("#username", "error", "用户名为空");
          $("#login_btn").attr("disabled", "disabled");
          return false;
        }

        if ($("#password").val() == "") {
          show_validate_msg("#password", "error", "密码为空");
          $("#login_btn").attr("disabled", "disabled");
          return false;
        }

        if ($("#captcha").val() == "") {
          $("#captcha_note_parent").addClass("has-error");
          $("#captcha_note_child").text("验证码为空");
          $("#login_btn").attr("disabled", "disabled");
          return false;
        }

        //alert(verifyUsername);

        if (verifyUsername() && verifyCaptcha()) {
          var pwd = $("#password").val();
          $("#password").val($.md5(pwd));
          console.log($("#password").val());
          $.ajax({
            url: "/login/verifyLogin",
            type: "GET",
            data: {
              username: $("#username").val(),
              password: $("#password").val(),
            },
            success: function (result) {
              if (result.code === 100) {
                var url = result.extend.url;
                //alert(url);
                location.href = url;
              } else {
                show_validate_msg("#password", "error", "密码错误");
                $("#login_btn").attr("disabled", "disabled");
              }
            },
          });
        }
      }

      //显示校验结果的提示信息
      function show_validate_msg(ele, status, msg) {
        //清除当前元素的校验状态
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");
        if ("success" === status) {
          $(ele).parent().addClass("has-success");
          $(ele).next("span").text(msg);
        } else if ("error" === status) {
          $(ele).parent().addClass("has-error");
          $(ele).next("span").text(msg);
        }
      }

      /**生成一个随机数**/
      function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      }

      /**生成一个随机色**/
      function randomColor(min, max) {
        var r = randomNum(min, max);
        var g = randomNum(min, max);
        var b = randomNum(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
      }

      /**绘制验证码图片**/
      function drawPic(show_num) {
        var canvas = document.getElementById("canvas");
        var width = canvas.width;
        var height = canvas.height;
        var ctx = canvas.getContext("2d");
        ctx.textBaseline = "bottom";

        /**绘制背景色**/
        ctx.fillStyle = randomColor(280, 280); //颜色若太深可能导致看不清
        ctx.fillRect(0, 0, width, height);
        /**绘制文字**/
        var sCode =
          "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        for (var i = 0; i < 4; i++) {
          var txt = aCode[randomNum(0, aCode.length)]; //得到随机的一个内容
          show_num[i] = txt.toLowerCase();
          ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
          ctx.font = randomNum(15, 40) + "px SimHei"; //随机生成字体大小
          var x = 10 + i * 25;
          var y = randomNum(25, 45);
          var deg = randomNum(-45, 45);
          //修改坐标原点和旋转角度
          ctx.translate(x, y);
          ctx.rotate((deg * Math.PI) / 180);
          ctx.fillText(txt, 0, 0);
          //恢复坐标原点和旋转角度
          ctx.rotate((-deg * Math.PI) / 180);
          ctx.translate(-x, -y);
        }
      }
    </script>
  </body>
</html>

本文地址:https://blog.csdn.net/qq_44723773/article/details/109262679