小程序开发定制Html购物车

目录

一.

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>登陆界面</title>
  6. 		
  7. 		<style type="text/css">
  8. 		 
  9. 			html,body{
  10. 				height:100%;/*小程序开发定制高度为屏幕的百分之百*/
  11. 				margin: 0px;/*外间距*/
  12. 			}
  13. 			
  14. 			body{/*背景图片*/
  15. 				background: url(tupian/1.jpeg) center/cover;
  16. 			}
  17. 			
  18. 			form{/*表单·*/
  19. 				color: white;
  20.                 /*小程序开发定制将背景设置透明*/
  21. 				background: rgba(255,255,255,.1);
  22. 				position: absolute;
  23. 				padding: 0px 20px;
  24. 				left: 50%;
  25. 				top: 50%;
  26.                 /* 小程序开发定制在自己的基础上往右边和下面走-50% */
  27. 				transform: translate(-50%,-50%);
  28. 				border-radius: 10px;
  29. 				box-shadow: 6px 6px 10px black;
  30. 			}
  31. 			
  32. 			input{
  33. 				border: 1px solid gray;
  34. 				border-radius: 20px;
  35. 				height: 40px;
  36. 				width: 300px;
  37. 			}
  38. 			
  39. 			button{
  40. 				width: 80px;
  41. 				height: 40px;
  42. 				transform: translate(80%,20%);
  43. 				border: 1px solid black;
  44. 				border-radius: 20px;
  45. 				margin: 0px 20px;
  46. 			}
  47. 			
  48. 			input{
  49. 				background: rgba(255,255,255,.5);
  50. 				
  51. 			}
  52. 			a{
  53. 				text-decoration: none;
  54. 			}
  55. 			
  56. 		</style>
  57. 	</head>
  58. 	<body>
  59. 		<form action="" id="myJM" method="post">
  60. 			<h3>白马时光</h3>
  61.             <p>昵称: <input type="text" id="userName" placeholder="输入3-6小程序开发定制个大写或小写字母")></p>
  62.             <p>密码: <input type="password" id="userPwd" placeholder="小程序开发定制不能为标点或文字(长度在6-10)")></p>
  63. 			<p>
  64. 				<button type="button" onclick="fun01()" >登陆</button>
  65. 				<button type="button" onclick="fun02()" >注册</button>
  66. 			</p>
  67. 			<p>
  68. 				忘记密码？<a>点击这里</a>
  69. 			</p>	
  70. 		</form>
  71. 		
  72. 	
  73. 	<script>
  74. 	    //登陆
  75. 	    function fun01() {
  76. 			//小程序开发定制拿到输入框的值
  77. 	       var f1=userName.value;
  78. 		   var f2=userPwd.value;
  79. 		   //正则
  80. 		   var rexName=/^[a-zA-Z]{3,6}$/;
  81. 		   var rexPwd=/^\w{6,10}$/;
  82. 		   //正则匹配
  83. 		   var b1=rexName.test(f1)
  84. 		   var b2=rexPwd.test(f2)
  85. 	       
  86. 		   if(b1&&b2){
  87. 			   location.href="11111.html"
  88. 		   }else{
  89. 			   if(userName.valu==""||userPwd.value==""){
  90. 				   alert("小程序开发定制信息不能为空")
  91. 				   return false;
  92. 			   }
  93. 			   alert("输入错误")
  94. 			   return false;
  95. 		   }
  96. 			}
  97. 	       //注册
  98. 		   function fun02(){
  99. 			   location.href="zhuce.html"
  100. 		   }
  101. 	
  102. 	
  103. 	
  104. 	</script>
  105. 	</body>
  106. </html>

 我的登陆界面用正则判断，昵称输入框的输入要求时3到6个大写或小写字母，placeholder时信息提示，它在输入框中显示，当你在输入框中输入值时，就会消失

 我写了非空判断，在没有输入值就点击登陆时，就会弹出提示框（alert）

 

在输入信息与消息提示不符时，也会 弹出提示框（alert）

二.注册界面

我写的注册界面不怎么全面没有运用二级联动，也没有输入电话号码。有需要的朋友还是去看看别的大佬的d=====(￣▽￣*)b

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>登陆界面</title>
  6. 		
  7. 		<style type="text/css">
  8. 		 
  9. 			html,body{
  10. 				height:100%;
  11. 				margin: 0px;
  12. 			}
  13. 			
  14. 			body{
  15. 				background: url(tupian/2.jpeg) center/cover;
  16. 			}
  17. 			
  18. 			form{
  19. 				color: white;
  20. 				background: rgba(255,255,255,.1);
  21. 				position: absolute;
  22. 				padding: 0px 20px;
  23. 				left: 50%;
  24. 				top: 50%;
  25. 				transform: translate(-50%,-50%);
  26. 				border-radius: 10px;
  27. 				box-shadow: 6px 6px 10px black;
  28. 			}
  29. 			
  30. 			input{
  31. 				border: 1px solid gray;
  32. 				border-radius: 20px;
  33. 				height: 40px;
  34. 				width: 300px;
  35. 			}
  36. 			
  37. 			button{
  38. 				width: 80px;
  39. 				height: 40px;
  40. 				transform: translate(80%,20%);
  41. 				border: 1px solid black;
  42. 				border-radius: 20px;
  43. 				margin: 0px 20px;
  44. 			}
  45. 			
  46. 			input{
  47. 				background: rgba(255,255,255,.5);
  48. 				
  49. 			}
  50. 			a{
  51. 				text-decoration: none;
  52. 			}
  53. 			
  54. 		</style>
  55. 	</head>
  56. 	<body>
  57. 		<form action="" id="myJM" method="post">
  58. 			<h3>白马时光</h3>
  59.             <p>昵称: <input type="text" id="userName" placeholder="输入3-6个大写或小写字母")></p>
  60.             <p>密码: <input type="password" id="userPwd" placeholder="不能为标点或文字(长度在6-10)")></p>
  61. 			<p>
  62. 				<button type="button" onclick="fun01()">提交</button>
  63. 				<button type="reset">清除</button>
  64. 			</p>
  65. 		</form>
  66. 		
  67. 	
  68. 	<script>
  69. 	    //登陆
  70. 	    function fun01() {
  71. 			//拿到输入框的值
  72. 	       var f1=userName.value;
  73. 		   var f2=userPwd.value;
  74. 		   //正则
  75. 		   var rexName=/^[a-zA-Z]{3,6}$/;
  76. 		   var rexPwd=/^\w{6,10}$/;
  77. 		   //正则匹配
  78. 		   var b1=rexName.test(f1)
  79. 		   var b2=rexPwd.test(f2)
  80. 	       
  81. 		   if(b1&&b2){
  82. 			   alert("注册成功")
  83. 		   }else{
  84. 			   if(userName.valu==""||userPwd.value==""){
  85. 			   				   alert("信息不能为空")
  86. 			   				   return false;
  87. 			   }
  88. 			   alert("格式不规范")
  89. 			   return false;
  90. 		   }
  91. 			}
  92. 	
  93. 	</script>
  94. 	</body>
  95. </html>
  96.

 我的注册界面有一个清除按钮，在输入值后可以一键清除

输入值符合要求后点击提交就会提示注册成功 

 

三.购物车界面

我的购物车和商城在同一个界面，所以我说这是一个不完善的购物车

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>购物车</title>
  6. 		<style type="text/css">
  7. 		* {
  8. 		    padding: 0px;
  9. 		    margin: 0px;
  10. 			/* 去除编号 */
  11. 		    list-style: none;
  12. 		}
  13. 		img{
  14. 			width: 250px;
  15. 			height: 250px;
  16. 		}
  17. 		
  18. 		td{
  19. 			font-size: 20px;
  20. 			font-weight: 40px;
  21. 			width: 200px;
  22. 			text-align: center;
  23. 		}
  24. 		.nav {
  25. 		    height: 50px;
  26. 		    background: black;
  27. 		}
  28. 		
  29. 		.nav>li {
  30. 		    color: white;
  31. 		    float: left;
  32. 			/* 文字垂直剧中  只要行高和高度一致 */
  33. 		    line-height: 50px;
  34. 		    padding: 0px 30px;
  35. 		    position: relative;
  36. 		}
  37. 		
  38. 		
  39. 		li {
  40. 		    position: relative;
  41. 		    text-align: center;
  42. 		}
  43. 		
  44. 		.nav>li:hover {
  45. 		    background: blue;
  46. 		}
  47. 		
  48. 		.nav ul {
  49. 		    background: green;
  50. 		    width: 100px;
  51. 		    position: absolute;
  52. 		    left: 0px;
  53. 		    opacity: 0;
  54. 		    transform: rotate(0deg) scale(.5);
  55. 		    transition: .2s;
  56. 		}
  57. 		
  58. 		li li:hover {
  59. 		    background: yellow;
  60. 		}
  61. 		
  62. 		.nav>li:hover ul {
  63. 		    opacity: 1;
  64. 		    transform: rotate(360deg) scale(1);
  65. 		}
  66. 		
  67. 		li::after {
  68. 		    content: "";
  69. 		    position: absolute;
  70. 		    width: 0;
  71. 		    height: 5px;
  72. 		    background: pink;
  73. 		    bottom: 10px;
  74. 		    left: 50%;
  75. 		    transform: translate(-50%, 0);
  76. 		    transition: 1s;
  77. 		}
  78. 		
  79. 		li:hover::after {
  80. 		    width: 80%;
  81. 			body {
  82. 				font-size: 12px;
  83. 				line-height: 25px;
  84. 			}
  85.  
  86. 			table {
  87. 				border-top: solid 1px #666666;
  88. 				border-left: solid 1px #666666;
  89. 			}
  90.  
  91. 			td {
  92. 				text-align: center;
  93. 				border-right: solid 1px #666666;
  94. 				border-bottom: solid 1px #666666;
  95. 			}
  96.  
  97. 			.left {
  98. 				text-align: left;
  99. 				padding-left: 10px;
  100. 			}
  101.  
  102. 			#photo {
  103. 				border: solid 1px #0066CC;
  104. 				width: 200px;
  105. 				text-align: center;
  106. 				z-index: 2;
  107. 				position: absolute;
  108. 				display: none;
  109. 				top: 50px;
  110. 				left: 50px;
  111. 				background-color: #ffffff;
  112. 			}
  113.  
  114. 			#big {
  115.  
  116. 				width: 200px;
  117. 			}
  118.  
  119. 			h1 {
  120. 				/* transform: translate(45%); */
  121. 				text-align: center;
  122. 			}
  123.  
  124. 			table {
  125. 				margin: 0 auto;
  126. 				width: 100%;
  127. 				border: 2px solid #aaa;
  128. 				border-collapse: collapse;
  129. 			}
  130.  
  131. 			table th,
  132. 			table td {
  133. 				border: 2px solid #aaa;
  134. 				padding: 5px;
  135. 			}
  136.  
  137. 			th {
  138. 				background-color: #eee;
  139. 			}
  140. 			.id{
  141. 				font-size: 10px;
  142. 			}
  143. 		</style>
  144. 	</head>
  145. 	<body>
  146.  
  147.          <ul class="nav">
  148.              <li>个人中心 </li>
  149.              <li>首页</li>
  150.          </ul> 
  151.       
  152. 		<table style="width: 100%;" cellspacing="0" cellpadding="0" >
  153. 			<tr>
  154. 				<td>商品图片</td>
  155. 				<td>商品名称</td>
  156. 				<td >商品价格</td>
  157. 				<td>操作</td>
  158. 		 </tr>
  159. 		 <tr>
  160. 		 	<td>
  161. 		 		<img src="img/1.png"/>
  162. 		 	</td>
  163. 		 	<td class="left">飞鸟集</td>
  164. 		 	<td class="sum">26.00元</td>
  165. 		 	<td align="center">
  166. 		 		<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
  167. 		 	</td>
  168. 		 </tr>
  169. 			<tr>
  170. 		 	<td >
  171. 				<img src="img/2.png"/>
  172. 				</td>
  173. 				<td class="left">月亮与六便士</td>
  174. 				<td class="sum">26.80元</td>
  175. 				<td>
  176. 					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
  177. 				</td>
  178. 			</tr>
  179. 			<tr>
  180. 				<td>
  181. 					<img src="img/3.png"/>
  182. 				</td>
  183. 				<td class="left">小王子</td>
  184. 				<td class="sum">32.80元</td>
  185. 				<td align="center">
  186. 					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
  187. 				</td>
  188. 			</tr>
  189. 			<tr>
  190. 				<td>
  191. 					<img src="img/4.png"/>
  192. 				</td>
  193. 				<td class="left">新月集</td>
  194. 				<td class="sum">44.00元</td>
  195. 				<td align="center">
  196. 					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
  197. 				</td>
  198. 			</tr>
  199. 		 <tr>
  200. 		 	<td>
  201. 		 		<img src="img/5.png"/>
  202. 		 	</td>
  203. 		 	<td class="left">茶馆/我这一辈子</td>
  204. 		 	<td class="sum">67.40元</td>
  205. 		 	<td align="center">
  206. 		 		<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
  207. 		 	</td>
  208. 		 </tr>
  209. 			<tr>
  210. 				<td>
  211. 					<img src="img/6.png"/>
  212. 				</td>
  213. 				<td class="left">呼啸山庄</td>
  214. 				<td class="sum">38.00元</td>
  215. 				<td align="center">
  216. 					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
  217. 				</td>
  218. 			</tr>
  219. 		</table>
  220. 		<div id="photo" onmouseout="hidden()" onmousemove="shows()"></div>
  221.  
  222. 		<h1>购物车</h1>
  223. 		<table  id="a">
  224. 			<thead>
  225. 				<tr>
  226. 					<th>商品</th>
  227. 					<th>单价（元）</th>
  228. 					<th>数量</th>
  229. 					<th>金额（元）</th>
  230. 					<th>删除</th>
  231. 				</tr>
  232. 			</thead>
  233. 			<tbody id="goods">
  234. 			</tbody>
  235. 			<tfoot>
  236. 				<tr>
  237. 					<td colspan="3" align="right">总计</td>
  238. 					<td id="total"></td>
  239. 					<td><button onclick="tk(this)">购买</button></td>
  240. 				</tr>
  241. 			</tfoot>
  242. 			
  243. 		</table>
  244. 		
  245.  
  246. 		<script>
  247. 			//第一个表格
  248. 			function show(image, event) {
  249. 				var x;
  250. 				var y;
  251. 				document.getElementById("photo").style.display = "block";
  252. 				x = parseInt(event.clientX) + parseInt(document.documentElement.scrollLeft);
  253. 				y = parseInt(event.clientY) + parseInt(document.documentElement.scrollTop);
  254. 				document.getElementById("photo").style.top = y + "px";
  255. 				document.getElementById("photo").style.left = x + "px";
  256. 				document.getElementById("big").src = "images/" + image;
  257.  
  258. 			}
  259.  
  260. 			function shows() {
  261. 				document.getElementById("photo").style.display = "block";
  262. 			}
  263.  
  264. 			function hidden() {
  265. 				document.getElementById("photo").style.display = "none";
  266. 			}
  267. 			window.onscroll = "show()";
  268.  
  269. 			//------------------------------------------------------------------------------------------------				
  270. 			var map = new Map(); //创建一个集合
  271.  
  272. 			function add_shoppingcart(btn) { //btn就是上面传下来的this
  273. 				//console.log(btn);
  274. 				var ntr = document.createElement("tr");
  275. 				//获取到商品的价格和名称
  276. 				var tr = btn.parentNode.parentNode; //获取到按钮的父亲 
  277. 				var tds = tr.children;
  278. 				//获取商品的名称
  279. 				var name = tds[0].innerHTML;
  280. 				//获取商品的价格
  281. 				var price = tds[2].innerHTML;
  282. 				console.log("name:" + name + ",price:" + price);
  283.  
  284. 				//判断集合中是否又加入商品.如果有不能加入,只能加数量,没有可加入
  285. 				if (map.has(name)) {
  286. 					//如果有不能加入,只能加数量
  287. 					var tr1 = map.get(name);
  288. 					//console.log(tr1);
  289. 					//var btn1=tr1.getElementById("btn1");       
  290. 					var btn1 = tr1.getElementsByTagName("button")[1];
  291. 					//console.log(btn1);
  292. 					jia(btn1);
  293. 				} else {
  294. 					//如果没有该商品,可以正常添加
  295. 					ntr.innerHTML =
  296. 						`
  297. 						<td style="text-align:center;">${name}</td>
  298. 						 <td style="text-align:center;">${price}</td>
  299. 						<td style="text-align:center;">
  300. 						<button onclick="jian(this)">-</button>
  301. 						<input type="text" value="1" size="1" />
  302. 						<button id="btn1" onclick="jia(this)">+</button>
  303. 						</td>
  304. 						<td>${price}</td>
  305. 						<td style="text-align:center;"><button onclick="del(this)">X</buttton></td>`;
  306.  
  307. 					//将name和一行数据存入到集合中
  308. 					map.set(name, ntr);
  309. 					//找到tbody的对象
  310. 					var tbody = document.getElementById("goods");
  311. 					//把上面创建好的一行五列加入到tbody中
  312. 					tbody.appendChild(ntr);
  313. 					sum();
  314. 				}
  315. 			}
  316.  
  317. 			function del(btn) {
  318. 				var tr = btn.parentNode.parentNode;
  319. 				tr.remove(); //删除的是DOM文档中的内容,并没有把集合中的内容删除.
  320. 				var tr = btn.parentNode.parentNode; //获取到按钮的父亲
  321. 				var tds = tr.children;
  322. 				//获取商品的名称
  323. 				var name = tds[1].innerHTML;
  324. 				map.delete(name); //删除的是集合中的内容
  325. 				sum();
  326. 			}
  327.  
  328. 			function jian(btn) {
  329. 				var inpt = btn.nextElementSibling;
  330. 				var amount = inpt.value;
  331. 				if (amount <= 1) {
  332. 					return;
  333. 				} else {
  334. 					inpt.value = --amount;
  335. 					var trs = btn.parentNode.parentNode;
  336. 					console.log(trs);
  337. 					var price = parseInt(trs.children[1].innerHTML);
  338. 					trs.children[3].innerHTML = price * amount;
  339. 					sum();
  340. 				}
  341. 			}
  342.  
  343. 			function jia(btn) { //形式参数
  344. 				//获取+号按钮左边input控件的对象
  345. 				var inpt = btn.previousElementSibling;
  346. 				//console.log(Inpt);
  347. 				var amount = inpt.value;
  348. 				//console.log(amount);
  349. 				inpt.value = ++amount; //把累加后的数放进去
  350. 				var td = btn.parentNode.previousElementSibling;
  351. 				//console.log(td);
  352. 				var price = parseInt(td.innerHTML); //取到单价的值
  353. 				//console.log(price);
  354. 				var rtd = btn.parentNode.nextElementSibling;
  355. 				rtd.innerHTML = price * amount;
  356. 				sum();
  357. 			}
  358.  
  359. 			//求所有商品的累加和
  360. 			function sum() {
  361. 				//获取到tbody的对象
  362. 				var tbody = document.getElementById("goods");
  363. 				var trs = tbody.children; //得到tbody的孩子
  364. 				var total = 0; //用于求累加和
  365. 				for (i = 0; i < trs.length; i++) { //取到每一个商品的价格
  366. 					var price = trs[i].children[3].innerHTML;
  367. 					total = total + parseInt(price);
  368. 				}
  369. 				var t = document.getElementById("total");
  370. 				//然后把total的值放入到t对象中
  371. 				t.innerHTML = total;
  372. 			}
  373. 			
  374. 			function tk(btn){
  375.          
  376. 		 
  377. 			}
  378. 			</script>
  379. 	</body>
  380. </html>

看到图片上黑色的一行工具栏了吗，在代码中写了呦 

在点击加入购物车后 ，商品的信息会在购物车显示，点击两次数量会加一，在购物车数量点加减数量会变化

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发