天天看点
返回

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

javascript 前端，CSS，HTML html html5 css3 css
上一篇: HTML+CSS+JavaScript实现时间显示
下一篇: HTML+CSS+JavaScript实现匀速动画、缓动动画

继续阅读