CSS3+HTML5+JavaScript:个人相册网站实现
2024-04-04 07:57:02
一.网站要求
- 登录，注册页面的邮箱，密码，项目使用正则表达式，格式错误时提醒。
- 登录界面进入时旋转效果。
- 注册信息要和登录信息一致，否则不予登录。
- 数据传输可以不链接数据库。
- 个人相册实现3D旋转效果，鼠标移动到照片时，动画暂停，鼠标移开时，动画继续。
二.效果展示
登录页面：
注册页面：
个人相册页面（3D旋转效果）：
三.设计思路
- 数据传输通过localStorage或sessionStorage本地缓存实现
注意：在IE8以上的IE版本才支持localStorage这个属性。localStorage属于永久性存储，如果存储内容多的话会消耗内存空间，会导致页面变卡。
- 退出时清空缓存
四.所有代码如下
登录页面代码
<!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><style>@keyframes move {100%{transform: rotateY(360deg);}}body {margin: 0px;padding: 0px;}input {border-style:none none solid none;font-size: 17px;filter:alpha(opacity=20);opacity:0.3;}a {font-size: 17px;color:rgb(207, 48, 48);}button { width: 150px;height: 30px;border-radius: 10%;background-color: #e05858; border: none; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; margin: 4px 2px; cursor: pointer; -webkit-transition-duration: 0.4s; transition-duration: 0.4s;}button:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}#bg {background-image: url(1.jpg);position:fixed;top: 0;left: 0;width:100%;height:100%;min-width: 250px;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;}#div1 {margin:0 auto;position: relative;top:30px;width: 600px;height: 600px;border-radius: 50%;filter:alpha(opacity=50);opacity:0.5;animation:move 2s linear 1s 1 alternate;background-color: rgb(255, 255, 255);}#p1 {font-size: 30px;color: black;font-weight: 600;}.p2 {font-size: 17px;color: rgb(119, 115, 115);font-weight: 700;}#div2 {float:left;text-align: center;width: 450px;height: 450px;position: relative;top:-75%;animation: move 2s linear 1s 1 alternate;left:33.5%;}</style>
</head>
<body><div id="bg"><div id="div1"></div><div id="div2"><p id="p1">立即登录</p><p class="p2">邮箱</p><input type="text" placeholder="请输入邮箱" id="email"/><p class="p2">密码</p><input type="password" placeholder="密码长度至少为六位" id="passworld"/></br><a href="#" id="a">忘记密码？</a></br></br><button onclick="denlu()">登录</button><button id="b2"onclick="click()">注册</button></div></div>
</body>
<script language="javascript" type="text/javascript">document.getElementById("b2").onclick = function click(){window.location.href="注册页面.html";}document.getElementById("a").onclick = function click(){window.location.href="注册页面.html";}email.onchange = function(){var email = this.value;var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;if(reg.test(email)){alert("邮箱格式正确");}else{alert("邮箱格式不正确");}}passworld.onchange = function(){var passworld = this.value;var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;if(reg.test(passworld)){}else{alert("密码格式不正确");}}function denlu() {var p = document.getElementById("passworld").value;var e = document.getElementById("email").value;var p2=localStorage.getItem("password");var e2=localStorage.getItem("email");if(p==p2&&e==e2)window.location.href="照片墙.html";elsealert("账号或密码不正确");}</script>
</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><style>body {margin: 0px;padding: 0px;}input {border-style:none none solid none;width: 50%;border-bottom: #000000 solid;font-size: 15px;}a {font-size: 60px;color:rgb(250, 201, 201);}p {font-size: 15px;font-weight:bold;color: rgb(0, 0, 0);}h1 {color: #fff;}h2 {position: relative;top: -79%;left:32%;}h5 {color: #fff;}button { width: 300px;height: 30px;border-radius: 5%;background-color: #fc6b28; border: none; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 5px; margin: 4px 2px; cursor: pointer; -webkit-transition-duration: 0.4s; transition-duration: 0.4s;}button:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}#bg {background-image: url(1.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;}#div1 {margin:0 auto;position: relative;top:50px;width: 1006px;height: 563px;filter:alpha(opacity=50);opacity:0.5;background-color: rgb(255, 255, 255);}#left {float:left;width: 653px;height: 563px;}#right {text-align:center;float:left;width: 353px;height: 563px;background-color: rgb(211, 92, 92);}#center {position: relative;top: 3%;left:3%;text-align:center;width: 581px;height: 471px;}.radio {margin: auto;width: 10%;}</style>
</head>
<body><div id="bg"><div id="div1"><div id="left"><div id="center"></br><p>邮箱</p><input type="text" placeholder="请输入邮箱" id="email"/><p>用户名</p><input id="name" type="text" onchange="namechange()" placeholder=" 用户名长度不能超过5位"/><p>性别</p><p>男<input class="radio" type="radio" value="男" name="people" checked="checked">女<input class="radio" value="女" type="radio" name="people"></p><p>头像</p><input type="file"/><p>密码</p><input id="passworld" placeholder="密码长度至少为6位，且为数字和字母的组合"/><p>确认密码</p><input id="ispassworld" placeholder=" 两次密码必须一致"/></br></br><button onclick="subm()">注册</button></div></div><div id="right"><h1>已有帐号？<h5>有账号就登录吧，好久不见了！</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br><button id="b2" onclick="click()">登录</button></div></div><h2>立即注册</div>
</body>
<script language="javascript" type="text/javascript">document.getElementById("b2").onclick = function click(){window.location.href="登录页面.html";}email.onchange = function(){var email = this.value;var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;if(reg.test(email)){alert("邮箱格式正确");}else{alert("邮箱格式不正确");}}function namechange(){var x=document.getElementById("name").value.length;if(x<=5){alert("姓名格式正确");}else{alert("姓名格式不正确");}}passworld.onchange = function(){var passworld = this.value;var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;if(reg.test(passworld)){alert("密码格式正确");}else{alert("密码格式不正确");}}ispassworld.onchange = function(){var p1 = this.value;var p2 = document.getElementById("passworld").value;if(p2==p1){alert("两次密码相同");}else{alert("两次密码不相同");}}function subm() {var na = document.getElementById("name").value;var pword = document.getElementById("passworld").value;var emai = document.getElementById("email").value;localStorage.setItem("username",na);localStorage.setItem("password",pword);localStorage.setItem("email",emai); window.location.href="登录页面.html";}</script>
</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><style>body {margin: 0px;}#div1 {width: 100%;height: 50px;background: rgba(190, 74, 74, 0.966);}#div2 {background-image: url(1.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:0;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 #ccc;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);}}#text1 {float: left;color:#fff;width: 150px;padding:12px 0;height: 50px;}#text2 {float: right;width: 100px;color:#fff;padding:12px 0;height: 50px;}#text3 {float: right;width: 100px;color:#fff;padding:12px 0;height: 50px;}</style>
</head>
<body><div id="div1"><div id="text1">欢迎登录！</div><div id="text2" onclick="outclick()" >退出</div><div id="text3">个人信息</div></div><div id="div2"><div id="photo_box"><img src="data:image/1.jpg" onmouseover="onmouseOver()" onmouseout="begin()"><img src="data:image/2.jpg" onmouseover="onmouseOver()" onmouseout="begin()"><img src="data:image/3.jpg" onmouseover="onmouseOver()" onmouseout="begin()"><img src="data:image/4.jpg" onmouseover="onmouseOver()" onmouseout="begin()"><img src="data:image/5.jpg" onmouseover="onmouseOver()" onmouseout="begin()"><img src="data:image/6.jpg" onmouseover="onmouseOver()" onmouseout="begin()"><img src="data:image/7.jpg" onmouseover="onmouseOver()" onmouseout="begin()"><img src="data:image/8.jpg" onmouseover="onmouseOver()" onmouseout="begin()"><img src="data:image/9.jpg" onmouseover="onmouseOver()" onmouseout="begin()"><img src="data:image/10.jpg" onmouseover="onmouseOver()" onmouseout="begin()"><img src="data:image/11.jpg" onmouseover="onmouseOver()" onmouseout="begin()"></div></div>
</body>
<script>var name=localStorage.getItem("username");var div1=document.getElementById("text1");div1.innerHTML="欢迎"+name+"登录！";function outclick() {localStorage.clear();window.location.href="登录页面.html";}function onmouseOver(){var x =document.getElementById("photo_box");x.style.animationPlayState = "paused";}function begin(){var y =document.getElementById("photo_box");y.style.animationPlayState = "running";}
</script>
</html>
学习笔记的记录，若有错误欢迎指正。
CSS3+HTML5+JavaScript:个人相册网站实现相关推荐
- 网页设计成品DW静态网页Html5响应式css3 ——响应式游戏网站(24页) HTML+CSS+JavaScript 关于制作网游网页主题论述
HTML5期末大作业:游戏网站设计--响应式游戏网站(24页) HTML+CSS+JavaScript 关于制作网游网页主题论述 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...
- iOS Web应用开发：运用HTML5、CSS3与JavaScript
<iOS Web应用开发:运用HTML5.CSS3与JavaScript> 基本信息 原书名:Pro iOS web design and development:HTML5, CSS3, ...
- 《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——导读
本节书摘来自异步社区<iOS应用开发指南--使用HTML5.CSS3和JavaScript>一书中的目录,作者 [美]Kristofer Layon,更多章节内容可以访问云栖社区" ...
- html5+css3网页设计与网站布局从新手到高手,HTML5+CSS3网页设计与网站布局从新手到高手...
HTML5+CSS3网页设计与网站布局从新手到高手 语音 编辑 锁定 讨论 上传视频 <从新手到高手:HTML 5+CSS 3网页设计与网站布局从新手到高手>是2013年1月清华大学出版社 ...
- 《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——第1章 变小的巨大影响1.1 移动魔力和掌上电脑...
本节书摘来自异步社区<iOS应用开发指南--使用HTML5.CSS3和JavaScript>一书中的第1章,第1.1节,作者: [美]Kristofer Layon 更多章节内容可以访问云 ...
- HTML5在线电影网站设计 黑色的影视传媒公司网站(6页) HTML+CSS+JavaScript
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军事. ...
- 123房地产行业响应式html5模板 二手房源网站模板手机wap页html模板中介推广专题网页模板网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应。
123房地产行业响应式html5模板 二手房源网站模板手机wap页html模板中介推广专题网页模板网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 不仅仅是首 ...
- 必学的web前端三大核心:JavaScript css3 HTML5
对于前端的学习和提高,我的基本思路是这样的.首先,前端的三个最基本的东西 HTML5.CSS3 和 JavaScript(ES6)是必须要学好的.这其中有很多很多的技术,比如,CSS3 引申出来的 C ...
- 电商项目实战第一节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【顶部导航】
文章目录 [考拉海购网站]之[顶部导航] 第一步,分析布局 第二步,建立基本的文本目录及文件 第三步,根据第一步对导航栏的分析,在html代码里面补全需要的标签 index.html文件代码 第四步, ...
最新文章
- Entity Framework的启动速度优化
- 数据的统计特征量有哪些
- 图书管理系统python怎么保存用户注册信息_Python实现图书管理系统
- taobao sass
- QMainWindow多线程demo
- 收藏：发展之道：简单与专注
- Go的sync.WaitGroup(二)：WaitGroup让主程序与协程全部都执行 并且全部执行完成
- java导出word(带图片)
- isset php 二维数组_php 数组去重，一维数组去重，二维数组去重
- Linux 命令（108）—— ifconfig 命令
- Android横向滚动卡片,Android滑动卡片成效：Swipecards
- 8.4完成服务（Completion Services）
- test failed: The forked VM terminated without saying properly goodbye. VM crash or System.exit
- 【LeetCode-769. medium】最多能完成排序的块
- Ajax参数详解(转载)
- 盒子模型塌陷解决办法
- 新旧电脑数据传输|怎么实现两台电脑硬盘数据传输
- c#生成PPT总结（Microsoft.Office.Interop）
- 新房子没网络，怎么用光猫和路由器上网
- CEO说其实福特造的是“计算机”，流水线工人靠外骨骼变身钢铁侠