首頁 > 開發者 > 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
