ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

简单登录注册界面的制作 js、css、html实现

2021-06-09 19:30:42  阅读：86  来源： 互联网

标签：color margin top js html background var border 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>Document</title>
    <link rel="stylesheet" href="./css/register.css">
    <script src="./js/register.js"></script>
</head>
<body class="body">
    
    <div class="d1">
        <div class="d2">
            <h1 class="h1">立即注册</h1>
            <table class="t1">
                <tr class="tr1" >
                    <td class="td1">邮箱</td>
                </tr>
              <tr class="tr1">
                  <td class="td2"><input class="inp" name="text" type="text" name="email" id="email"></td> 
            </tr>
              <tr class="tr1">
                  <td class="td1">用户名</td>
              </tr>
              <tr class="tr1">
                  <td class="td2"><input class="inp" type="text" name ="username" id="username"placeholder="用户名长度不要超过5位"></td>
              </tr>
              <tr class="tr1">
                <td class="td1">性别</td>
            </tr>
            <tr class="tr1">
                <td class="td2"><input class="inp" type="radio" name="sex" id="sex" value="man">男 <input id="sex" type="radio" name="sex" value="women">女</td>
            </tr>
            <tr class="tr1">
                <td class="td1">头像</td>
            </tr>
            <tr class="tr1">
                <td class="td2"><input class="inp" type="file" name="file" id="file" value="touxiang"></td>
            </tr>
            <tr class="tr1">
                <td class="td1">密码</td>
            </tr>
            <tr class="tr1">
                <td class="td2"><input class="inp" type="password" id="password" name="password" placeholder="密码长度至少为6位且为字母与数字的组合"></td>
            </tr>
            <tr class="tr1">
                <td class="td1">再次输入</td>
            </tr>
            <tr class="tr1">
                <td class="td2"><input class="inp" type="password" name="password2" id="password2" placeholder="再次输入密码需一致"></td>
            </tr>
            <tr class="tr1">
               <td class="td2"><button type="submit" name="sub" class="sub" onclick="check()">注册</button></td>
            </tr>
        </table>
        </div>
        <div class="d3">
            <div class="d4">已有账号？</div>
            <div class="d5">有账号就登陆吧，好久不见了</div>
            <form>
            <div class="d6"><button type="submit" name="sub" class="sub2" onclick="window.open('login.html')">登录</button></div>
           </form>
        </div>
    </div>
<script>
    function check(){
    var email = document.getElementById("email").value;
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var password2 = document.getElementById("password2").value;
    var sex;
    var sexObj =document.getElementsByName("sex")
    for(var i=0;i<sexObj.length;i++){
        if(sexObj[i].checked){
            sex = sexObj[i].value;
        }
    }

    // 邮箱验证
    if(email!=""){
        if(!(/^(\w|\d)+@\w+\.com$/.test(email))){
            alert("邮箱格式错误")
            return;
        }
        else {
            console.log("email true");
            // 邮箱验证通过，进入用户名验证
            if(username !=""){
                if(username.length>5){
                    alert("用户名格式错误")
                    return;
                }
                else {
                    console.log("username true");
                    // 用户名验证通过，进行密码验证
                    if(password !=""){
                        if(!(/^(?![^a-zA-Z]+$)(?!\D+$)/.test(password))){
                            alert("密码格式错误")
                            return;
                        }
                        else {
                            console.log("password true");   
                            if(password == password2){
                                localStorage.setItem("username",username);
                                localStorage.setItem("email", email);
                                localStorage.setItem("password",password);
                                 localStorage.setItem("sex", sex);
                               
                                window.open("login.html")
                            }
                            else{
                                alert("密码验证错误，请核对密码")
                                return;
                            }
                        }
                    }
                    else{
                        alert("密码为空！")
                        return;
                    }
                }
            }
            else{
                alert("会员登录名为空！")
                return;
            }
        }
    }
    else{
        alert("邮箱为空！")
        return;
    }
}
</script>
</body>
</html>
.body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url(../image/index.jpg);
    background-repeat: repeat;
}
.d1{
    /* background-color:wheat; */
    width: 900px;
    height: 650px;
    margin: auto;
    margin-top: 120px;
    
}
.d2{
    /* display: inline; */
    float: left;
    width: 600px;
    height: 650px;
    background-color:rgba(248, 248, 244, 0.6);
}
.d3{
    /* display: inline; */
    float: left;
    width: 300px;
    height: 650px;
    background-color: rgba(92, 92, 91, 0.6);
  float: right;
}
.h1{
text-align: center;
color: rgb(48, 48, 48);
}
.t1{
    margin: auto;
    width: 400px;
    height: 450px;
    
    margin-top: 60px;
}
.tr1{
    margin: auto;
   
    
}
.td1{
    font-size: 18px;
    text-align: center;
    color: rgb(19, 18, 18);
   
}
.td2{
    margin: auto;
    text-align: center;
    
}
.inp{
    font-size: 15px;
    margin:0 auto;
    border-bottom: solid;
    border-top: none;
    border-left: none;
    border-right: none;
    border-color: rgba(226, 222, 222, 0.568);
    background-color: rgba(255, 255, 255, 0);
    text-align: center;
    color: rgb(43, 43, 44);
}
.sub{
font-size: 20px;
background-color: rgb(238, 127, 30);
border: none;
width: 150px;
border-radius: 15px;
color: white;
}
.sub:hover{
    background-color: tomato;
}
.d4{
    font-size: 35px;
    color: white;
    text-align: center;
    padding-top: 100px;
}
.d5{
    font-size: 15px;
    color: white;
    text-align: center;
    margin-top: 40px;
}
.d6{
    margin-top: 330px;
   
    text-align: center;
}
.sub2{
    font-size: 20px;
background-color: white;
border: none;
width: 150px;
border-radius: 15px;
border: white;
}
.sub2:hover{
    background-color: tomato;
}

<!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>登录</title>
    <link rel="stylesheet" href="./css/login.css">
</head>
<body class="body">
    <div class="d1">
        <h1 class="h1">立即登录</h1>
        <table class="t1">
            <tr class="tr1" >
                <td class="td1">邮箱</td>
            </tr>
            <tr class="tr1">
                <td class="td2"><input class="inp" name="email" id="email" type="email"></td> 
          </tr>
          <tr class="tr1">
            <td class="td1">密码</td>
        </tr>
        <tr class="tr1">
            <td class="td2"><input class="inp" type="password" name="password" id="password"placeholder="密码长度至少为6位且为字母与数字的组合"></td>
        </tr>
        <tr class="tr1">
            <td class="td1"><a class="a1" style="font-size: 15px;" href="./register.html">忘记密码？</a></td>
        </tr>
        <tr class="tr1">
            <td class="td2"><button type="submit" name="sub" class="sub" onclick="login()">登录</button>  <button type="submit" name="sub" class="sub" onclick="window.open('register.html')">注册</button></td>
         </tr>
        </table>
    </div>
<script>
 function login(){
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;
 login_email = email.value,
    login_password = password.value;
    // var vCode = document.getElementById("a06048").value;
    // 邮箱验证
    if(email!="")
    {
        if(!(/^(\w|\d)+@\w+\.com$/.test(email))){
            alert("邮箱格式错误")
            return;
        }
        else {
            console.log("email true");
            if(password !=""){
                        if(!(/^(?![^a-zA-Z]+$)(?!\D+$)/.test(password))){
                            alert("密码格式错误")
                            return;
                        }
                        else{
                            var localemail = localStorage.getItem("email");
                            var localpassword = localStorage.getItem("password");
                          if(email == localemail && password == localpassword){
                             window.open("photo.html")
                           }
                           else{
                               alert("你没有注册呢，先去注册吧！")
                               window.open("register.html")
                           }
                  }
            }
            else{
                alert("密码为空")
                return;
             }

    } 
     } 
    
        
    else{
        alert("邮箱为空")
        return;
    }
}

    
 
</script>
</body>
</html>

.body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url(../image/index.jpg);
    background-repeat: repeat;
}
.d1{
    border: 1px solid white;
    width: 550px;
    height: 550px;
    border-radius: 275px;
    background-color:rgba(248, 248, 244, 0.5);
    margin: auto;
    margin-top: 200px;
}
.h1{
    text-align: center;
    color: rgb(48, 48, 48);
    margin-top: 120px;
 
    margin-bottom: 20px;
    }
.t1{
        margin: auto;
        margin-top: 50px;
        width: 400px;
        height: 200px;
     
        margin-top: 60px;
    }
    .tr1{
        margin: auto;
       
        
    }
    .td1{
        font-size: 18px;
        text-align: center;
        color: rgb(78, 77, 77);
       
    }
    .td2{
        margin: auto;
        text-align: center;
        
    }
    .inp{
        font-size: 15px;
        margin:0 auto;
        border-bottom: solid;
        border-top: none;
        border-left: none;
        border-right: none;
        border-color: rgba(226, 222, 222, 0.568);
        background-color: rgba(255, 255, 255, 0);
        text-align: center;
        color: rgb(43, 43, 44);
    }
    .sub{
    font-size: 20px;
    background-color: rgb(238, 127, 30);
    border: none;
    width: 120px;
    border-radius: 15px;
    color: white;
    }
    .sub:hover{
        background-color: tomato;
    }
    .a1{
        color: rgb(43, 43, 44);
    }

<!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>个人相册</title>
    <link rel="stylesheet" href="./css/photo.css">

</head>
<body >
<div class="d2">
    <div class="d3">游客,欢迎</div>
    <div class="d4"> <a class="a2"href="./login.html">退出</a></div>
</div>
<div id="perspective"></div>
<div id="wrap">
<!--img[src="images/$.jpg"]*11-->
<img src="./image/a.jpeg"><p></p>
           <img src="./image/b.jpeg"><p></p>
           <img src="./image/c.jpeg"><p></p>
           <img src="./image/d.jpeg"><p></p>
           <img src="./image/a.jpeg"><p></p>
           <img src="./image/b.jpeg"><p></p>
           <img src="./image/c.jpeg"><p></p>
           <img src="./image/d.jpeg"><p></p>
           <img src="./image/a.jpeg"><p></p>
           
</div>
<div class="d1">
    <tr>
        <td align="center" valign="middle" style="font-size: 24px; font-family: '宋体';"><a class="a1" href="shouye.html" style="top: 0px; padding: 0px; font-size: 36px;">点我去主页看看吧！</a></td>
      </tr>
</div>
<script type="text/javascript">
var username = localStorage.getItem("username");
        var oImg=document.getElementsByTagName("img");//获取元素集合
        var deg =360/oImg.length;//每两张图片间的角度
        //遍历
// function we(){
//         var username = localStorage.getItem
//         alert(username+"，欢迎回来")
//         var title_name = document.getElementById("titleName");
//         title_name.innerHTML = username;
//     }
     
        window.onload=function () {
            //页面加载完执行的函数
            for(var i=0;i<oImg.length;i++){
                oImg[i].style.transform="rotateY("+i*deg+"deg) translateZ(350px)";
        oImg[i].style.transition="1s "+(oImg.length-i)*0.1+"s";
    }
}
/*鼠标移动  使相册旋转*/
document.onmousedown = function (ev) {
    var oldX = ev.clientX;
    var  oldY = ev.clientY;//鼠标第一次点击的坐标值
    var rotateX = -15,
        rotateY=0;
    this.onmousemove = function (ev) {
        console.log(ev.clientX,ev.clientY);
        var newX = ev.clientX;//每次移动时产生的鼠标位置值
        var newY = ev.clientY;
        var minusX = newX - oldX;
        var minusY = newY - oldY;
        rotateX -= minusY * 0.2;
        rotateY += minusX * 0.2;//累加改变度数差值
        wrap.style.transform="rotateX("+rotateX+"deg)rotateY("+rotateY+"deg)";
        oldX = newX;//新坐标值变旧坐标值
        oldY = newY;
        this.onmouseup=function () {
            this.onmousemove = null;//清空移动鼠标事件
            console.log("ccccc");
        }
    }
}

</script>

<script>
   
</script>
</body>
</html>
*{
    margin: 0px;
    padding: 0px;
}
body{
    background: #ddf12260;
    overflow: hidden;
}
#wrap{
    width: 200px;
    height: 200px;
    margin: 200px auto;
    position: relative;
    transform-style:preserve-3d;/*设置3d元素风格*/
    transform: rotateX(-12deg);
}
#wrap img{
      position: absolute;
      border: 2px solid rgba(148, 147, 143, 0.842);
      -webkit-box-reflect:below 5px -webkit-linear-gradient(top, rgba(0,0,0,0)30%, rgba(0,0,0,.5)100%);
  }
#wrap p{
    width: 1200px;
    height: 1200px;
    border-radius: 100%;
    background: -webkit-radial-gradient(center,600px 600px,rgba(244, 167, 23, 0.301),rgba(0,0,0,0));
    position: absolute;
    top: 112%;
    left: 50%;
    margin-left: -600px;
    margin-top: -600px;
    transform: rotateX(90deg);
}
#perspective{
    perspective: 800px;/*场景景深800,仅对3D有效*/
}
.d1{
    margin: auto;
    text-align: center;
    padding-top: 100px;
}
.a1{
    color:rgb(228, 145, 22);
   
}
.a1:hover{
    color: tomato;
}
.d2{
    height: 30px;
    color:white;
    background-color: rgb(243, 167, 26);
    font-size: 18px;
 
}
.d3{
    display: inline-block;
}
.d4{
    display: inline-block;
  float: right;
}
.a2{
    color:white;
    float: right;
    padding-top: 2px;
}

 

标签：color,margin,top,js,html,background,var,border,css
来源： https://blog.csdn.net/qq_45231291/article/details/117752383

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有