前言

??一個使用 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位數字驗證碼！！！");
    }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/385626.html

標籤：其他

上一篇：Qt撰寫自定義控制元件：左上角圓形選單控制元件

下一篇：16、JS執行機制

HTML5+CSS3+JavaScript 漸變輪播圖登錄頁面