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

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

前言


  一个使用 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位数字验证码!!!");
    }
}



相关文章
|
17天前
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
149 77
|
22天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
103 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
20天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
47 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
18天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
61 34
|
21天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
31 2
|
3月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
205 1
|
3月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
71 3
|
3月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
174 6
|
5月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
6月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
195 0