前言

一个使用 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

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

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

前言

预览

项目结构

项目源码

1.图片资源

login.html

login.css

login.js

热门文章

最新文章

相关课程

相关电子书