HTML+CSS+JavaScript实现登陆注册进入动态相册

本文基于前面博客对HTML,CSS,JavaScript的简单介绍，对一些简单的及基础知进行梳理。如要深入掌握可自行查阅W3scool在线文档，菜鸟教程等网站。

代码及逻辑结构本文不做介绍，代码仅作参考。

<!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">
</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="">忘记密码？</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>

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);}
}

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";
}

<!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">
</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>

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;
}

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 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">
</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="data:image3.jpg"><img src="data:image4.jpg"><img src="data:image5.jpg"><img src="data:image6.jpg"><img src="data:image7.jpg"><img src="data:image8.jpg"><img src="data:image9.jpg"><img src="data:image10.jpg"><img src="data:image11.jpg"><img src="data:image12.jpg"><img src="data: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实现登陆注册进入动态相册相关推荐

HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤
❉ HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤ 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享 ...
HTML5期末大作业：HTML+CSS+JavaScript+BootStrap 简约的旅游图文相册博客HTML模板
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
Web前端大作业—电影网页介绍8页(html+css+javascript) 带登录注册表单
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)
❉ 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在 ...
❤520情人节陪她一起看流星雨~html+css+javascript制作流星雨3D相册(含音乐)
❉ 520情人节陪她一起看流星雨~html+css+javascript流星雨3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹 ...
制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)...
❉ 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在 ...
超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节
❉ 超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或 ...
七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追 ...

HTML+CSS+JavaScript实现登陆注册进入动态相册

HTML+CSS+JavaScript实现登陆注册进入动态相册相关推荐

最新文章

热门文章