登录注册界面

于 2022-10-10 08:52:02 发布
阅读量162 收藏 1
点赞数
文章标签： servlet java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51403503/article/details/127237680
版权

需要唯美柔和的登录注册界面的宝子们可以自行查看，内有账号验证，手机号验证，密码验证，CSS样式较多，也比较好看

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport"  content="width=device-width, initial-scale=1.0"  />
  <title>注册登录mongoDB</title>
  <link  rel="stylesheet"  href="./注册登录CSS.css"/>
</head>
<body>
  <div  class="container"  id="app">
    <div class="box" id="box">
      <div class="transtion-box">
        <div class="login-box">
          <h1>欢迎回来</h1>
          <section style="position: relative;">
            <label for="email">账号</label>
            <input  type="text"  id="loginname" maxlength="20"/>
            <span class="inputbottom"></span>
          </section>
          <section style="position: relative;">
            <label for="password">密码</label>
            <input  type="password"  id="loginpwd" maxlength="16"/> 
            <span class="inputbottom"></span>
            <span>忘记密码?</span>
          </section>
          <button  type="button"  id="login">登录</button>
          <button  type="button"  class="other">使用<span style="font-weight: 900; color: #455a81">二维码</span>扫码登录</button>
        </div>
        <div  class="reg-box"  style="display: none">
          <h1>立即注册</h1>
          <section style="position: relative;">
            <label for="username">用户名</label>
            <input  type="text"  id="regname" maxlength="16"/>
            <img  src="./img/关闭_close.png"  alt=""  class="close">
            <img  src="./img/正确_check.png"  alt=""  class="correct">
            <span class="poptip userpoptip">↑ 支持中文、字母、数字6-16位</span>
            <span class="inputbottom"></span>
          </section>
          <section style="position: relative;">
            <label for="email">手机</label>
            <input  type="text"  id="tel"  maxlength="11"/>
            <img  src="./img/关闭_close.png"  alt=""  class="telclose">
            <img  src="./img/正确_check.png"  alt=""  class="telcorrect">
            <span class="poptip telpoptip">↑ 仅支持11数字！!</span>
            <span class="inputbottom"></span>
          </section>
          <section style="position: relative;">
            <label for="password">密码</label>
            <input  type="password"  id="regpwd" maxlength="16"/>
            <img  src="./img/关闭_close.png"  alt=""  class="pwdclose">
            <img  src="./img/正确_check.png"  alt=""  class="pwdcorrect">
            <span class="poptip pwdpoptip">↑ 仅支持字母、数字、下划线5-16位</span>
            <span class="inputbottom"></span>
          </section>
          <button  type="button"  id="reg">注册</button>
          <button  type="button"  class="other">使用<span style="font-weight: 900; color: #455a81">二维码</span>扫码注册</button>
        </div>
      </div>
      <div class="transferToReg">
        <h1 class="title">还未注册？</h1>
        <span class="subTitle">立即注册，给你发100红包！</span>
        <button  type="button"  id="transfetBtn">注册</button>
      </div>
    </div>
  </div>

</body>
<script>
  let transfer = document.getElementById('transfetBtn');
  transfer.addEventListener('click', function () {
    let login = document.querySelector('.login-box');
    let reg = document.querySelector('.reg-box');
    let total = document.querySelector('.transtion-box');
    let target = document.querySelector('.transferToReg');
    let title = document.querySelector('.title');
    let subTitle = document.querySelector('.subTitle');
    transfer.innerText === '注册' ?
      (() => {
        target.style = `background: linear-gradient(to bottom right,#365269 0%,#3e78a8 50%,#6daecf 100%);left:0px;`
        total.style.left = 260 + 'px';
        transfer.innerText = '登录';
        title.innerText = '已有帐号？';
        subTitle.innerText = '有帐号就登录吧，不用注册了！';
        setTimeout(() => {
          login.style.display = 'none';
          reg.style.display = 'flex';
        }, 300);
      })() :
      (() => {
        target.style = `background: linear-gradient(to bottom right,#6daecf 0%,#3e78a8 50%,#365269 100%);left:640px;`
        total.style.left = 0;
        transfer.innerText = '注册';
        title.innerText = '还未注册？';
        subTitle.innerText = '立即注册，给你发100红包！';
        setTimeout(() => {
          login.style.display = 'flex';
          reg.style.display = 'none';
        }, 300);
      })();
  });



  //注册账号输入框 失焦事件
  let regname = document.querySelector("#regname")
  let regtel = document.querySelector("#tel")
  let regpwd = document.querySelector("#regpwd")
  let oclose = document.querySelector(".close")
  let correct = document.querySelector(".correct")
  let user_poptip = document.querySelector(".userpoptip")
  let tel_poptip = document.querySelector(".telpoptip")
  let pwd_poptip = document.querySelector(".pwdpoptip")
  let fa = 0
  regname.addEventListener("focus",()=>{
    user_poptip.style.display = "block"
  })
  regtel.addEventListener("focus",()=>{
    tel_poptip.style.display = "block"
  })
  regpwd.addEventListener("focus",()=>{
    pwd_poptip.style.display = "block"
  })
  //  注册账号 失焦验证事件
  regname.addEventListener("blur", function () {
    let name = this.value
    user_poptip.style.display = "none"
    doAjax(
          "get", 
          "http://localhost:8888/check",
          { "name": name},
          function (data) {
            // console.log('输出 xhr.responseText check为: ',data)
            if (data == "true") {
                oclose.style.display = "block"
                correct.style.display = "none"
              } else if (data == "false") {
                oclose.style.display = "none"
                correct.style.display = "block"
              }
              if (!(/\S/.test(name))) {
                oclose.style.display = "none"
                correct.style.display = "none"
              }
          }
      )
  })
  
/* 手机号 check 失焦事件 */
  let telclose = document.querySelector(".telclose")
  let telcorrect = document.querySelector(".telcorrect")
  regtel.addEventListener("blur",function(){
    let reg = /\d{11}/
    tel_poptip.style.display = "none"
    console.log(reg.test(regtel.value))
    if(reg.test(regtel.value)){
      telclose.style.display = "none"
      telcorrect.style.display = "block"
    }
    else{
      telclose.style.display = "block"
      telcorrect.style.display = "none"
    }
    if(!(/\S/.test(regtel.value))){
      telclose.style.display = "none"
      telcorrect.style.display = "none"
    }
  })
/* 密码 check 失焦事件 */
  let pwdclose = document.querySelector(".pwdclose")
  let pwdcorrect = document.querySelector(".pwdcorrect")
  regpwd.addEventListener("blur",function(){
    let reg = /^\w{5,16}/
    pwd_poptip.style.display = "none"
    if(reg.test(regpwd.value)){
      pwdclose.style.display = "none"
      pwdcorrect.style.display = "block"
    }
    else{
      pwdclose.style.display = "block"
      pwdcorrect.style.display = "none"
    }
    if(!(/\S/.test(regpwd.value))){
      pwdclose.style.display = "none"
      pwdcorrect.style.display = "none"
    }
  })

//复制粘贴
</html>

CSS样式

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    width: 100%;
    height: 100%;
  }
  .container {
    width: 100%;
    height: 100vh;
    background: url(./img/2.jpg);
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .container .box {
    width: 900px;
    height: 550px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    position: relative;
  }
  .homepage{
    height: 40px;width: 100%;
    padding: 0 20px;
    font-size: 20px;
    line-height: 40px;
    background-color: #365269;
  }
  .homepage span{
    display: block;
    float: right;
    padding: 0 5px;
    cursor: pointer;
  }
  .homepage span:nth-child(2){
    color: #52a5f5;
  }
  .homepage img{display:block;width: 30px;height: 30px;float: left;margin-top: 5px;margin-right: 5px;}
  #home{font-size: 50px;}
  .container .box .transtion-box {
    position: absolute;
    left: 0;
    transition: 0.5s all ease-in-out;
  }
  .container .box .transtion-box .login-box,
  .reg-box {
    width: 640px;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 50px 30px;
  }
  
  .container .box .transtion-box h1 {
    margin-bottom: 35px;
    color: #84bad4;
    text-shadow:-3px -3px 30px #84bad4,3px 3px 10px black;

  }
  .container .box .transtion-box section {
    display: flex;
    flex-flow: inherit;
    align-items: inherit;
    width: 100%;
    margin-bottom: 30px;
  }
  .container .box .transtion-box section label {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .container .box .transtion-box section input {
    width: 50%;
    outline: 0;
    border: none;
    font-size: 18px;
    color: #efb3d0;
    text-align: center;
    padding: 4px 10px;
    border-bottom: 1px solid rgb(255, 255, 255);
    background: transparent;
  }
  input:-webkit-autofill {
    /*自动填入文本颜色*/
    -webkit-text-fill-color: #efb3d0;
    /*自动填入光标颜色*/
    caret-color: #efb3d0;
    /*背景透明；原理：动画由透明变有背景色；参数：背景色属性、动画时间、动画速度曲线、延迟时间*/
    transition: background-color 0s linear 3600s;
  }
  .container .box .transtion-box section span {
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    margin-top: 18px;
  }
  .container .box .transtion-box button {
    width: 50%;
    padding: 6px 0;
    text-align: center;
    border: 3px solid #5ea1ce;
    border-radius: 20px;
    background: #5ea1ce;
    color: #fff;
    opacity: .85;
    font-size: 17px;
    letter-spacing: 6px;
    text-indent: 6px;
    margin-bottom: 15px;
    cursor: pointer;
  }
  .container .box .transtion-box .other {
    border: 3px solid #84bad4;
    background: #84bad4;
    color: rgb(124, 145, 184);
    font-weight: 600;
  }
  .container .box .transferToReg {
    width: 260px;
    height: 100%;
    background: linear-gradient(
      to bottom right,
      #6daecf 0%,
      #3e78a8 50%,
      #365269 100%
    );
    opacity: .8;
    border-radius: 4px;
    position: absolute;
    left: 640px;
    top: 0;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 50px 0;
    color: white;
    transition: all 1s ease-in-out;
  }
  .container .box .transferToReg .title {
    margin-bottom: 10px;
    transition: all 0.3s ease-in-out;
  }
  .close{
    position: absolute;
    right: 140px;
    top: 30px;
    width: 25px;
    display: none; 
  }
  .correct{
    position: absolute;
    right: 140px;
    top: 30px;
    width: 25px;
    display: none;
  }
  .telclose{
    position: absolute;
    right: 140px;
    top: 30px;
    width: 25px;
    display: none; 
  }
  .telcorrect{
    position: absolute;
    right: 140px;
    top: 30px;
    width: 25px;
    display: none;
  }
  .poptip {
    display: none;
    text-align: center;
    width: 256px;
    font-size: 13px;
    padding: 2px;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 43px;
    margin-left: -3px;
    margin-top: 3px;
    border-radius: 5px;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .23456));
    transform-origin: 15px -6px;
    border: 1px solid #4182b9;
  }
  .pwdclose{
    position: absolute;
    right: 140px;
    top: 30px;
    width: 25px;
    display: none; 
  }
  .pwdcorrect{
    position: absolute;
    right: 140px;
    top: 30px;
    width: 25px;
    display: none;
  }
  button{
    outline: none;
  }
  input:focus ~ .inputbottom {
    transform: scaleX(1);
  }
  .inputbottom{
    position: absolute;
    top: 39px;
    width: 290px;
    height: 2px;
    background: linear-gradient(90deg, rgb(27, 17, 233) 0%, rgb(233, 23, 23) 50%, rgb(47, 37, 243) 100%);
    transform-origin:center;
    transform: scaleX(0);
    transition: transform .6s ease;
  }
  .container .box .transferToReg button {
    margin-top: 260px;
    width: 50%;
    padding: 8px 0;
    border-radius: 14px;
    letter-spacing: 10px;
    text-indent: 10px;
    font-size: 18px;
    color: #fff;
    border: 3px solid #fff;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
    outline: none;
  }
  .container .box .transferToReg button:hover {
    border: 3px solid #3e81bb;
  }

itianci.cn
关注
swing登录注册界面设计
08-27
swing登录注册界面设计 swing登录注册界面设计是Java Swing应用程序开发中的一种常见设计模式，主要用于构建登录注册界面。该设计模式具有较高的参考价值，适合感兴趣的小伙伴们学习和参考。 swing登录注册界面...
HTML好看的登录注册界面
m0_74853171的博客
05-09 1606
input class="input100" type="password" name="pass" placeholder="请输入用户名"><input class="input100" type="password" name="pass" placeholder="密码"><input class="input100" type="text" name="email" placeholder="邮箱"><a href="javascript:" class="txt1">忘记密码？
用户登陆界面和注册界面
m0_56428218的博客
09-20 5723
用户登录功能的简单实现 工具：IntelliJ IDEA Community Edition 2021.3.3、MySQL、MySQL连接驱动：mysql-connector-java-5.1.32.jar、mybatis-3.5.5、javax.servlet-3.1.0、
实现一个账号注册静态界面
qq_53690911的博客
03-26 826
实现一个账号注册界面（静态页面） 最近有个工作室招新，当下学的html，如图所示： 应用HTML，比较简单把，是一边搜一边完成的，可能代码有点乱还麻烦，不过可以参考下。。。此处是我做的界面： 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>静态网页</title> <style type="text/css"
【Web】HTML 账号注册页面
common reader
01-16 4万+
使用CSS的选择器功能美化账号注册界面。
登录+注册界面的实现（代码）
你房哥的博客
07-18 3万+
先看效果图！ 话不多说，直接上代码！//布局文件：activity_login.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.c
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
06-13
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】 简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。 ...
html+css+js酷炫全屏的后台登录注册界面模板
最新发布
04-10
html+css+jshtml+css+js酷炫全屏的后台登录注册界面模板，带背景图片自动切换登录注册模板代码，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，...
微信小程序登录注册界面代码，包含当前界面的所有源码，使用手机验证码注册或账号登录
04-21
本文将通过分析提供的标题、描述和部分源代码，深入讲解如何构建这样一个高效且简洁的登录注册界面。 首先，从WXML（微信小程序的标记语言）代码中可以看到，界面主要由几个关键组件构成： 1. **顶部欢迎信息**：`...
简单登录注册界面html模板
04-25
【标题】"简单登录注册界面html模板"是一个用于创建用户登录和注册页面的HTML模板，设计简洁而实用。这个模板利用了HTML的基础结构，结合JavaScript的功能性和CSS的样式设计，为开发者提供了一个快速构建基本用户...
HTML用户注册界面的实现
有需要下载东西的可以私聊我
03-30 2万+
该代码实现用户注册信息 1.验证用户名是否合法 2.验证密码是否符合规则 3.验证两次输入密码是否一致 4.如果以上都通过，提交该表单 实现后界面图 代码下载 代码： 网上购物系统 var reg=/^[a-zA-Z]\w*$/; var flag1=false,flag2=false,flag3=false; function chang1(obj){ v
HTML+css+js实现一个完整的登录+注册+首页静态web页面
热门推荐
Demonslzh的博客
06-18 12万+
一、登录界面 二、注册界面 三、首页
简单的注册页面
weixin_45165848的博客
08-04 1511
一个简单的注册页面，还未连接数据库，当打开程序时，将会随机产生一组10位数的账号（不能改动）， 如果点击注册，尚框内尚还有未填，或者数据错误提示错误，如果未发生错误将会跳转到新页面。 实现代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></...
HTML制作用户注册账户的页面与用户的登录页面
girls的博客
10-11 1万+
用户注册账户的页面：用户的登录页面： 用户注册账户的页面： 对于上面的网页布局应该如何进行制作？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit.
简易登录注册界面及正则判断（jQuery）
从零出发
05-27 2万+
登录注册是我们日常项目常见的代码片段，以下粗略的代码供小白参考。一、代码目录index.html---登录注册页面index.js---登录与注册界面切换login.js---登录界面逻辑register.js---注册界面逻辑二、代码分析1、index.html   登录注册界面&lt;!Doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt;...
登录注册界面模板
菜鸟-传奇
04-14 6万+
登录注册界面 案例一 具体实现 先看一下最终效果，登陆和注册 背景图片： 附源码： login.html <!DOCTYPE html> <!-- saved from url=(0047)file:///D:/web%E8%84%9A%E6%9C%AC/WEB/login.html --> <html lang="en"><head&...
【Qt Quick聊天软件练习】三、注册账号界面搭建
weixin_44697562的博客
03-16 860
目录1 注册账号按钮2 注册界面2.1 主界面2.2 创建注册账号面板qml文件3 main.qml4 效果展示✨结语✨ 1 注册账号按钮 点击注册账号按钮后，让界面以Y轴旋转 在LoginPanel.qml文件中添加如下代码 transform: Rotation{ //围绕哪个点开始旋转 origin.x: root.width/2 origin.y: root.height/2 //绕着Y轴旋转 axis{
用户注册界面
qq_44606245的博客
10-19 4971
用户注册界面 源代码： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户注册界面</title> </head> <body> &l
微信小程序前端登录注册页面实现
"微信小程序的登录注册页面设计代码示例，包括login.wxml和Login.wxss两个文件，展示了前端输入手机号、密码的界面，并提供了登录和注册功能的交互逻辑。" 在微信小程序中，创建一个登录注册页面是用户体验的关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值