购物车的一个方法

最新推荐文章于 2023-05-13 13:26:23 发布
最新推荐文章于 2023-05-13 13:26:23 发布
阅读量148 收藏
点赞数
分类专栏： javaScript html 文章标签： css js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fdbyd/article/details/107466906
版权

我个人的一个购物车的记录方法

购物车
在这里插入图片描述
成品
在成品页面中顶部的横条，底部的立刻预约，商品的内容，角标=商品单价，结算页面，底部结算内的商品总价和商品数量。
其中在进行内容的布置的时候首先将首页和立刻预约这个给做出来固定好样式，然后在设置一个div用来存储数组并且设置好样式在这一步将角标隐藏起来。
结算页面里也是一个内容的输出和外面的商品是一样的都是多了两个button按钮在进行调整样式HTML和css的内容输出完毕。
其中角标，结算页面，底部结算都是隐藏起来。在做完全部的页面的内容的样式的时候将角标，底部结算和结算页面的这三个将其隐藏起来。

在这里插入图片描述
初始
HTML和css的页面做好后，就是将js数据输出HTML页面上去，第一个输出的就是商品的全部内容，利用for循环循环输出到页面上。
结算页面 上的内容也是要用到for循环，循环输出到页面上。
在这里插入图片描述
第二步
添加点击事件。
给商品的整个div都添加一个点击事件里面要进行底部结算的显示，角标数量的输出和显示，以及结算页面的输出。
最后进行代码的呈现：

	<style type="text/css">/* css样式 */
		body {
			margin: 0;
			padding: 0;
			background-color: #e8e8e8;
			height: 5000px;
		}

		#head {
			width: 100%;
			background-color: #00ffff;
			height: 200px;
			color: #FFFFFF;
			margin-top: -34px;
			text-align: center;
			position: fixed;
		}

		#head h1 {
			font-size: 75px;
			padding-top: 15px;
		}

		#bottom {
			background-color: #FFFFFF;
			width: 100%;
			height: 150px;
			color: #FFFFFF;
			margin-top: 1000px;
			text-align: center;
			display: inline-block;
			position: fixed;
			justify-content: flex-start;
		}

		#bottom img {
			width: 100px;
		}

		#bottom p {
			width: 300px;
		}

		#bottom h1 {
			width: 200px;

		}

		.shangpin {
			width: 100%;
			line-height: 5px;
		}

		.shangpin img {
			width: 100%;
			margin-top: 200px;
		}

		.shangpin p {
			font-size: 30px;
		}

		.shangpin span {
			font-size: 50px;
			position: fixed;
			margin-top: -200px;
			border: #FF0000 1px solid;
			background-color: red;
			padding: 0px 15px 0px 15px;
			border-radius: 50%;
		}

		.mmd {
			width: 45%;
			margin-left: 3%;
			display: inline-block;
		}

		.mmd span {
			width: 40px;
			height: 40px;
			color: #000000;
			border-radius: 50%;
			text-align: center;
			position: absolute;
			font-size: 30px;
			padding-top: 15px;
			padding-bottom: -30px;
			margin-top: -550px;
			background-color: aqua;
			margin-left: -25px;
			display: none;
		}

		.colors {
			color: #FF0000;
		}

		.last_nav {
			background-color: #FFFFFF;
			width: 100%;
			position: fixed;
			bottom: 0;
			display: none;
		}

		.last_nav img {
			width: 15%;
		}

		.total {
			font-size: 40px;
			position: fixed;
			margin-top: -200px;
		}


		.total p {
			border: #FF0000 1px solid;
			background-color: red;
			padding: 0px 15px 0px 15px;
			border-radius: 50%;
		}

		.total_prices {
			position: fixed;
			display: inline-block;
			font-size: 50px;
			margin-left: 150px;
		}

		#total_price {
			margin-left: 25px;
			color: #FF0000;
			font-size: 40px;
		}

		.order {
			background-color: aqua;
			width: 30%;
			position: fixed;
			font-size: 50px;
			margin-top: -150px;
			margin-left: 70%;
		}

		.orders {
			background-color: aqua;
			width: 100%;
			position: fixed;
			font-size: 50px;
			bottom: 0;
		}

		#none {
			position: fixed;
			width: 100%;
			height: 1000px;
			bottom: 0;
			background-color: #FFFFFF;
			display: none;
		}

		#none_n {
			display: flex;
			justify-content: space-around;
		}

		#none_n h1 {
			color: #00ff00;
			font-size: 50px;
		}

		#none_n a {
			display: inline-block;
			text-decoration: none;
			padding-top: 45px;
		}

		#none_n span {
			font-size: 50px;
			color: #ff0000;
			padding-top: 45px;
		}

		.none_m {
			margin-left: 10%;
			width: 100%;
			font-size: 50px;
			display: none;
		}

		.none_m input {
			border-style: none;
			outline: none;
			width: 50px;
			height: 50px;
			font-size: 50px;
		}

		.none_m img {
			width: 10%;

		}

		.none_m button {
			width: 50px;
			height: 50px;
			font-size:50px;
		}
	</style>
	<body>
		<div id="head">
			<h1>首页</h1>
		</div>
		<div class="shangpin"></div>
		<div id="none">
			<div id="none_n">
				<a href=""><span>清空</span></a>
				<h1>结算页面</h1>
				<span onclick="mms()">关闭</span>
			</div>
			<div class="none_b"></div><!-- 结算页面的内容 -->
		</div>
		<div class="orders">
			<p style="line-height: 50%;text-align: center;">立即预约</p>
		</div>
		<div class="last_nav">
			<img src="./img/gwc/购物车.png" onclick="mma()">
			<div class="total">
				<p id="sum">0</p>
			</div>
			<div class="total_prices">
				预估价格￥<span id="total_price">0</span><br>
				不含运费
			</div>
			<div class="order">
				<p style="line-height: 50%;text-align: center;" onclick="alertfun()">立即预约</p>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var clothes = [{
			img: "img/gwc/u=1236984783,3291646751&fm=26&gp=0.jpg",
			name: "YSL唇釉",
			price: 320,
			buttum: '-',
			num: 0,
			buttun: '+',
		}, {
			img: "./img/gwc/u=1825026782,2394796598&fm=26&gp=0.jpg",
			name: "Amani香水",
			price: 199,
			buttum: '-',
			num: 0,
			buttun: '+',
		}, {
			img: "./img/gwc/u=2744336323,3645277210&fm=26&gp=0.jpg",
			name: "Mac口红",
			price: 170,
			buttum: '-',
			num: 0,
			buttun: '+',
		}, {
			img: "./img/gwc/u=3071406061,411961126&fm=26&gp=0.jpg",
			name: "TF口红",
			price: 450,
			buttum: '-',
			num: 0,
			buttun: '+',
		}, {
			img: "./img/gwc/下载.jpg",
			name: "Dior999",
			price: 310,
			buttum: '-',
			num: 0,
			buttun: '+',
		}];
		var mmd = document.getElementsByClassName("shangpin")[0];
		for (var i = 0; i < clothes.length; i++) {
			var div = document.createElement('div'); //创建div
			var img = document.createElement('img'); //创建img
			var p = document.createElement('p'); //创建p标签
			var m = document.createElement('p'); //创建p标签单价
			num = document.createElement('span'); //创建span标签角标
			div.className = 'mmd'; //给创建的div+class名称
			img.src = clothes[i].img; //把img输出到img标签
			p.innerHTML = clothes[i].name; //把name输出到p标签
			m.innerHTML = clothes[i].price; //把price输出到p标签
			m.className = 'colors';
			num.className = "mmw";
			num.innerHTML = 0;
			// console.log(clothes[i].num)
			div.appendChild(img); //把img插入到div
			div.appendChild(p); //把p标签插入到div
			div.appendChild(m); //把p标签插入到div
			div.appendChild(num); //把span标签插入到div
			mmd.appendChild(div); //把小div中插入大的div
			// console.log(mmd)
			(function(i) {
				document.getElementsByClassName('mmd')[i].onclick = function() {
					var summ = document.getElementById("sum").innerHTML - 0; //总数
					var total_prices = document.getElementById("total_price").innerHTML - 0; //总价
					summ++;
					clothes[i].num++;
					document.getElementsByClassName('mmw')[i].innerHTML = clothes[i].num;
					console.log(clothes[i].num);
					document.getElementById("sum").innerHTML = summ;
					document.getElementById("total_price").innerHTML = total_prices += clothes[i].price;
					document.getElementsByClassName('last_nav')[0].style.display = "block";
					document.getElementsByClassName("mmw")[i].style.display = "block";
					document.getElementsByClassName("none_m")[i].style.display = "block";
					document.getElementsByClassName("none_z")[i].innerHTML = clothes[i].num;
				}
			})(i)
		}
		var none_b = document.getElementsByClassName("none_b")[0];
		var none_m = "";
		for (var i = 0; i < clothes.length; i++) {
			none_m += '<div class="none_m">';
			none_m += '<img src=' + clothes[i].img + '>' + '<span>' + clothes[i].name + '</span>' +
				'<button οnclick="pdh(' + i + ')">' + clothes[i].buttum + '</button>' + 
				'<span class="none_z">' + clothes[i].num +'</span>' +
				'<button οnclick="asb(' + i + ')">' + clothes[i].buttun + '</button>';
			none_m += '</div>';
			none_b.innerHTML = none_m;
		}

		function asb(i) {
			var summ = document.getElementById("sum").innerHTML - 0; //总数
			var total_prices = document.getElementById("total_price").innerHTML - 0; //总价
			summ++;
			clothes[i].num++;
			document.getElementsByClassName('mmw')[i].innerHTML = clothes[i].num;
			document.getElementById("sum").innerHTML = summ;
			document.getElementById("total_price").innerHTML = total_prices += clothes[i].price;
			document.getElementsByClassName("mmw")[i].style.display = "block";
			document.getElementsByClassName("none_m")[i].style.display = "block";
			document.getElementsByClassName("none_z")[i].innerHTML = clothes[i].num;
		}

		function pdh(m) {
			var summ = document.getElementById("sum").innerHTML - 0; //总数
			var total_prices = document.getElementById("total_price").innerHTML - 0; //总价
			summ--;
			clothes[m].num--;
			document.getElementsByClassName('mmw')[m].innerHTML = clothes[m].num;
			document.getElementById("total_price").innerHTML = total_prices -= clothes[m].price;
			document.getElementsByClassName("none_z")[m].innerHTML = clothes[m].num;
			if (clothes[m].num == 0) {
				// alert("hjg")
				document.getElementById("sum").innerHTML = summ;
				document.getElementsByClassName('none_m')[m].style.display = "none";
				document.getElementsByClassName("mmw")[m].style.display = "none";
				document.getElementsByClassName('last_nav')[0].style.display = "none";
			}
		}
		

		function mma() {//结算页面显示
			var none = document.getElementById("none"); 
			none.style.display = "block";
		}

		function mms() {//结算页面隐藏
			var none = document.getElementById("none");
			none.style.display = "none";
			document.getElementsByClassName('last_nav')[0].style.display = "none";
		}

		function alertfun() {
			var total_prices = document.getElementById("total_price").innerHTML - 0; //总价
			alert("您已选择了" + total_prices + "元的商品")
			document.getElementsByClassName('last_nav')[0].style.display = "none";
		}
	</script>
荧娅
关注
专栏目录
java开发一个购物车实验,JAVAWEB购物车实验报告.doc
weixin_42297347的博客
03-15 1328
您所在位置：网站首页 > 海量文档&nbsp>&nbsp计算机&nbsp>&nbspJavaJAVAWEB购物车实验报告.doc14页本文档一共被下载：次,您可全文免费在线阅读后下载本文档。 下载提示1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。2.该文档所得收入(下载...
java清空购物车方法_Javaweb网上商城项目实战（21）删除和清空购物车
weixin_33183792的博客
02-23 2931
删除购物车原理分析具体实现在cart.jsp中绑定点击删除事件在页面中的删除标签里面加一个id编写删除的方法在CartServlet中添加删除购物车商品的方法removeCartItem// removeCartItempublic String removeCartItem(HttpServletRequest req, HttpServletResponse resp) throws Exce...
渡一大师课笔记（重点：事件循环、浏览器渲染原理）
qq_53461589的博客
05-13 9979
reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow。repaint 的本质就是重新根据分层信息计算了绘制指令。
Web前端学习笔记——HTML5与CSS3之购物车宣传案例
唯恋殊雨的博客
09-25 2092
《购物车宣传》案例 综合运用h5c3知识且进行一定扩展 能使用jquery完成网页常见交互行为 实际工作开发当中能应对活动宣传页 全屏切换效果 通过鼠标的滚轮 切换全屏页面 使用fullpage来完成 使用动画 （js实现动画，css3实现动画） 一个是帧动画 一个是补间动画 什么是帧动画：使用定时器 每隔一段时间 更改当前元素的状态 什么是补间动画：过渡(加过渡只要状态发生改...
购物车基本功能详解
lcy164261917的博客
05-21 1万+
购物车模块实现的说明：四种情况：1）用户没登陆用户名和密码,添加商品, 关闭浏览器再打开后 不登录用户名和密码　问：购物车商品还在吗？ 2）用户登陆了用户名密码,添加商品,关闭浏览器再打开后 不登录用户名和密码　问:购物车商品还在吗？   3）用户登陆了用户名密码,添加商品, 关闭浏览器,然后再打开,登陆用户名和密码  问:购物车商品还在吗？4）用户登陆了用户名密码,添加商品, 关闭浏览器 外地老...
购物车的实现方法
qq_43570940的博客
09-20 268
MainActivity 适配 adapter.setHoleback(new MyAdapter.Holeback() { @Override public void gethoback() { boolean ck = true; for (int i = 0; i < data.size(); i++) {...
购物车思路laravel
apppws的博客
11-10 2541
购物车思路图： ##数据库表： goods 商品表 字段名称 类型 注释 id int 自增id cat_id1 mediumint 一级分类ID cat_id2 mediumint 二级分类ID cat_id3 mediumint 三级分类ID brand_id mediumint 品牌ID goods_name varchar 商品名称 maprice...
java开发一个购物车实验_JAVA WEB 购物车实验报告
weixin_29204205的博客
02-26 2115
南昌大学实验报告学生姓名：张志煋学号：7101011001 专业班级：网工121班实验类型：□验证□综合□设计□创新实验日期：2015-4-15 实验成绩：一、实验项目名称购物车项目二、实验目的通过完成购物车的项目，初步学会并掌握JSP+JavaBean项目开发三、实验基本原理本实验运用的技术主要有：HTML、JSP、MySQL数据库技术、JavaBean、以及DAO 接口、DAO实现类、DAO工...
设计并实现一个简易的购物车
weixin_53468039的博客
10-17 1441
设计并实现一个简易的购物车
使用原生JS实现一个购物车功能
TW_NN的专栏
02-20 6805
一、两个实用的数组函数 1.1 Array.every() every()方法传入回调函数，这个回调函数有三个参数，分别是： item:用于测试的当前值； index:当前测试值的索引，这是一个可选参数； every:用于测试的数组，这也是一个可选参数。 该方法的返回值是一个布尔值，如果回调函数的每一次的测试值返回的结果都是true，那么就返回 true ，否则返回 false。 简单理解即：只要有个值不满足条件，就它的返回值就是false了，这个跟逻辑判断的“逻辑与”非常像。 1.2 A
使用RN Animated做一个“添加购物车”动画的方法
12-11
分享一下项目本身比较重要的一个交互动画的做法, RT。 这次我们就不装大象了，因为我真的买了冰箱 =,= 本着言简意赅，不故弄玄虚的原则，依然是三步： 第 1 步：通过 Animated 创建合成动画的 View。仔细观察，...
c#利用Session对象实现购物车的方法示例
08-25
这个示例提供了一个非常详细的示例代码，帮助我们更好地理解如何使用 Session 对象来存储购物车中的商品信息，并实现了一个功能丰富的购物车控件。这个示例不仅对学习 C# 语言和 ASP.NET 框架有很大的帮助，也可以...
eclipse的web项目实现Javaweb购物车的方法
08-25
只有我们解决了这些问题，我们才能实现一个完善的购物车系统。 实现eclipse的web项目实现Javaweb购物车需要我们首先了解问题本质，然后创建实体类，最后解决常见问题。只有我们遵守这些步骤，我们才能实现一个完善...
一个比较完善的php购物车类库.zip
07-11
1. **对象化设计**：购物车类库基于面向对象编程（OOP）原则，通过创建一个或多个类，如`Cart`和`CartItem`，来分别代表购物车和购物车内单个商品项。这些类将包含属性（如商品ID、数量、单价等）和方法（如添加商品...
input的23种type类型
热门推荐
fdbyd的博客
01-31 2万+
目录 全部类型 传统类型 新增类型 全部类型 text 定义单行文本输入框 password 定义密码输入框 file 定义文件上传控件 radio 定义单选按钮 checkbox 定义复选框 hidden 定义隐藏的输入字段 button 定义按钮 image 定义图像形式的提交按钮 reset 定义重置按钮,重置按钮会清除表单中的所有数据 submit 定义提交按钮,提交按钮会把表单数据发送到服务器 color 定义调色板 tel 定义包含电话号码的输入域 email 定义包含email地址的
理论知识总结（js和css）
fdbyd的博客
01-28 2099
目录 css 选择器 一：类选择器 class元素可以有多个值，中间用空格隔开。一个文件中，可以有多个相同的class值。 <p class="first done"></p> .first{ background-color: red; } 二：ID选择器 #(哈希)符号加上id名称组成。但是单个文件中id值要保持唯一。一个element中只设置一个id。 <p id="polite"></p> #polite{ ..
懒加载是什么？有什么用？
fdbyd的博客
07-22 1884
什么是懒加载，在什么时候用到懒加载？ 懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载。 概括----- 什么时候能用到懒加载？ Web应用程序做的最多就是和后台数据库交互，而查询数据库是种非常耗时的过程。当数据库里记录过多时，查询优化更显得尤为重要。为了解决这种问题，有人提出了缓存的概念。缓存就是将用户频繁使用的数据放在内存中以便快速访问。在用户执行一次查询操作后，查询的记录会放在缓存中。当用户再次查询时，系统...
前端性能优化方法和详解
fdbyd的博客
08-16 1813
一、为什么要优化前端的性能 优化的目的在于让页面加载的更快，对用户操作响应更及时，为用户带来更好的用户体验，对于开发者来说优化能够减少页面请求数，能够节省资源。 前端优化的方法有很多种，可以将其分为两大类，第一类是页面级别的优化如http请求数，内联脚本的位置优化等，第二类为代码级别的优化，例Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。 什么是前端性能优化（what）？ 从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，..
js事件和事件流和dom事件流
fdbyd的博客
07-13 760
什么是事件 事件就是用来触发函数的一个开关 <select id="chose1" onchange="change(selectedIndex)"> </select> <select id="chose2"></select> <script> function change(obj) { chose2.length = y[obj].length; for (var j = 0; j < y[obj].l
用vue写一个购物车
最新发布
08-13
Vue 是一个前端 JavaScript 框架，下面是一个简单的购物车的例子： 1. 安装 Vue： ``` npm install vue ``` 2. 创建一个 Vue 实例： ``` 购物车 <li v-for="item in cart">{{ item.name }} - {{ item....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值