前言

一个使用 HTML5+CSS3+JavaScript 编写的登录页面，包含 logo、轮播图、正则表达式、CSS3渐变…的登录界面。

预览

项目结构

项目源码

笔者提供项目源码，建议通过 github 或 gitee 获取，别忘了 start 一下哦，也可通

过本页面获取，开源不易，点个赞吧。

https://gitee.com/acx7/login-page

https://github.com/Acx7/login-page

1.图片资源

login.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>login</title>
  <link rel="stylesheet" href="login.css">
  <script src="login.js"></script>
</head>
<body>
<section>
  <!-- 背景颜色 -->
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <img id="logo" src="logo.png" alt="logo">
  <!-- 轮播图 -->
  <div class="box">
    <div class="container">
      <img id="pic0" src="0.png" alt="">
      <img id="pic1" src="1.png" alt="" hidden>
      <img id="pic2" src="2.png" alt="" hidden>
      <img id="pic3" src="3.png" alt="" hidden>
      <img id="pic4" src="4.png" alt="" hidden>
      <script>
        let index = 0;
        let pic = document.getElementById("pic"+index);
        setInterval(function(){
          pic.setAttribute("hidden","true");
          index++;
          pic = document.getElementById("pic"+index);
          pic.removeAttribute("hidden");
          if (index === 4) {
            index = 0;
          }
        },3000);
      </script>
    </div>
  </div>
  <!-- 登录框 -->
  <div class="box">
    <div class="container">
      <div class="form">
        <h2 onclick="f1()">密码登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
        <h2 onclick="f2()">手机登录</h2>
        <form method="get" action="">
          <div class="inputBox">
            <label>
              <input type="text" id="username" name="username" placeholder="用户名" autocomplete="off" maxlength="20">
            </label>
          </div>
          <div class="inputBox">
            <label>
              <input type="text" id="phoneNumber" name="phoneNumber" autocomplete="off" placeholder="手机号" maxlength="11" hidden>
            </label>
          </div>
          <div class="inputBox">
            <label>
              <input type="text" id="code" name="code" autocomplete="off" placeholder="验证码" maxlength="6" hidden>
            </label>
          </div>
          <div class="inputBox">
            <label>
              <input type="password" id="password" name="password" autocomplete="off" placeholder="密码" maxlength="20">
            </label>
          </div>
          <div class="inputBox">
            <label>
              <input type="password" id="newPassword" name="newPassword" autocomplete="off" placeholder="新密码" maxlength="20" hidden>
            </label>
          </div>
          <div class="inputBox" style="text-align:center">
            <input id="login" type="submit" value="登录" name="login" onclick="checkLogin()">
            <input id="login2" type="submit" value="登录" name="login2" onclick="checkLogin2()" hidden>
            <input id="register" type="submit" value="注册用户" name="register" onclick="checkReg()" hidden>
            <input id="modify" type="submit" value="修改密码" name="modify" onclick="checkMod()" hidden>
            <input id="reset" type="submit" value="重置密码" name="reset" onclick="checkRe()" hidden>
            <input id="send" type="submit" value="发送验证码" name="send" onclick="checkSend();" hidden>
          </div>
        </form>
        <p class="forget"><a href="javascript:void(0)" onclick="f3()">注册账号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
          <a href="javascript:void(0)" onclick="f4()">修改密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
          <a href="javascript:void(0)" onclick="f5()">忘记密码</a></p>
      </div>
    </div>
  </div>
</section>
</body>
</html>

login.css

/* 清除浏览器默认边距*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 使用flex布局，让内容垂直和水平居中 */
section {
    /* 相对定位 */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}
/* 背景颜色 */
section .color {
    /* 绝对定位 */
    position: absolute;
    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
    filter: blur(200px);
}
/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */
section .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #ff359b;
}
section .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #fffd87;
}
section .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #00d2ff;
}
.box {
    position: relative;
}
/* 登录框样式 */
.container {
    position: relative;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
#logo {
    position:fixed;
    top:10px;
    left:10px;
}
.form {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
}
/* 登录标题样式 */
.form h2 {
    position: relative;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 0;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
/* 登录标题的下划线样式 */
.form h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 0;
    height: 3px;
    background: #fff;
    transition: 0.5s;
}
.form h2:hover:before {
    width: 88px;
}
.form .inputBox {
    width: 100%;
    margin-top: 20px;
}
/* 输入框样式 */
.form .inputBox input {
    width: 100%;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border: none;
    border-radius: 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.form .inputBox input::placeholder {
    color: #fff;
}
/* 登录按钮样式 */
.form .inputBox input[type="submit"] {
    background: #fff;
    color: #666;
    max-width: 120px;
    margin-bottom: 20px;
    margin-right: 18px;
    margin-left: 8px;
    font-weight: 600;
    cursor: pointer;
}
.forget {
    margin-top: 6px;
    color: #fff;
    letter-spacing: 1px;
}
.forget a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

login.js

function f1() {
    let tmp = document.getElementById("username");
    tmp.value = "";
    tmp.removeAttribute("hidden");
    tmp = document.getElementById("phoneNumber");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("code");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("password");
    tmp.removeAttribute("hidden");
    tmp.value = "";
    tmp = document.getElementById("newPassword");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("login");
    tmp.removeAttribute("hidden");
    tmp = document.getElementById("send");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("modify");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("register");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("reset");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("login2");
    tmp.setAttribute("hidden", "true")
}
function f2() {
    let tmp = document.getElementById("username");
    tmp.setAttribute("hidden", "true");
    tmp = document.getElementById("phoneNumber");
    tmp.removeAttribute("hidden");
    tmp.value = "";
    tmp = document.getElementById("code");
    tmp.removeAttribute("hidden");
    tmp.value = "";
    tmp = document.getElementById("password");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("newPassword");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("login");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("send");
    tmp.removeAttribute("hidden");
    tmp = document.getElementById("modify");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("register");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("reset");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("login2");
    tmp.removeAttribute("hidden");
}
function f3() {
    let tmp = document.getElementById("username");
    tmp.removeAttribute("hidden");
    tmp.value = "";
    tmp = document.getElementById("phoneNumber");
    tmp.removeAttribute("hidden");
    tmp.value = "";
    tmp = document.getElementById("code");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("password");
    tmp.removeAttribute("hidden");
    tmp.value = "";
    tmp = document.getElementById("newPassword");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("login");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("send");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("modify");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("register");
    tmp.removeAttribute("hidden");
    tmp = document.getElementById("reset");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("login2");
    tmp.setAttribute("hidden", "true")
}
function f4() {
    let tmp = document.getElementById("username");
    tmp.removeAttribute("hidden");
    tmp.value = "";
    tmp = document.getElementById("phoneNumber");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("code");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("password");
    tmp.removeAttribute("hidden");
    tmp.value = "";
    tmp = document.getElementById("newPassword");
    tmp.removeAttribute("hidden");
    tmp.value = "";
    tmp = document.getElementById("login");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("send");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("modify");
    tmp.removeAttribute("hidden");
    tmp = document.getElementById("register");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("reset");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("login2");
    tmp.setAttribute("hidden", "true")
}
function f5() {
    let tmp = document.getElementById("username");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("phoneNumber");
    tmp.removeAttribute("hidden");
    tmp.value = "";
    tmp = document.getElementById("code");
    tmp.removeAttribute("hidden");
    tmp.value = "";
    tmp = document.getElementById("password");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("newPassword");
    tmp.removeAttribute("hidden");
    tmp.value = "";
    tmp = document.getElementById("login");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("send");
    tmp.removeAttribute("hidden");
    tmp = document.getElementById("modify");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("register");
    tmp.setAttribute("hidden", "true")
    tmp = document.getElementById("reset");
    tmp.removeAttribute("hidden");
    tmp = document.getElementById("login2");
    tmp.setAttribute("hidden", "true")
}
function checkLogin2(){
    checkPhone();
    checkCode();
}
function checkLogin(){
    checkName();
    checkPwd();
}
function checkMod(){
    checkName();
    checkPwd();
checkNewPwd();
}
function checkReg() {
    checkName();
    checkPhone();
    checkPwd();
}
function checkRe(){
    checkPhone();
    checkCode();
    checkNewPwd();
}
function checkSend(){
    checkPhone();
}
function checkPwd() {
    let password = document.getElementById("password");
    let re = /^\w{6,20}$/;
    if (!re.test(password.value)) {
    password.value = "";
    alert("请输入6~20个大小写字母、数字或下划线作为密码！！！");
}
}
function checkNewPwd() {
    let password = document.getElementById("newPassword");
    let re = /^\w{6,20}$/;
    if (!re.test(password.value)) {
    password.value = "";
    alert("请输入6~20个大小写字母、数字或下划线作为新密码！！！");
}
}
function checkName() {
    let name = document.getElementById("username");
    let re = /^[a-zA-Z]{4,12}$/;
    if (!re.test(name.value)) {
        name.value = "";
        alert("请输入4~12个英文大小写字母作为用户名！！！");
    }
}
function checkPhone() {
    let phone = document.getElementById("phoneNumber");
    let re = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    if (!re.test(phone.value)) {
        phone.value = "";
        alert("请输入正确手机号！！！");
    }
}
function checkCode() {
    let code = document.getElementById("code");
    let re = /^[0-9]{4}$/;
    if (!re.test(code.value)) {
        code.value = "";
        alert("请输入4位数字验证码！！！");
    }
}

HTML5+CSS3+JavaScript 渐变轮播图登录页面

前言

预览

项目结构

项目源码

1.图片资源

login.html

login.css

login.js

热门文章

最新文章

相关课程

相关电子书

相关实验场景