JavaScript实现的购物车效果-好友列表效果

JavaScript实现的购物车效果,当然这个效果可以运用在好多地方,比如好友的选择,人力资源模块,计算薪资,人员的选择等等。下面看类似某种购物车的效果图:

JavaScript实现的购物车效果-好友列表效果

code:

goodsCar.js:这个js写成了一个单独的文件。主要是控制上面的列表显示的。

window.onload=function(){
	initStore();
};
var goods=["火腿","美女","御姐","火星一日游","跑车"];
//==================为什么要定义一个临时存储区要想清楚哦=============
var temps=[];//临时存储
//初始化仓库select 添加内容
function initStore(){
	var select_store=document.getElementById("select_store");
	for(var x=0;x<goods.length;x++)
		{
		//创建option对象
		var optionNode=document.createElement("option");
		optionNode.innerHTML=goods[x];
		select_store.appendChild(optionNode);
		}	
}
//------------------------------------
function selectGoods(){
	//获取store的select列表对象
	var out_store=document.getElementById("select_store");
	//获取我的商品的select列表对象
	var in_store=document.getElementById("select_my");
	moveGoods(in_store,out_store);
}
function deleteGoods(){
	//1.记录下要移动的产品
	var in_store=document.getElementById("select_store");
	var out_store=document.getElementById("select_my");
	moveGoods(in_store,out_store);
}
/*
 * 移动商品:
 1.inSotre:将商品移入仓库
 2.outStore:将商品移出仓库
 */
//移动
function moveGoods(inStore,outStore){
	//===============清空数组缓存==================
	temps=[];
	//循环获取store中的所有列表项
	for(var x=0;x<outStore.options.length;x++)
		{
			var option=outStore.options[x];
			//将被选中的列表项添加到临时数组中存储
			if(option.selected){
				temps.push(option);//临时数组中添加数据,为了避免重复,数组缓存要清空
			}
		}
	//2.在store列表中删除已经选中的物品
	//3.在购物车中添加已经选择的产品
	for(var x=0;x<temps.length;x++)
		{
		//每一个节点都只有一个父节点
			//先删除后添加
			outStore.removeChild(temps[x]);
			//添加
			inStore.appendChild(temps[x]);
		}
}


下面是主文件;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
border:10px;
}
select{
width:200px;
height:400px;
}
#order_area{
display:none;
}
</style>
<script type="text/javascript" src="goodsCar.js"></script>
<script type="text/javascript">
var selectedGoods=[];//缓存区域
//根据购物车中的产品,生成订单
function createOrder(){
	//显示订单区域
	var orderAreaDiv=document.getElementById("order_area");
	/*div对象下面有一个成员对象style,通过这个style对象可以控制div的样式
	display:表示这个对象或者叫div这个元素在文档中是否渲染
	可用的值:
	block: Object is rendered as a block element. 
	none :Object is not rendered. 
	.......
	在这个实例中,就用以上两个值就ok了,上面内容来自文档
	*/
	//用节点对象的属性操作样式
	orderAreaDiv.style.display="block";
	var select_my=document.getElementById("select_my");
	for(var x=0;x<select_my.options.length;x++){
	//
	var optNode=select_my.options[x];
	selectedGoods.push(optNode.innerHTML);
	}
	//遍历产品,生成订单
	for(var x=0;x<selectedGoods.length;x++){
	///*动态生成数据的模板
	//<div><!--name属性便于查找-->
	//<input type="checkbox" name="myorder"><span>大帅哥 20元</span>
	//</div>
	//*/
	var divNode =document.createElement("div");
	orderAreaDiv.appendChild(divNode);
	var inputMyOrder=document.createElement("input");
	inputMyOrder.setAttribute("type","checkbox");
	inputMyOrder.setAttribute("name","myorder");
	divNode.appendChild(inputMyOrder);
	var spanNode=document.createElement("span");
	//随机生成一个50到100的随机数
	var price=Math.floor(Math.random()*50+50);
	inputMyOrder.value=price;
	spanNode.innerHTML=selectedGoods[x]+" "+price;
	divNode.appendChild(spanNode);
	//inputMyOrder.appendChild(spanNode);错误,因为span和input是同级元素
	
	//生组装好的divNode添加到 orderlist中
	var order_list = document.getElementById("order_list");
	order_list.appendChild(divNode);
	}
}
/*
 * 再生成的订单中仍然可以选择哪些订单是准备付款的,然后进行付款
 三种选择方式:全选:1,不选:0,反选:2;checkbox自己的功能可以多选
 */
 function mySelect(arg){
	//getElementsByName:根据 NAME 标签属性的值获取对象的集合。
	var orders = document.getElementsByName("myorder");
	//在写代码的过程中错误的运用了下面这一句话
	//getElementsByTagName:获取基于指定元素名称的对象集合。
	//var orders=document.getElementsByTagName("myorder");
	for(var x=0;x<orders.length;x++){
		var order=orders[x];
		if(arg=="1"){
			order.checked=true;
		}
		else if(arg=="0"){
			order.checked=false;
		}
		else if(arg=="2"){
			order.checked=!order.checked;
		}
	}	
}
//结账买单,这里面用对话款弹出的所有商品的金额做演示
function payMoney(){
	var orders = document.getElementsByName("myorder");
	//总价
	var sum=0;
	for(var x=0;x<orders.length;x++){
		var order = orders[x];
		if(order.checked){
			//确定要买的。
			sum=sum+Number(order.value);
		}
	}
	
	alert("您看看您是不是要支付"+sum+"元");
}
</script>
</head>
<body>
	<table>
		<tr>
		<td>
		<!-- select 对象的multiple的属性的含义:设置或获取表明列表中是否可选中多个项目的 Boolean 值 -->
			<select id="select_store" multiple="multiple">
			<optgroup label="产品列表"></optgroup>
			</select>
		</td>
		<td>
			<input type="button" value=">>" onclick="selectGoods();"/><br>
			<input type="button" value="<<" onclick="deleteGoods();"/>
		</td>
		<td>
			<select id="select_my" multiple="multiple">
			<optgroup label="我的购物车"></optgroup>
			</select>
		</td>
		<td><input type="button" value="生成订单" onclick="createOrder();"/></td>
		</tr>
	</table>
	<hr/>
	<div id="order_area">
		<h3>请选择您要购买的产品:</h3>
		<div id="order_list">
			<!--  <div>
			<input type="checkbox"><span>大帅哥 20元</span>
			</div>-->
		</div>
		<input type="button" value="全选" onclick="mySelect(‘1‘);"/>
		<input type="button" value="不选" onclick="mySelect(‘0‘);"/>
		<input type="button" value="反选" onclick="mySelect(‘2‘);"/><br>
		<input type="button" value="付款啦" onclick="payMoney();"/>
	</div>
</body>
</html>


 

 

JavaScript实现的购物车效果-好友列表效果,布布扣,bubuko.com

JavaScript实现的购物车效果-好友列表效果

上一篇:微信小程序插件开发


下一篇:Java常用类库之StringBuilder与StringBuffer