菜单 搜索
首页 前端知识 大学生HTML期末大作业——HTML CSS JavaScript购物商城（美食）

大学生HTML期末大作业——HTML CSS JavaScript购物商城（美食）

2024-02-23 11:02:50 前端知识 前端哥 13 420 我要收藏

HTML+CSS+JS【购物商城】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

  • 💥 文章目录
  • 一、🏁 网站题目
  • 二、🚩 网站描述
  • 三、🎌 网站介绍
  • 四、🏴 网站效果
  • 五、🏳️ 网站代码
  • 六、🏳️‍🌈 如何学习进步
  • 七、🏴‍☠️ 更多干货

💥 文章目录

一、🏁 网站题目

💪💪💪 购物商城 美食 7页 含jQuery 登录注册

二、🚩 网站描述

🏅 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞(๑•̀ㅂ•́)و✧）

🥇 一套A+的网页应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
页面清爽、美观、大方，不雷同。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、🎌 网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📃网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📜网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📄网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📰网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）🎥 html文件包含：其中index.html是首页、其他html为二级页面；
（2）📺 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📷 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等。

四、🏴 网站效果

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

五、🏳️ 网站代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>良仓注册</title>
	<link rel="stylesheet" href="css/public.css">
	<link rel="stylesheet" href="css/register.css">
	<style>
		body {

			position: relative;
		}

		.reg_body {
			background-color:rgb(79, 196, 25);
			width: 100%;
			height: 100%;
		}
		#pwdString{
			display: flex;
		}
		#pwdString span {
			flex: 1;
			background: #FFF;
		}
	</style>
</head>

<body class="reg_body">
	<!-- <div class="layerMask"></div> -->
	<div class="main">

		<form action="">
			<table class="regtab" style="margin-top: 40px;">

				<tr valign="center" align="center">
					<td colspan="3" height="160px">
						<a href="">
							<img class="logo-bg" src="images/屏幕截图 2023-06-08 095201.png" alt="" style="width: 150px; height: 100px;">
						</a>
					</td>
				</tr>

				<tr valign="middle" height="50px">
					<th width="56px" class="regLabel" align="left">用户名</th>
					<td width="270px" align="left">
						<input type="text" class="regInpt" placeholder="请输入用户名">
					</td>
				</tr>
				<tr id="username">
					<td></td>
					<td>
						<p style="color:red"></p>
					</td>
				</tr>

				<tr valign="middle" height="50px">
					<th width="56px" class="regLabel" align="left">验证码</th>
					<td width="270px" align="left">
						<input type="text" class="regcode" placeholder="输入验证码">
						<img id="auth" src="#" alt="">
					</td>
					<td align="left">
						<a href="javascript:void(0)" class="nextcode" onclick="updateCode()">看不清，换一张</a>
					</td>
				</tr>
				<tr id="code">
					<td></td>
					<td>
						<p style="color:red"></p>
					</td>
				</tr>

				<!-- 创建密码 -->
				<tr valign="middle" height="50px">
					<th width="56px" class="regLabel" align="left">创建密码</th>
					<td width="270px" align="left">
						<input type="password" class="regInpt" placeholder="6~20位字符组成，区分大小写" oninput="power(event)">
					</td>
					<td align="left">
						<div id="pwdInfo">
							<div id="pwdString" class="content">
								<span></span>
								<span></span>
								<span></span>
							</div>
							<div class="info">
								<span class="passleft">弱</span>
								<span>中</span>
								<span class="passright">强</span>
							</div>
						</div>
					</td>
				</tr>
				<tr id="password1">
					<td></td>
					<td>
						<p style="color:red"></p>
					</td>
				</tr>

				<!-- 确认密码 -->
				<tr valign="middle" height="50px">
					<th width="76px" class="regLabel" align="left">创建密码</th>
					<td width="270px" align="left">
						<input type="password" class="regInpt" placeholder="确认密码">
					</td>
				</tr>
				<tr id="password2">
					<td></td>
					<td>
						<p style="color:red"></p>
					</td>
				</tr>


				<tr valign="middle" height="50px">
					<th width="76px" class="regLabel" align="left"></th>
					<td>
						<div class="agree">
							<input type="checkbox" checked="checked" class="overtrea">同意
							<a class="vertpos" style="color: #0c79cc;" target="_blank" href="">美食客注册条款</a>
						</div>

					</td>
				</tr>


				<tr valign="center" align="center">
					<td width="300px" colspan="2" align="right">

						<input class="regbtn" type="button" value="立即注册" style="border-radius: 4px;font-weight: normal;"
							onclick="register()">

					</td>
				</tr>

				<tr valign="center" align="center">
					<th></th>
					<td width="100px" align="left">

						<!-- <a href="" class="loginApp qqapp"><img src="images/qq_icon_on24_22.png" alt=""></a>
					<a href="" class="loginApp wbapp"><img src="images/sina_icon_on24_22.png" alt=""></a>
					<a href="" class="loginApp dbapp"><img src="images/db_icon_on24_22.png" alt=""></a>
					<a href="" class="loginApp tqqapp"><img src="images/tqq_icon_on24_22.png" alt=""></a> -->

						<a href="" class="loginApp qqapp"></a>
						<a href="" class="loginApp wbapp"></a>
						<a href="" class="loginApp dbapp"></a>
						<a href="" class="loginApp tqqapp"></a>

					</td>
					<td align="left">
						<a href="login.html" class="reg">登录美食客</a>
					</td>

				</tr>

			</table>
		</form>

	</div>

	<script>
		var auth = document.querySelector("#auth");
		var code = ["dcc9", "766d", "659c", "a55c"];
		var currentCode = code[parseInt(Math.random() * code.length)];
		auth.setAttribute("src", "images/" + currentCode + ".png");
		function register() {
			// 获取表单数据
			var username = document.querySelector("table > tbody > tr:nth-child(2) > td > input").value;
			var codeTag = document.querySelector("body > div > form > table > tbody > tr:nth-child(4) > td:nth-child(2) > input").value;
			var password1 = document.querySelector("body > div > form > table > tbody > tr:nth-child(6) > td:nth-child(2) > input").value;
			var password2 = document.querySelector("body > div > form > table > tbody > tr:nth-child(8) > td > input").value;

			// 获取显示错误元素
			var showUsername = document.querySelector("#username p");
			var showCode = document.querySelector("#code p");
			var showPassword1 = document.querySelector("#password1 p");
			var showPassword2 = document.querySelector("#password2 p");
			showUsername.innerHTML = "";
			showCode.innerHTML = "";
			showPassword1.innerHTML = "";
			showPassword2.innerHTML = "";
			// 检测用户名
			if (username.length < 3 || username.length > 12 || username.replace(/[0-9A-z_]*/g, "") != "") {
				showUsername.innerHTML = "用户名必须由3-12字母，数字或下划线组成";
				return;
			}
			// 比较验证码
			if (codeTag.toLowerCase() != currentCode) {
				currentCode = code[parseInt(Math.random() * code.length)];
				auth.setAttribute("src", "images/" + currentCode + ".png");
				showCode.innerHTML = "验证码错误";
				return;
			}
			// 比较密码
			if (password1.length < 6 || password1.length > 12 || password1.replace(/[0-9]*/g, "") != "") {
				showPassword1.innerHTML = "密码必须是由6-12位数字组成";
				return;
			}
			// 比较两次密码是否一致
			if (password1 != password2) {
				showPassword2.innerHTML = "密码不一致";
				return;
			}

			// 将表单数据转换成字符串拼接形式
			var formData = new URLSearchParams();
			formData.append("username", username);
			formData.append("password", password1);
			formData.append("status", "register");
			// 发送请求
			fetch("http://159.75.89.136:3000/api_user", {
				method: 'post',
				headers: {
					"Content-Type": "application/x-www-form-urlencoded",
				},
				body: formData,
			}).then(function(res){ return res.json()}).then(function(data) {
				alert(data.message);
				// 接受后端回应的数据
				if (data.code == 0) {
					data.user_id = data.uesr_id;
					// 将登录信息保存在本地
					localStorage.setItem("user", JSON.stringify(data));
					// 登录成功
					location.href = "./index.html"; 
				}
			});
		}
		function power(event){
			console.log(event.target.value);
			var tag1 = document.querySelector("#pwdString > span:nth-child(1)");
			var tag2 = document.querySelector("#pwdString > span:nth-child(2)");
			var tag3 = document.querySelector("#pwdString > span:nth-child(3)");
			var password1 = document.querySelector("body > div > form > table > tbody > tr:nth-child(6) > td:nth-child(2) > input").value;
			tag1.style.backgroundColor = "";
			tag2.style.backgroundColor = "";
			tag3.style.backgroundColor = "";
			if(password1.length > 11){
				tag1.style.backgroundColor = "#de9516";
				tag2.style.backgroundColor = "#1669de";
				tag3.style.backgroundColor = "red";
			}else if(password1.length > 8){
				tag1.style.backgroundColor = "#de9516";
				tag2.style.backgroundColor = "#1669de";
			}else{
				tag1.style.backgroundColor = "#de9516";
			}
			document.querySelector("#pwdString > span:nth-child(1)");
		}
		// 更新验证码
		function updateCode(){
			currentCode = code[parseInt(Math.random() * code.length)];
			auth.setAttribute("src", "images/" + currentCode + ".png");
		}
	</script>

</body>

</html>

六、🏳️‍🌈 如何学习进步

  1. 看书、看博客、学课程或者看视频等
  2. 模仿着书上或者博客的代码，进行复现，复现不重要，思考才是关键
  3. 思考学习别人思路后，脱离书本和博客，完全自己实现功能
  4. 自己实现一些 DEMO，看别人项目代码，与别人讨论，提升代码能力
  5. 在别人的框架和要求下，写代码实现业务
  6. 自己负责别人设计的模块的实现
  7. 独立设计业务模块并开发实现
  8. 负责大项目框架设计和拆分，带领别人进行开发
  9. 其他高阶的架构和管理工作，已经不仅仅是代码能力了

七、🏴‍☠️ 更多干货

🌝 关注我 学习更多知识~

🌝 支持我，请 点赞 + 好评 + 收藏 三连，带来更多文章~

🌝 有需要完整源码的同学可以留言、后台私信我（说明要什么主题模板）~

🌝 更多主题网页设计模板

转载请注明出处或者链接地址：https://www.qianduange.cn//article/2522.html
标签
web前端大作业课程设计大学生web网页设计
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

基于 HTML5 WebGL 的太阳系 3D 展示系统

2024-03-09 09:03:15

uniapp h5跳转微信小程序（wx-open-launch-weapp）

2024-03-09 09:03:06

H5调用摄像头扫码识别（html5-qrcode）

2024-03-09 09:03:02

三种利用python将html文件转图片的方式

2024-03-09 09:03:01

程序员的中秋节

2024-03-09 09:03:01

jquery html特殊字符反转义,JS - 实现HTML标签的转义、反转义的几种方法

2024-03-09 09:03:00

2024三掌柜赠书活动第十二期：Nuxt.js Web开发实战

2024-03-09 09:03:22

华为OD机试 - 堆内存申请（Java & JS & Python & C & C ）

2024-03-09 09:03:22

Node.js安装及环境配置（简单易懂全面！）

2024-03-09 09:03:03

js中几种追加元素的方法

2024-03-08 10:03:38

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999
8

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
9

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
10

尚硅谷css3笔记

2024-02-13 10:02:44998

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！