首页 > 代码库 > JavaScript实现的购物车效果-好友列表效果

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

2024-07-03 15:43:43   219人阅读

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=http://www.mamicode.com/"goodsCar.js"></script>>

 
 


联系
我们