Visual Studio Code:Web前端——登录、注册界面、个人相册
2024-05-14 06:20:51
制作一个网页，有登录界面、注册界面和个人相册界面，注册成功后在登录界面登录成功后进入个人相册界面,个人相册里的所有图片是顺时针旋转的。若失败返回登录界面，登录界面和注册界面可相互切换。
代码：
login.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>* {margin: 0;padding: 0;} html {height: 100%;width: 100%;overflow: hidden;margin: 0;padding: 0;background: url(E:/source/material/images/c.jpg) no-repeat 0px 0px;background-repeat: no-repeat;background-size: 100% 100%;-moz-background-size: 100% 100%;} body {display: flex;align-items: center;justify-content: center;height: 100%;} #loginDiv {width: 40%;display: flex;justify-content: center;align-items: center;height: 300px;background-color: rgba(75, 81, 95, 0.3);box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);border-radius: 5px;} #name_trip {margin-left: 50px;color: red;} p {margin-top: 30px;margin-left: 20px;color: rgb(2, 24, 24);font-size: 20px;} input {margin-left: 0px;border-radius: 5px;border-style: hidden;height: 30px;width:300px;background-color: rgba(204, 180, 204, 0.5);outline: none;color: #0c0116;padding-left: 20px;} .button {border-color: cornsilk;background-color: rgba(100, 149, 237, .7);color: aliceblue;border-style: hidden;border-radius: 5px;width: 100px;height: 31px;font-size: 16px;text-align: center;}</style>
</head>
<body><div id="loginDiv"><div id="form"><h1 style="text-align: center;color: rgb(13, 13, 14);">立即登录</h1><p style="text-align: center;">邮箱</p><input type="text" placeholder="请输入邮箱" id="email"/><p style="text-align: center;">密码</p><input type="password" placeholder="密码长度至少为六位" id="passworld"/></br></br><a href="#" id="forget" style="text-align: center;">忘记密码？</a></br><div style="text-align: center;margin-top: 30px;"><button onclick="denlu()" class="button">登录</button><button id="b2"onclick="click()" class="button">注册</button></div></div></div>
</body>
<script language="javascript" type="text/javascript">document.getElementById("b2").onclick = function click(){window.location.href="register.html";}document.getElementById("forget").onclick = function click(){window.location.href="register.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="photo wall.html";elsealert("账号或密码不正确");}</script>
</html>
register.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: -73%;left:34%;}h5 {color: #fff;}button { width: 200px;height: 30px;border-radius: 5%;background-color: #fcb928; border: none; color: rgb(10, 10, 10); text-align: center; text-decoration: none; display: inline-block; font-size: 12px; 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(E:/source/material/images/c.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-image: url(E:/source/material/images/a.jpg);}#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"type="password" placeholder="密码长度至少为6位，且为数字和字母的组合"/><p>确认密码</p><input id="ispassworld"type="password" 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="login.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)){}else{alert("邮箱格式不正确");}}function namechange(){var x=document.getElementById("name").value.length;if(x<=5){}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("密码格式不正确");}}ispassworld.onchange = function(){var p1 = this.value;var p2 = document.getElementById("passworld").value;if(p2==p1){}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="login.html";}
</script>
</html>
photo wall.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(74, 105, 190, 0.966);}#div2 {background-image: url(E:/source/material/images/b.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="E:/source/material/images/a1.jpg"><img src="E:/source/material/images/a2.jpg"><img src="E:/source/material/images/a3.jpg"><img src="E:/source/material/images/a4.png"><img src="E:/source/material/images/a5.jpg"><img src="E:/source/material/images/a6.jpg"><img src="E:/source/material/images/a7.jpg"><img src="E:/source/material/images/a8.jpg"><img src="E:/source/material/images/a9.jpg"><img src="E:/source/material/images/a10.jpg"><img src="E:/source/material/images/a11.jpg"></div></div>
</body>
<script>var name=localStorage.getItem("username");var div1=document.getElementById("text1");div1.innerHTML="欢迎"+name+"登录！";function outclick() {localStorage.clear();window.location.href="login.html";}
</script>
</html>
效果展示
Visual Studio Code:Web前端——登录、注册界面、个人相册相关推荐
- SpringBoot + Spring Cloud +Vue 管理系统前端搭建（二、visual studio code开发前端项目
我们打开visual studio code , 选择文件------------->将文件夹添加到工作区,导入我们的项目 安装Element 导入后,我们安装以下element 官网:http ...
- UnRaid安装Visual Studio Code并设置为中文界面
文章目录 0.前言 1.在Docker中安装VS Code 2.将编辑器界面改为中文 0.前言 喜欢码代码的同学可能都有这样的经历,有时代码写到一半,就要出差或者被要求去干别的活,然而代码编辑器是安装 ...
- Visual Studio Code插件-前端工程师开发必备
前端开发工具 1.Auto Rename Tag 自动重命名 HTML或XML 标签 2.Auto Close Tag 自动添加 HTML/XML 关闭标签 3.Path Intellisense 智 ...
- visual studio code下载慢解决办法
visual studio code对于前端来讲,是个不错的工具. 但是官网的下载速度,干净的让你怀疑人生,拿mac环境下来讲,167M的压缩包,一分钟能下载10M算是牛逼克拉斯了. 第三方像电脑管家 ...
- 初识Web前端开发及Visual Studio Code的安装
一.前端的构成: 前端由HTML,CSS,JavaScript构成,且HTML,CSS,JavaScript都是单独的语言,HTML,CSS,JavaScript一起构成前端的技术基 ...
- 前端开发利器--VScode（Visual Studio Code）
前言 在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code. 都不用我安利VS code,大家就会乖乖的去用,无数个大言不惭的攻城狮,都被VS code比德芙还 ...
- python网页运行环境_Python小牛叔Web开发1：安装Visual Studio Code配置Python运行环境...
本系列是Python小牛叔Web开发系列,以Django为框架介绍如何使用Python来开发Web应用,本教程适合对于Web开发有基本知识的入门者. 1.安装Visual Studio Code编辑器 ...
- 前端网页开发工具Visual Studio Code推荐
前端开发有很多软件可使用,笔者用过Adobe Dreamweaver CS6 ,IntelliJ IDEA ,还有webstrom.但是这些虽然有他们的好处,比如 Dreamweaver 他特有的视图 ...
- azure web应用部署_使用Visual Studio Code将Python应用程序部署到Azure Functions
azure web应用部署 In this article, we are going to build a small python application and deploy it to Azu ...
最新文章
- linux vg 镜像,Linux下载_Linux系统各种版本ISO镜像下载（redhat,centos,oracle,ubuntu,openSUSE）...
- CListCtrl列表控件---总结
- click vue 重复调用_VUE防止多次点击，重复请求
- vscode+sftp 开发模式环境的同步
- 余承东宣布鸿蒙系统视频,余承东宣布鸿蒙系统开源：打造全球的操作系统
- php 随机码类,php随机类型验证码
- 一个应用程序中最多只能有一个窗口java_在Windows 中,同时显示多个应用程序窗口的正确方法是 ______ 。_学小易找答案...
- mqtt消息队列安装并启用启用认证(客户端密码模式)
- C ++入门系列博客一 最初的起点 — Hello World
- maven实战 源码_Docker与Jib(maven插件版)实战
- DllMain函数参数简介
- 用excel将有规律的数据随机打乱
- 贯头山酒——中华酒文化的源头之一
- 怎么不让WORD自动检查语法和拼写错误，福利在这里，不让WORD自动检查语法和拼写错误该如何设置
- mshtml组件引用的问题 (转)
- excel甘特图制作
- luogu P2184 贪婪大陆
- “红蓝眼人”问题中旅行者说的话的作用
- android 自动弹起键盘
- web网页设计期末课程大作业 HTML+CSS+JavaScript重庆火锅(代码质量好)
热门文章
- 【CF 732E】Sockets（优先队列+贪心）
- Elasticsearch java API (11)Search API scrolls
- 小程序数据为何传不到服务器上,小程序真机调试，发送不到数据到后台
- Correct Sentence
- 野火stm32开发板给定一个脉冲程序_STM32开发板哪个好，推荐一款高性价比stm32MP157开发板...
- 这次终于理解了PCA主成分分析（附代码）
- 吞吐量QPS、TPS、HPS
- 计算机计算器logo,计算器品牌哪个比较好（卡西欧stylish计算器入手体验）
- 股票API之----------雅虎财经频道
- Android实现的电子木鱼，功德+1...