JavaScript實現(xiàn)的購物車效果可以運用在好多地方

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

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

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

code：

goodsCar.js:這個js寫成了一個單獨的文件。主要是控制上面的列表顯示的。

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

 
window.onload=function(){ 
initStore(); 
}; 
var goods=["火腿","美女","御姐","火星一日游","跑車"]; 
//==================為什么要定義一個臨時存儲區(qū)要想清楚哦============= 
var temps=[];//臨時存儲 
//初始化倉庫select 添加內(nèi)容 
function initStore(){ 
var select_store=document.getElementById("select_store"); 
for(var x=0;x<goods.length;x++) 
{ 
//創(chuàng)建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.記錄下要移動的產(chǎn)品 
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){ 
//===============清空數(shù)組緩存================== 
temps=[]; 
//循環(huán)獲取store中的所有列表項 
for(var x=0;x<outStore.options.length;x++) 
{ 
var option=outStore.options[x]; 
//將被選中的列表項添加到臨時數(shù)組中存儲 
if(option.selected){ 
temps.push(option);//臨時數(shù)組中添加數(shù)據(jù)，為了避免重復(fù)，數(shù)組緩存要清空 
} 
} 
//2.在store列表中刪除已經(jīng)選中的物品 
//3.在購物車中添加已經(jīng)選擇的產(chǎn)品 
for(var x=0;x<temps.length;x++) 
{ 
//每一個節(jié)點都只有一個父節(jié)點 
//先刪除后添加 
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ù)購物車中的產(chǎn)品，生成訂單 
function createOrder(){ 
//顯示訂單區(qū)域 
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了，上面內(nèi)容來自文檔 
*/ 
//用節(jié)點對象的屬性操作樣式 
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++){ 
///*動態(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"); 
//隨機生成一個50到100的隨機數(shù) 
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); 
} 
} 
/* 
* 再生成的訂單中仍然可以選擇哪些訂單是準(zhǔn)備付款的，然后進行付款 
三種選擇方式：全選：1，不選：0，反選：2；checkbox自己的功能可以多選 
*/ 
function mySelect(arg){ 
//getElementsByName:根據(jù) NAME 標(biāo)簽屬性的值獲取對象的集合。 
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; 
} 
} 
} 
//結(jié)賬買單，這里面用對話款彈出的所有商品的金額做演示 
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的屬性的含義：設(shè)置或獲取表明列表中是否可選中多個項目的 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="我的購物車"></optgroup> 
</select> 
</td> 
<td><input type="button" value="生成訂單" onclick="createOrder();"/></td> 
</tr> 
</table> 
<hr/> 
<div id="order_area"> 
<h3>請選擇您要購買的產(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> 