javascript 实现购物车页面

跟商城有关系的网站，难免会有购物车的结账界面。

我用javascript实现了增加数量/减少数量,实时计算总金额，删除该商品，选中商品/反选商品/全选/全反选...的操作。

欢迎指点！~

效果如图：

用到的素材：加号减号商品图删除图标选中的图标和没选中的图标

代码：

<body onselectstart="return false;" style="-moz-user-select:none;">

	<table>

		<thead>

			<tr>

                <th><input type="checkbox"></th>

                <th>商品信息</th>

                <th>数量</th>

                <th>单价<span>（元）</span></th>

                <th>金额<span>（元）</span></th>

                <th>操作</th>

            </tr>

		</thead>

		<tbody>

			<tr>

                <td><input type="checkbox"></td>

                <td>

                    <img src="./cart/good.png">

                    <p>小呀小苹果（一）</p>

                </td>

                <td><span class="add"></span><span class="num">3</span><span class="dec"></span></td>

                <td class="per">￥<span>1900</span></td>

                <td class="money">￥<span>3800</span></td>

                <td><a class="del"></a></td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>

                    <img src="./cart/good.png">

                    <p>小呀小苹果（二）</p>

                </td>

                <td><span class="add"></span><span class="num">3</span><span class="dec"></span></td>

                <td class="per">￥<span>1900</span></td>

                <td class="money">￥<span>3800</span></td>

                <td><a class="del"></a></td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>

                    <img src="./cart/good.png">

                    <p>小呀小苹果（三）</p>

                </td>

                <td><span class="add"></span><span class="num">3</span><span class="dec"></span></td>

                <td class="per">￥<span>1900</span></td>

                <td class="money">￥<span>3800</span></td>

                <td><a class="del"></a></td>

            </tr>

		</tbody>

		<tfoot>

			<tr>

				<td></td>

				<td>已选：<span class="choosen">0</span>件&nbsp;&nbsp;共<span class="total">0</span>元</td>

				<td></td>

				<td></td>

				<td></td>

				<td><button class="sure">结账</button></td>

			</tr>

		</tfoot>

	</table>

</body>

*{ margin: 0;padding: 0;list-style: none;font-size: 16px;font-family: 'arial';font-weight: normal; }

table{ width: 1020px;margin: 0 auto;border: 1px solid gray;margin-top: 30px;border-collapse: collapse;text-align: center; }

table tr{ height: 100px;line-height: 100px; }

thead{ background: black;color: white; }

thead tr,tfoot tr{ height: 40px;line-height: 40px; }

table img{ float: left;width: 65px;height: 65px;margin-top: 18px; }

table input[type="checkbox"]{ width: 32px;height: 32px;-webkit-appearance: none;background: url(./cart/checkbox.png) no-repeat center center;vertical-align:middle }

tbody td:nth-child(1){ width: 7%; }

tbody td:nth-child(2){ width: 35%; }

tbody td:nth-child(3){ width: 13%; }

tbody td:nth-child(4){ width: 15%; }

tbody td:nth-child(5){ width: 15%; }

tbody td:nth-child(6){ width: 15%; }

tbody tr{ border-bottom: 1px solid black; }

table .add,table .dec,table .del{ display: inline-block;width: 14px;height: 21px;cursor: pointer; }

table .add{ background: url(./cart/add.png) no-repeat center center; }

table .dec{ background: url(./cart/dec.png) no-repeat center center; }

table .num{ display: inline-block;width: 57px;margin: 0 18px;height: 39px;line-height: 39px;border: 1px solid #b0b0b0;background: #d4d4d4; }

table .del{ width: 18px;background: url(./cart/del.png) no-repeat; }

table .money,table .total{ color: red; }

table .choosen{ color: #3083ff; }

table .sure{ width: 100%;height: 100%;background: #3083ff;color: #fff;border: none;cursor: pointer; }

input[type='checkbox']:checked{ background: url(./cart/check.png) no-repeat center center; }

window.onload = function(){

	// 按顺序为：list个数 加 数量 减 删 选择框 金额 单价 选中的个数

	// list个数 不包括thead

	var oListNumber = document.getElementsByClassName('add').length;

	var oAdds = document.getElementsByClassName('add');

	var oNums = document.getElementsByClassName('num');

	var oDecs = document.getElementsByClassName('dec');

	var oDels = document.getElementsByClassName('del');

	var oInputs = document.getElementsByTagName('input');

	var oMoneys = document.getElementsByClassName('money');

	var oPers = document.getElementsByClassName('per');

	var oAllChecked = false; //全选

	var othercheckbox =0; //除了全选以外的其他checkbox

	changeMoney();

	// checkbox点击事件

	for(var i =0;i<oInputs.length;i++){

		(function(i){

			oInputs[i].onclick = function(){

				// 判断除了全选以外的checkbox

				if(i!=0){

					if(oInputs[i].checked ==true){

						othercheckbox++

					}else{

						othercheckbox--

					}

				}

				// 判断是否全选

				if(othercheckbox == oListNumber){

					oInputs[0].checked = true;

				}else{

					oInputs[0].checked = false;

				}

				// 判断是否选择了全选checkbox

				if(i==0){

					oAllChecked = !oAllChecked;

					for(var j=0;j<oInputs.length;j++){

						oInputs[j].checked=oAllChecked;

					}

					if(oAllChecked){

						othercheckbox = oListNumber

					}else{

						othercheckbox = 0;

					}

				}

				changeTotal()

			}

		})(i)

	}

	// add事件

	for(var i =0;i<oAdds.length;i++){

		(function(i){

			oAdds[i].onclick = function(){

				oNums[i].innerText = parseInt(oNums[i].innerText) +1;

				changeMoney()

				changeTotal()

			}

		})(i)

	}

	// dec事件

	for(var i =0;i<oDecs.length;i++){

		(function(i){

			oDecs[i].onclick = function(){

				if(oNums[i].innerText != '0'){

					oNums[i].innerText = parseInt(oNums[i].innerText) -1;

				}

				changeMoney()

				changeTotal()

			}

		})(i)

	}

	// add事件和dec事件伴随的金额改变事件

	function changeMoney(){

		var oPerSpan =[];  //单价

		var oMoneySpan=[];  //金额

		for(var i=0;i<oListNumber;i++){

			oPerSpan[i] = oPers[i].getElementsByTagName('span')[0].innerText;

			oMoneySpan[i] = oMoneys[i].getElementsByTagName('span')[0];

			oMoneySpan[i].innerText = (parseInt(oNums[i].innerText)*parseInt(oPerSpan[i]))

		}

	}

	// del事件

	for(var i =0;i<oDels.length;i++){

		(function(i){

			oDels[i].onclick = function(){

				var thisdom = oDels[i].parentNode.parentNode;

				var tbody = thisdom.parentNode;

				tbody.removeChild(thisdom)

				changeTotal()

			}

		})(i)

	}

	// 总数量 总金额

	function changeTotal(){

		var oChoosen = document.getElementsByClassName('choosen')[0];

		var oTotal = document.getElementsByClassName('total')[0];

		var sumNUM = 0

		var sumTOTAL =0

		for(var i=1;i<oInputs.length;i++){

			if(oInputs[i].checked){

				sumNUM = parseInt(oNums[i-1].innerText) + parseInt(sumNUM);

				sumTOTAL = parseInt(oMoneys[i-1].getElementsByTagName('span')[0].innerText) +parseInt(sumTOTAL)

			}

		}

		oChoosen.innerText = sumNUM;

		oTotal.innerText = sumTOTAL;

	}

}

javascript 实现购物车页面的更多相关文章

淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
FineUI小技巧（1）简单的购物车页面
起因最初是一位 FineUI 网友对购物车功能的需求,需要根据产品单价和数量来计算所有选中商品的总价. 这个逻辑最好在前台使用JavaScript实现,如果把这个逻辑移动到后台C#实现,则会导致过多 ...
前端Vue项目——购物车页面
一.加入购物车的两种策略 1.加入购物车接口在 src/restful/api.js 中写入添加购物车接口: // 加入购物车的接口 export const shopCart = (params) ...
利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变
查看本章节查看作业目录需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变当用户单击"+" ...
淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
javascript实现当前页面截屏
javascript实现当前页面截屏一.前言有客户要求能对用户当前页面进行指定区域截屏,类似qq截屏的实现效果.比如用户在处理工作的时候,将当前页面录入后的一些信息进行截图下载保存.但又不能安装任 ...
使用javascript实现html页面直接下载网盘文件
公司新建一网站,用的是商派的易开店系统.设计方案中有一个是下载文件的功能,但易开店不支持上传资源,所以无法下载本站资源. 于是想到了网盘资源下载,有些网站是把页面链接到网盘资源文件下载页面,进行二次跳 ...
html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
HTML里的哪一部分Javascript 会在页面加载的时候被执行？
最近遇到一个问题:HTML里的哪一部分Javascript 会在页面加载的时候被执行()A : 文件头部 B : 文件尾 C : <head>标签部分 D : <body>标签 ...

随机推荐

剑指offer-二进制中1的个数11
题目描述输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. class Solution: def NumberOf1(self, n): # write code here coun ...
Mapper的方式总结
Mapper的方式总结: <mappers>  <package name=&quo ...
安装CentOS 5.x与多重引导小技巧
不建议使用Virtualbox安装Linux来学习!本处是学习在计算机上安装Linux. 但现在条件有限,就先使用Virtualbox练习!
pta结构体链表作业
一.PTA实验作业 7-2 1. 本题PTA提交列表 2. 设计思路题目要求按照年龄从大到小的顺序依次输出,于是我只要用冒泡法把结构体变量从大到小排列就可以了. 3.本题调试过程碰到问题及PTA提交 ...
[转] UnityVS(Visual Studio Tools For Unity)的安装与使用
一些废话 Unity 的开发者们,尤其是微软系的Unity开发者们,用Mono是不是烦死了?你是不是跟我一样,用vs来写代码,用Mono来跟踪调试?好麻烦啊好麻烦. 也许你会说,傻逼你不会用Unity ...
延迟加载(Lazyload)三种实现方式
定义:延迟加载也称为惰性加载,即在长网页中延迟加载图像.用户滚动到它们之前,视口外的图像不会加载.这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快.在某些情况下,它还可以帮助减少服务器负载. ...
css3的counter的用法
很早之前,计数器仅存在于ul,ol等元素中,如何想给其他元素增加计数,就只能通过list-style-image,或者background-image来实现.不过现在css3增加了counter属性, ...
ArcGis下的叠加分析
1矢量与矢量叠加的话就用ToolBox里有Overlay: 2如果是矢量和栅格叠加的话用Spatial analysis模块中的 zonal statistics: 3还有就是栅格与栅格的叠加S ...
[洛谷P2711]小行星
题目大意:有$n$颗行星,每颗行星的位置是$(x,y,z)$.每次可以消除一个面(即$x,y$或$z$坐标相等)的行星,求消除这些行星的最少次数. 题解:最小割,对于每一颗小行星,从 x 面的出点向 ...
cdq分治入门学习 cogs 1752 Mokia nwerc 2015-2016 G 二维偏序
/* CDQ分治的对象是时间. 即对于一个时间段[L, R],我们取mid = (L + R) / 2. 分治的每层只考虑mid之前的修改对mid之后的查询的贡献,然后递归到[L,mid],(mid, ...

javascript 实现购物车页面

javascript 实现购物车页面的更多相关文章

随机推荐

热门专题