javascript 实现购物车页面

hiuman

浏览: 52508 次
性别:
来自: 广州

最近访客更多访客>>

yMeng

xianxianzi08

yangxiaochenIT

jayjyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript

跟商城有关系的网站，难免会有购物车的结账界面。
我用javascript实现了增加数量/减少数量,实时计算总金额，删除该商品，选中商品/反选商品/全选/全反选...的操作。
欢迎指点！~
效果如图：（图片有点大，可以到这里看 http://hiuman.iteye.com/picture/136625）

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

代码：

<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;

	}

}