HTML+CSS+JavaScript實作登陸注冊進入動态相冊

本文基于前面部落格對HTML,CSS,JavaScript的簡單介紹，對一些簡單的及基礎知進行梳理。如要深入掌握可自行查閱W3scool線上文檔，菜鳥教程等網站。

代碼及邏輯結構本文不做介紹，代碼僅作參考。

登入.html

<!DOCTYPE html>
<html >

<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" target="_blank" rel="external nofollow" >
</head>

<body>
    <div id="background">
        <div id="circle">
            <div id="information">
                <div id="detail">
                    <h1 id="firsttitle">立即登入</h1>
                    <h4 class="secondtitle">郵箱</h4>
                    <input id="email" type="text" class="input">
                    <h4 class="secondtitle">密碼</h4>
                    <input id="pwd" type="password" class="input" placeholder="密碼長度至少為6位">
                    <br>
                    <a href="" target="_blank" rel="external nofollow" >忘記密碼？</a>
                    <br>
                    <button id="login" class="btu" onclick="login()">登入</button>
                    <button id="register" class="btu" onclick="goregister()">注冊</button>
                </div>
            </div>
        </div>
    </div>

</body>

<script src="登入.js"></script>

</html>

登入.css

body {
    margin: 0px;
    padding: 0px;
}

#background {
    width: 100%;
    height: 970px;
    float: left;
    background-color: aqua;
    background-image: url("image1.jpg");
}

#circle {
    width: 800px;
    height: 800px;
    float: left;
    border-radius: 50%;
    background-color: honeydew;
    align-items: center;
    justify-content: center;
    opacity: 85%;
    margin-left: 550px;
    margin-top: 85px;
    animation: mykeyframe;
    animation-duration: 1.8s;
    animation-delay: 0.5s;
}

#information {
    width: 500px;
    height: 500px;
    float: left;
    opacity: 85%;
    margin-left: 150px;
    margin-top: 150px;
    text-align: center;
    color: rgb(107, 109, 107);
}

#detail {
    width: 300px;
    height: 300px;
    background-color: honeydew;
    margin-left: 100px;
    margin-top: 100px;
    float: left;
    text-align: center;
}

#firsttitle {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    color: #000;
}

.input {
    border: 1px;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: solid rgb(56, 55, 55);
    text-align: center;
}

.btu {
    margin-top: 10px;
    margin-left: 10px;
    background-color: rgb(252, 74, 4);
    width: 60px;
    border-radius: 10px;
}

@keyframes mykeyframe {
    0% {
        transform: rotateY(0deg);
    }
    10% {
        transform: rotateY(36deg);
    }
    20% {
        transform: rotateY(72deg);
    }
    30% {
        transform: rotateY(108deg);
    }
    40% {
        transform: rotateY(144deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    60% {
        transform: rotateY(216deg);
    }
    70% {
        transform: rotateY(252deg);
    }
    80% {
        transform: rotateY(288deg);
    }
    90% {
        transform: rotateY(324deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

登入.js

email.onchange = function() {
    var emailNeme = this.value;
    var regExp = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    console.log(regExp.test(emailNeme))

    if (!(regExp.test(emailNeme))) {
        alert("郵箱格式不正确！");
    }
}

pwd.onchange = function() {
    var pwd = this.value;
    var regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
    console.log(regExp.test(pwd))

    if (!(regExp.test(pwd))) {
        alert("密碼格式不正确！");
    }
}

function login() {
    var upwd = localStorage.getItem("password");
    var uemailneme = localStorage.getItem("Email");
    var semail = document.getElementById("email").value;
    var spwd = document.getElementById("pwd").value;

    if ((semail == uemailneme) && (spwd == upwd)) {
        window.location.href = "相冊.html";
    } else {
        alert("郵箱或密碼錯誤！");
    }

}

function goregister() {
    window.location.href = "注冊.html";
}

注冊.html

<!DOCTYPE html>
<html >

<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" target="_blank" rel="external nofollow" >
</head>

<body>

    <div id="background">
        <div id="square">
            <div id="bgleft">
                <h1 id="firsttitle1">立即注冊</h1>
                <h4 class="secondtitle1">郵箱</h4>
                <input id="email" type="text" class="input">
                <h4 class="secondtitle1">使用者名</h4>
                <input id="un" type="text" class="input" placeholder="使用者名長度不能超過5位">
                <h4 class="secondtitle1">性别</h4>
                男<input type="radio" id="radio1" name="sex" class="inputradio" checked="checked" value="男">女<input type="radio" id="radio2" name="sex" class="inputradio" value="女">
                <h4 class="secondtitle1">頭像</h4>
                <input id="file" type="file" class="input">
                <h4 class="secondtitle1">密碼</h4>
                <input id="pwd" type="password" class="input" placeholder="密碼長度至少位6位，且為數字和字母的組合">
                <h4 class="secondtitle1">确認密碼</h4>
                <input id="spwd" type="password" class="input" placeholder="兩次密碼必須一緻">
                <br>
                <button id="registerbtu" onclick="save()">注冊</button>
                <br>
            </div>
            <div id="bgright">
                <div id="detail">
                    <h1 id="firsttitle2">已有賬号？</h1>
                    <h4 class="secondtitle2">有賬号就登陸吧，好久不見了！</h4>
                    <input type="button" id="register_login" value="登入" onclick="gologin()">
                </div>
            </div>
        </div>
    </div>
    </div>

</body>

<script src="注冊.js"></script>

</html>

注冊.css

body {
    margin: 0px;
    padding: 0px;
}

#background {
    width: 100%;
    height: 970px;
    float: left;
    background-color: aqua;
    background-image: url("image1.jpg");
}

#square {
    width: 1200px;
    height: 800px;
    float: left;
    background-color: honeydew;
    align-items: center;
    justify-content: center;
    opacity: 85%;
    margin-left: 350px;
    margin-top: 85px;
}

#bgleft {
    width: 800px;
    height: 800px;
    background-color: honeydew;
    float: left;
    text-align: center;
}

#bgright {
    width: 400px;
    height: 800px;
    background-color: rgb(30, 210, 99);
    float: left;
    background-image: url("image2.jpg");
}

#registerbtu {
    width: 300px;
    background-color: chocolate;
    color: rgb(252, 249, 249);
    margin-top: 20px;
    border-radius: 10px;
}

#detail {
    width: 300px;
    height: 600px;
    text-align: center;
    margin-left: 50px;
    margin-top: 100px;
}

#firsttitle1 {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    color: #000;
}

#firsttitle2 {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    color: snow;
}

#register_login {
    width: 100px;
    height: 30px;
    border-radius: 10px;
    background-color: aliceblue;
    color: #000;
    border: 2px;
    font-weight: bold;
    margin-top: 400px;
    opacity: 50%;
}

.secondtitle1 {
    color: rgb(141, 137, 137);
}

.secondtitle2 {
    color: snow;
}

.input {
    width: 300px;
    border: 1px;
    border-left: none;
    border-right: none;
    border-top: none;
    text-align: center;
    background-color: honeydew;
    color: rgb(134, 128, 128);
    border-bottom: solid rgb(56, 55, 55);
    opacity: 50%;
}

.inputradio {
    border: 1px;
    margin-right: 10px;
    margin-top: 5px;
}

注冊.js

email.onchange = function() {
    var emailNeme = this.value;
    var regExp = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    console.log(regExp.test(emailNeme))

    if (!(regExp.test(emailNeme))) {
        alert("郵箱格式不正确！");
    }
}

un.onchange = function() {
    var un = this.value;
    var regExp = /^\S{1,5}$/;
    console.log(regExp.test(un))

    if (!(regExp.test(un))) {
        alert("使用者名格式不正确！");
    }
}

pwd.onchange = function() {
    var pwd = this.value;
    var regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
    console.log(regExp.test(pwd))

    if (!(regExp.test(pwd))) {
        alert("密碼格式不正确！");
    }
}

spwd.onchange = function() {
    var spwd = this.value;

    var pwd = document.getElementById("pwd");
    var passwd = pwd.value;

    var regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
    console.log(regExp.test(spwd))

    if (!(regExp.test(spwd))) {
        alert("密碼格式不正确！");
    } else if (spwd != passwd) {
        alert("兩次密碼不一緻！");
    }
}

function save() {
    var Email = document.getElementById("email").value;
    var username = document.getElementById("un").value;
    var sex = document.getElementsByName('sex').value;
    var password = document.getElementById("pwd").value;

    localStorage.setItem("Email", Email);
    localStorage.setItem("username", username);
    localStorage.setItem("sex", sex);
    localStorage.setItem("password", password);

    var testemail = localStorage.getItem(Email);
    console.log(testemail);

    alert("注冊成功，請登入！");

    window.location.href = "登入.html";
}

function gologin() {
    window.location.href = "登入.html";

}

相冊.html

<!DOCTYPE html>
<html >

<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" target="_blank" rel="external nofollow" >
</head>

<body>
    <div id="title">
        <div id="title1">歡迎登入！</div>
        <div id="title2" onclick="out()">退出</div>
        <div id="title3" onclick="personalinfor()">個人資訊</div>
    </div>
    <div id="bgmain">
        <div id="photo_box">
            <img src="image3.jpg">
            <img src="image4.jpg">
            <img src="image5.jpg">
            <img src="image6.jpg">
            <img src="image7.jpg">
            <img src="image8.jpg">
            <img src="image9.jpg">
            <img src="image10.jpg">
            <img src="image11.jpg">
            <img src="image12.jpg">
            <img src="image13.jpg">
        </div>
    </div>
</body>
<script src="相冊.js"></script>

</html>

相冊.css

body {
    margin: 0px;
}

#title {
    width: 100%;
    height: 50px;
    background: #000;
}

#title1 {
    float: left;
    color: #fff;
    width: 150px;
    padding: 12px 0;
    height: 50px;
}

#title2 {
    float: right;
    width: 100px;
    color: #fff;
    padding: 12px 0;
    height: 50px;
}

#title3 {
    float: right;
    width: 100px;
    color: #fff;
    padding: 12px 0;
    height: 50px;
}

#bgmain {
    background-image: url("image1.jpg");
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1000px;
    z-index: -10;
    zoom: 1;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
}

#photo_box {
    width: 280px;
    height: 400px;
    position: fixed;
    left: 0;
    right: 0;
    top: 100px;
    bottom: 0;
    margin: 200px auto;
    transform-style: preserve-3d;
    /*表示所有子元素在3D空間中呈現*/
    transform: rotateX(-5deg) rotateY(0deg);
    animation: run 30s linear infinite;
    /*循環執行run動畫，每30秒執行一次*/
}


/*設定圖像大小、邊框、圓角、位置*/

#photo_box img {
    width: 250px;
    height: 350px;
    border: 5px solid rgb(14, 5, 5);
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 0;
}


/*依次設定圖像盒子中每個圖像旋轉後位置*/

#photo_box img:nth-child(1) {
    transform: rotateY(0deg) translateZ(500px);
}

#photo_box img:nth-child(2) {
    transform: rotateY(36deg) translateZ(500px);
}

#photo_box img:nth-child(3) {
    transform: rotateY(72deg) translateZ(500px);
}

#photo_box img:nth-child(4) {
    transform: rotateY(108deg) translateZ(500px);
}

#photo_box img:nth-child(5) {
    transform: rotateY(144deg) translateZ(500px);
}

#photo_box img:nth-child(6) {
    transform: rotateY(180deg) translateZ(500px);
}

#photo_box img:nth-child(7) {
    transform: rotateY(216deg) translateZ(500px);
}

#photo_box img:nth-child(8) {
    transform: rotateY(252deg) translateZ(500px);
}

#photo_box img:nth-child(9) {
    transform: rotateY(288deg) translateZ(500px);
}

#photo_box img:nth-child(10) {
    transform: rotateY(324deg) translateZ(500px);
}

#photo_box img:nth-child(11) {
    transform: rotateY(360deg) translateZ(500px);
}


/*采用@keyframes 規則建立run動畫。*/

@keyframes run {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: rotateX(10deg) rotateY(90deg);
    }
    50% {
        transform: rotateX(0deg) rotateY(180deg);
    }
    75% {
        transform: rotateX(-10deg) rotateY(270deg);
    }
    100% {
        transform: rotateX(0deg) rotateY(360deg);
    }
}

相冊.js

var name = localStorage.getItem("username");
var welcometitle = document.getElementById("title1");
welcometitle.innerHTML = "歡迎" + name + "登入！";

function out() {
    localStorage.clear();
    window.location.href = "登入.html";
}

function personalinfor() {
    var uname = localStorage.getItem("username");
    var uemailneme = localStorage.getItem("Email");

    alert("使用者名:" + uname + "郵箱：" + uemailneme);
}

20210618

完整資源及源碼（輕按兩下即可打開）：https://download.csdn.net/download/zy12344321/19710912?spm=1001.2014.3001.5503

HTML+CSS+JavaScript實作登陸注冊進入動态相冊

繼續閱讀

請求逾時VUE axios重新再次請求

IE8 CSS設定DIV居中，添加“margin:0 auto”

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

403 Forbidden，You don't have permission to access / on this server.Forbidden

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條