html5+css3个人相册网页制作

一、登录界面设计
使用正则表达式验证邮箱且密码长度至少为6位且为字母与数字的组合，如果输入框为空输出提示信息，能够提取localStorage中存的数据比较验证。
正则表达式验证邮箱：
邮箱的正则表达式为：/^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/
验证函数：

function jd(){var y=document.getElementById("email").value;var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;if(!reg.test(y)){alert("邮箱格式错误");}}

密码长度至少为6位且为字母与数字的组合正则表达式为/^(?![0-9]+)(?![a−zA−Z]+)(?![a-zA-Z]+)(?![a−zA−Z]+)[0-9A-Za-z]{6,}$/，验证函数：

var p=document.getElementById("mima");p.οnchange=function(){var m=document.getElementById("mima").value;var r = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;if(!r.test(m)){alert("密码长度至少6位数且包含字母与数字");}}

完整代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{background-image: url("背景.jpeg");}#dl{width: 350px;height: 350px;margin: 10% auto;background-color: white;border-radius: 200px;opacity: 0.6;animation: move 2s ease-in-out 1s 1 alternate;}#box{padding: 10%;text-align: center;}input{width: 200px;border-top:0;border-left:0;border-right:0;}button{width: 90px;border-radius: 15px;background-color:darkorange;border-style:solid;}@keyframes move{100%{transform: rotateY(360deg);}}</style>
</head>
<body><div id="dl"><form><div id="box"><h2>立即登录</h2>邮箱<br><input type="text"name="mailbox"id="email"onchange="jd()"><br>密码<br><input type="password"name="password"id="mima"placeholder="      密码长度至少6位数"><br><a href="#">忘记密码？</a><br><br><button id="denglu"onclick="yz()">登陆</button><button id="zhuce"onclick="jump()">注册</button></div></form></div> <script>function jump(){window.location.href="注册界面.html";window.event.returnValue=false; }function jd(){var y=document.getElementById("email").value;var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;if(!reg.test(y)){alert("邮箱格式错误");}}var p=document.getElementById("mima");p.onchange=function(){var m=document.getElementById("mima").value;var r = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;if(!r.test(m)){alert("密码长度至少6位数且包含字母与数字");}}function yz(){var m=document.getElementById("email").value;var i=document.getElementById("mima").value;var ml=localStorage.getItem("mailbox");var mi=localStorage.getItem("password");if(m.length==0||i.length==0){alert("邮箱或密码不能为空");}else if(m!==ml){alert("用户不存在");}else if(i!==mi){alert("密码错误");}else{window.location.href="个人相册.html";window.event.returnValue=false; }}</script>
</body>
</html>

实现效果：

二、注册界面设计
建立一个注册表单并且使用正则表达式验证邮箱，用户名长度不能超过五位，密码长度至少为6位且为字母与数字的组合验证两次密码输入是否一致。
完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{background-image: url("背景.jpeg");}#box1{width: 500px;height: 500px;background-color:white;margin-left: 25%;margin-top: 100px;float: left;opacity: 0.6;}#box2{width: 250px;height: 500px;background-image: url("背景2.jpg");margin-top: 100px;float: left;text-align: center;}#box{text-align: center;}#box3{margin-top: 100%;}input{width: 220px;border-top:0;border-left:0;border-right:0;}#btn1{width: 200px;border-radius: 20px;border-style:solid;background-color:darkorange;}#btn2{width: 100px;border-radius: 20px;background-color:transparent;border-style:solid;border-color: white;color:white;}</style>
</head>
<body><div><div id="box1"><form><div id="box"><h2>立即注册</h2>邮箱<br><input type="text"name="mailbox"id="email"onchange="jd()"><br><br>用户名<br><input type="text"name="username"id="user"placeholder="      用户名长度不能超过5位数"><br><br>性别<br><input type="radio" name="gender" value="male"style="width: 30px;" checked>男       <input type="radio" name="gender" value="female"style="width: 30px;">女<br><br>头像<br><input type="file"name="photo"style="text-decoration: underline;"><br><br>密码<br><input type="password"name="password"id="mima"placeholder="      密码长度至少6位数"><br><br>确认密码<br><input type="password"name="psd"id="que"placeholder="      两次密码必须一致"><br><br><button id="btn1">注册</button></div></form></div><div id="box2"> <div><h1>已有账号？</h1><p>有账号就登录吧，好久不见了！</p></div><div id="box3"><button id="btn2" >登录</button></div></div>
</div>
<script>var r=document.getElementById("btn2");r.onclick=function(){window.location.href="登陆界面.html";}function jd(){var y=document.getElementById("email").value;var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;if(!reg.test(y)){alert("邮箱格式错误");// e.focus();}}var u=document.getElementById("user");u.onchange=function(){var x=document.getElementById("user").value;if(x.length>5){alert("用户名长度不能超过5位");}}var p=document.getElementById("mima");p.onchange=function(){var m=document.getElementById("mima").value;var r = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;if(!r.test(m)){alert("密码长度至少6位数且包含字母与数字");}}var qr=document.getElementById("que");qr.onchange=function(){var m=document.getElementById("mima").value;var q=document.getElementById("que").value;if(p!==q){alert("两次密码不一样");}}var s=document.getElementById("btn1");s.onclick=function(){var ml=document.getElementById("email").value;var uh=document.getElementById("user").value;var mi=document.getElementById("mima").value;var qmi=document.getElementById("que").value;if(ml.length==0||uh.length==0||mi.length==0||qmi==0){alert("错误，请完善信息");}else{localStorage.setItem("mailbox",ml);localStorage.setItem("username",uh);localStorage.setItem("password",mi)window.location.href="个人相册.html";window.event.returnValue=false;alert("注册成功");}
}</script>
</body>
</html>

实现效果：

三、个人相册界面设计
实现图片3D旋转：
完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{padding: 0px;margin: 0px;background-image: url("背景.jpeg");}#box4{width: 100%;height:55px;background-color: rgb(94, 84, 84);float: left;}#btn1{border-radius: 15px;opacity: 0.6;position: relative;left:85%;top: 15px;}#box{width: 250px;height: 350px;position: fixed;left: 0;right: 0;top:0;bottom: 0;margin: auto;transform-style: preserve-3d;transform: rotateX(0deg) rotateY(0deg);animation: move 20s linear infinite;}#box:hover {animation-play-state: paused; /* 动画暂停 */cursor: pointer;}#box img{width: 250px;height: 350px;position: absolute;left: 0;top: 0;}#box img:nth-child(1){transform: rotateY(0deg) translateZ(550px);}#box img:nth-child(2){transform: rotateY(40deg) translateZ(550px);}#box img:nth-child(3){transform: rotateY(80deg) translateZ(550px);}#box img:nth-child(4){transform: rotateY(120deg) translateZ(550px);}#box img:nth-child(5){transform: rotateY(160deg) translateZ(550px);}#box img:nth-child(6){transform: rotateY(200deg) translateZ(550px);}#box img:nth-child(7){transform: rotateY(240deg) translateZ(550px);}#box img:nth-child(8){transform: rotateY(280deg) translateZ(550px);}#box img:nth-child(9){transform: rotateY(320deg) translateZ(550px);}@keyframes move {0%{transform: rotateX(0deg) rotateY(0deg);}25%{transform: rotateX(-10deg) rotateY(180deg);}50%{transform: rotateX(0deg) rotateY(360deg);}75%{transform: rotateX(10deg) rotateY(540deg);}100%{transform: rotateX(0deg) rotateY(720deg);}}</style></head>
<body><div id="box4"><div>欢迎您登陆:<button id="btn1"onclick="getcookie()">个人信息</button><button id="btn1"onclick="jump()">退出</button></div><script>function jump(){window.location.href="登陆界面.html";window.event.returnValue=false; }function getcookie() {alert("邮箱"+localStorage.getItem("mailbox")+"用户名"+localStorage.getItem("username"))}var m=localStorage.getItem("username");document.write(m); </script></div><div id="box5"><div id="box"><img src="1.jpeg"><img src="2.jpeg"><img src="3.jpeg"><img src="4.jpeg"><img src="5.jpeg"><img src="6.jpeg"><img src="7.jpeg"><img src="8.jpeg"><img src="9.jpeg"></div></div>
</body>
</html>

实现效果：

html5+css3个人相册网页制作相关推荐

免费html5 css3大学生网页设计期末作业网页制作作业成品
html5 css3大学生网页设计期末作业网页制作作业成品布局技术:html5 css3 页面个数:6个网页元素:图文超链接表单效果图: 目录如下: <!DOCTYPE html&g ...
基于HTML5+CSS3的网页设计与实现
摘要:随着互联网技术的不断发展,电子设备的广泛应用和高普及度,网页作为互联网信息的重要载体,其网页设计技术将面临新的挑战.HTML和CSS作为网页前端开发所运用的主要核心技术,如何灵活运用,使得web ...
跨平台html5页面代码,HTML5+CSS3跨平台网页设计实例教程
HTML5+CSS3跨平台网页设计实例教程编辑锁定讨论上传视频 <HTML5+CSS3跨平台网页设计实例教程>是2018年8月清华大学出版社出版的图书,作者是陈承欢.韩耀坤.颜珍平 ...
20个超炫的HTML5 /CSS3免费网页设计模板
时至今日,几乎所有的网页模板都采用HTML5 /CSS3来设计.其主要原因是HTML5 和 CSS3非常容易学习,并且只要很短的时间和很少的精力,就能创建结构合理.布局精美的网页模板.另外,HTML5 ...
《HTML5+ CSS3+JavaScript 网页设计实战（视频教学版）》代码下载、简介与前言
代码下载:https://pan.baidu.com/s/1o8aBMjw(密码:f3u2) 图书简介本书由浅入深,系统.详尽地介绍了HTML5.CSS3和JavaScript相关技术及其在Web前 ...
HTML5 + css3 + js 网页设计作业网页小游戏
用HTML5 + css3 + js 做的一个翻图片的网页小游戏,挺有意思的吧! 因为上网页课要交一个个人的网页设计作业,时间挺紧的,记得以前玩游戏偶尔看到一个翻转图片的小游戏,就想模仿着做一个! 目 ...
HTML5生日快乐祝福网页制作【蛋糕烟花+蓝色梦幻海洋3D相册】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
html5与ccs网页制作,HTML5CCS3（1）网页的构造块
HTML用于定义内容的含义,而CSS(Cascading Style Sheet,层叠样式表)用于定义内容和网页如何显示.HTML页面和CSS文件(样式表,stylesheet)都是文本文件,因此很容 ...
米云影视html5播放器,网页制作HTML5自定义视频播放器源码
video对象兼容性写法您的浏览器不支持,请升级您的浏览器 video 标签 width height autoplay muted poster带有预览图(海报图片)的视频播放器选中video ...

html5+css3个人相册网页制作

html5+css3个人相册网页制作相关推荐

最新文章

热门文章