JavaScript實(shí)現(xiàn)的購(gòu)物車效果可以運(yùn)用在好多地方

更新時(shí)間：2014年05月09日 09:46:54 作者：

JavaScript實(shí)現(xiàn)的購(gòu)物車效果，當(dāng)然這個(gè)效果可以運(yùn)用在好多地方，比如好友的選擇，人力資源模塊等等，需要的朋友可以參考下

JavaScript實(shí)現(xiàn)的購(gòu)物車效果，當(dāng)然這個(gè)效果可以運(yùn)用在好多地方，比如好友的選擇，人力資源模塊，計(jì)算薪資，人員的選擇等等。下面看類似某種購(gòu)物車的效果圖：

code：

goodsCar.js:這個(gè)js寫(xiě)成了一個(gè)單獨(dú)的文件。主要是控制上面的列表顯示的。

復(fù)制代碼代碼如下:

 
window.onload=function(){ 
initStore(); 
}; 
var goods=["火腿","美女","御姐","火星一日游","跑車"]; 
//==================為什么要定義一個(gè)臨時(shí)存儲(chǔ)區(qū)要想清楚哦============= 
var temps=[];//臨時(shí)存儲(chǔ) 
//初始化倉(cāng)庫(kù)select 添加內(nèi)容 
function initStore(){ 
var select_store=document.getElementById("select_store"); 
for(var x=0;x<goods.length;x++) 
{ 
//創(chuàng)建option對(duì)象 
var optionNode=document.createElement("option"); 
optionNode.innerHTML=goods[x]; 
select_store.appendChild(optionNode); 
} 
} 
//------------------------------------ 
function selectGoods(){ 
//獲取store的select列表對(duì)象 
var out_store=document.getElementById("select_store"); 
//獲取我的商品的select列表對(duì)象 
var in_store=document.getElementById("select_my"); 
moveGoods(in_store,out_store); 
} 
function deleteGoods(){ 
//1.記錄下要移動(dòng)的產(chǎn)品 
var in_store=document.getElementById("select_store"); 
var out_store=document.getElementById("select_my"); 
moveGoods(in_store,out_store); 
} 
/* 
* 移動(dòng)商品： 
1.inSotre:將商品移入倉(cāng)庫(kù) 
2.outStore：將商品移出倉(cāng)庫(kù) 
*/ 
//移動(dòng) 
function moveGoods(inStore,outStore){ 
//===============清空數(shù)組緩存================== 
temps=[]; 
//循環(huán)獲取store中的所有列表項(xiàng) 
for(var x=0;x<outStore.options.length;x++) 
{ 
var option=outStore.options[x]; 
//將被選中的列表項(xiàng)添加到臨時(shí)數(shù)組中存儲(chǔ) 
if(option.selected){ 
temps.push(option);//臨時(shí)數(shù)組中添加數(shù)據(jù)，為了避免重復(fù)，數(shù)組緩存要清空 
} 
} 
//2.在store列表中刪除已經(jīng)選中的物品 
//3.在購(gòu)物車中添加已經(jīng)選擇的產(chǎn)品 
for(var x=0;x<temps.length;x++) 
{ 
//每一個(gè)節(jié)點(diǎn)都只有一個(gè)父節(jié)點(diǎn) 
//先刪除后添加 
outStore.removeChild(temps[x]); 
//添加 
inStore.appendChild(temps[x]); 
} 
} 

下面是主文件;

復(fù)制代碼代碼如下:

 
<!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=[];//緩存區(qū)域 
//根據(jù)購(gòu)物車中的產(chǎn)品，生成訂單 
function createOrder(){ 
//顯示訂單區(qū)域 
var orderAreaDiv=document.getElementById("order_area"); 
/*div對(duì)象下面有一個(gè)成員對(duì)象style，通過(guò)這個(gè)style對(duì)象可以控制div的樣式 
display：表示這個(gè)對(duì)象或者叫div這個(gè)元素在文檔中是否渲染 
可用的值： 
block: Object is rendered as a block element. 
none :Object is not rendered. 
....... 
在這個(gè)實(shí)例中，就用以上兩個(gè)值就ok了，上面內(nèi)容來(lái)自文檔 
*/ 
//用節(jié)點(diǎn)對(duì)象的屬性操作樣式 
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); 
} 
//遍歷產(chǎn)品，生成訂單 
for(var x=0;x<selectedGoods.length;x++){ 
///*動(dòng)態(tài)生成數(shù)據(jù)的模板 
//<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"); 
//隨機(jī)生成一個(gè)50到100的隨機(jī)數(shù) 
var price=Math.floor(Math.random()*50+50); 
inputMyOrder.value=price; 
spanNode.innerHTML=selectedGoods[x]+" "+price; 
divNode.appendChild(spanNode); 
//inputMyOrder.appendChild(spanNode);錯(cuò)誤，因?yàn)閟pan和input是同級(jí)元素 

//生組裝好的divNode添加到 orderlist中 
var order_list = document.getElementById("order_list"); 
order_list.appendChild(divNode); 
} 
} 
/* 
* 再生成的訂單中仍然可以選擇哪些訂單是準(zhǔn)備付款的，然后進(jìn)行付款 
三種選擇方式：全選：1，不選：0，反選：2；checkbox自己的功能可以多選 
*/ 
function mySelect(arg){ 
//getElementsByName:根據(jù) NAME 標(biāo)簽屬性的值獲取對(duì)象的集合。 
var orders = document.getElementsByName("myorder"); 
//在寫(xiě)代碼的過(guò)程中錯(cuò)誤的運(yùn)用了下面這一句話 
//getElementsByTagName：獲取基于指定元素名稱的對(duì)象集合。 
//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; 
} 
} 
} 
//結(jié)賬買單，這里面用對(duì)話款彈出的所有商品的金額做演示 
function payMoney(){ 
var orders = document.getElementsByName("myorder"); 
//總價(jià) 
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 對(duì)象的multiple的屬性的含義：設(shè)置或獲取表明列表中是否可選中多個(gè)項(xiàng)目的 Boolean 值 --> 
<select id="select_store" multiple="multiple"> 
<optgroup label="產(chǎn)品列表"></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="我的購(gòu)物車"></optgroup> 
</select> 
</td> 
<td><input type="button" value="生成訂單" onclick="createOrder();"/></td> 
</tr> 
</table> 
<hr/> 
<div id="order_area"> 
<h3>請(qǐng)選擇您要購(gòu)買的產(chǎn)品：</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> 