JavaScript 网页购物车项目

客行.

已于 2022-04-12 09:49:24 修改

阅读量4.5k

点赞数 19

文章标签： safari html 前端

于 2022-03-12 17:05:37 首次发布

本文链接：https://blog.csdn.net/m0_65725031/article/details/123446332

版权

本文分享了使用JavaScript实现的网页购物车项目，包括登录界面的实现，要求账号为11位数字且以1开头，密码6-8位数字，以及验证码功能。登录成功后进入商城中心，用户可将商品加入购物车，购物车功能支持商品删除和全选操作。通过此项目，读者可以巩固JavaScript基础知识并实践网页交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天是JavaScript的一个汇总，最近小编把自己曾经写过的JavaScript 网页购物车项目给整理了一下，大家可以看一下，然后自己也可以写一个网页购物车项目噢，然后我们的JavaScript的学习也到此结束啦！下周开始给大家更新新的课程。

一.登录界面

登录界面：1.账号：必须11位数字，以1开头

2.密码：6-8位数字

3.验证码：点击验证码可以切换

4.点注册注册账号

5.登录成功后跳转到商城界面

下方是登录界面的图片，登录的界面代码放在下方给大家

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
		<style>
		/* 登录 */
		   /* 设置背景图片大小 */
			body{
				/* 设置背景 */
				background-image: url(img/33.gif);
			    background-size:  cover;
				width: 100%;
				height: 100%;				
			}
			
			/* 设置表单 */
			 form{
				 /* rgba透明色 */
				 background: rgba(255,255,255,.1);
				 /*绝对布局可四处移动,内容有多大就多大 */
				 position:absolute;
				 padding: 30px 50px;
				 left:55%;
				 top:40%;
				border-radius: 10px;
				box-shadow: 3px 6px 10px black;
			    
			 }
			 
			 #zcForm{
				 position:absolute;
				 left:55%;
				 top:30%;
			 }
			 
			 /* 设置input标签 */
			 input{
				 /* 设置边框 */
				 border : 1px solid gray;
				 border-radius:20px;
				 /* 调节边框的大小 */
				 height:25px;
				 width:200px;
			 }
			 
			 .a{
				 height:25px;
				 width:100px;
			 }
			 
			 .b{
				 border-radius:0px;
				 height:25px;
				 width:45px;
				 /* 间隔距离 */
				 margin:0px 20px;
			 }
			 
			 button{
				 margin:20px 0px;
				 width:70px;
				 height:30px;
			 }
			 
			 /* 注册字体 */
			 .zc{
				 position:absolute;
				 left:80%
			 }
			 
			 .bu{
				 background:white;
				 border-radius:10px;
			 }
			 
			 /* 注册 */
		</style>
	</head>
	<body>
		<form id="dlForm" onsubmit="return  dlUser()">
		<table>
			<!-- 标题 -->
			<tr>
	       <!-- style="text-align:center"设置居中 -->
			<td style="text-align:center" colspan="2"><h3>欢迎来到漫野</h3></td> 
			</tr>
			
			<!-- 用户名 -->
			<tr>
	   <td><img src="img/5.png" width="50px" height="50px"></td> 
	   <td><input id="userName" placeholder="请输入账号"></td> 
		   </tr>
		   
		   <!-- 密码 -->
		   <tr>
		   <td><img src="img/密码.png" width="40px" height="40px"></td> 
		   <td><input id="userPwd" placeholder="请输入密码"></td> 
		   </tr>
		   
		   <!-- 验证码 -->
		   <tr>
			   <td><img src="img/验证码.png" width="40px" height="40px"></td>
			   <td><input class="a" id="userYzm">
			   <!-- readonly不能修改 -->
			   <input id="yzm1" class="b" readonly onclick="yzm()"></td>
		   </tr>
		   
		   <!-- 登录按钮 -->
		   <tr>
		   	 <td colspan="2" style="text-align:center">
				<button class="bu"><a id="dl" onclick="dlUser()">登录</a></button>
			 </td>
		   </tr>
		   
		   <!-- 注册账号 -->
		   <tr>
			   <td colspan="2"><a class="zc" onclick="zcUser()">注册账号</a></td>
		   </tr>
		  </table>
		</form>
		
<!-------------------------------------------------------------------------------------->
		<!-- 注册表单 -->
		<form id="zcForm" onsubmit="return zcUser()">
			<table>
				<!-- 标题 -->
				<tr>
					<td colspan="2" style="text-align:center"><h3>注册漫野账号</h3></td>
				</tr>
				<!-- 用户名 -->
				<tr>
					<td><img src="img/5.png" width="50px" height="50px"></td>
					<td ><input id="zcName" placeholder="请输入注册账号"></td>
				</tr>
				<!-- 密码 -->
			    <tr>
			    	<td><img src="img/密码.png" width="40px" height="40px"></td>
			    	<td><input id="zcPwd" placeholder="请输入注册密码"></td>
			   </tr>
			   
				<!-- 邮箱-->
				<tr>
					<td><img src="img/邮箱.png" width="40px" height="40px"></td>
					<td ><input id="zcEm" placeholder="请输入注册邮箱号"></td>
				</tr>
	            <!-- 验证码 -->
	            <tr>
	            	<td><img src="img/验证码.png" width="40px" height="40px"></td>
	            	<td><input class="a" id="zcYzm">
	            	<!-- readonly不能修改 -->
	            	<input class="b" readonly onclick="yzm()" id="zcYz"></td>
	            </tr>
				<!-- 注册按钮 -->
				<tr>
					<td colspan="2" style="text-align:center">
					<button text="button" onclick="zcUser()"  class="bu">注册</button></td>
				</tr>
				
				<tr>
					<td colspan="2"><span onclick="balck()">返回</span></td>
				</tr>
			</table>
		</form>
		
<!----------------------------------------------------------------------------------------- -->	
		
		<script>
		// 登录方法
	
		// 验证码方法
		   window.onload=()&#

最低0.47元/天解锁文章