JavaScript實現的購物車效果可以運用在好多地方_javascript技巧

JavaScript實現的購物車效果，當然這個效果可以運用在好多地方，例如好友的選擇，人力資源模組，計算薪資，人員的選擇等等。下面看類似某種購物車的效果圖：

code：

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

複製程式碼 程式碼如下:

window.onload=function(>

window.onload=function(>
};
var goods=["火腿","美女","禦姐","火星一日遊","跑車"];
//===== =============為什麼要定義一個暫存區要想清楚哦=============
var temps=[];//暫存
//初始化倉庫select 新增內容
function initStore(){
var select_store=document.getElementById("select_store");
for(var x=0;x{
//建立option物件
var optionNode=document.createElement("option");
optionNode.innerHTML=goods[x];
select_store.appendld(optionChild(option);
}
}
//------------------------------------
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🎜>//1.記錄下要移動的產品
var in_store=document.getElementById("select_store");
var out_store=document.getElementById("select_my");
moveGoods(in_store,out_store);
}
moveGoods(in_store,out_store);
}
moveGoods(in_store,out_store);
}
moveGoods(in_store,out_store);
}
moveGoods(in_store,out_store);
}
/* 商品：
1.inSotre:將商品移入倉庫
2.outStore：將商品移出倉庫
*/
//移動
function moveGoods(inStore,outStore){
/ /===============清空數組快取==================
temps=[];
//循環取得store中的所有清單項目
for(var x=0;x{
var option=outStore.options[x];
//將被選取的列表項目加到臨時數組中儲存
if(option.selected){
temps.push(option);//臨時數組中添加數據，為了避免重複，數組快取要清空
}
}
//2.在store清單中刪除已選取的物品

//3.在購物車中新增已選取的產品
for(var x=0;x{

//每一個節點都只有一個父節點//先刪除後加入outStore.removeChild(temps[x]); //添加inStore.appendChild(temps[x]); } }

下面是主文件; 複製程式碼 程式碼如下:

//*/
var divNode =document.createElement("div");
orderAreaDiv.appendChild(divNode);
var inputMyOrder=document.createElement("input");
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;xvar 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;xvar order = orders[x];
if(order.checked){
//確定要買的。
sum=sum Number(order.value);
}
}

alert("您看看您是否要支付" sum "元");
}

---

請選擇您要購買的產品：