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

2024-05-06 16:05:39

字體：大中小

供稿：網(wǎng)友

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

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

code：

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

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

下面是主文件;

復(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對象下面有一個(gè)成員對象style，通過這個(gè)style對象可以控制div的樣式
display：表示這個(gè)對象或者叫div這個(gè)元素在文檔中是否渲染
可用的值：
block: Object is rendered as a block element.
none :Object is not rendered.
.......
在這個(gè)實(shí)例中，就用以上兩個(gè)值就ok了，上面內(nèi)容來自文檔
*/
//用節(jié)點(diǎn)對象的屬性操作樣式
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>
//<input type="checkbox"><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是同級元素

//生組裝好的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)簽屬性的值獲取對象的集合。
var orders = document.getElementsByName("myorder");
//在寫代碼的過程中錯(cuò)誤的運(yùn)用了下面這一句話
//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");
//總價(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 multiple="multiple">
<optgroup label="產(chǎn)品列表"></optgroup>
</select>
</td>
<td>
<input type="button" value=">>"/><br>
<input type="button" value="<<"/>
</td>
<td>
<select multiple="multiple">
<optgroup label="我的購物車"></optgroup>
</select>
</td>
<td><input type="button" value="生成訂單"/></td>
</tr>
</table>
<hr/>
<div>
<h3>請選擇您要購買的產(chǎn)品：</h3>
<div>

</div>
<input type="button" value="全選"/>
<input type="button" value="不選"/>
<input type="button" value="反選"/><br>
<input type="button" value="付款啦"/>
</div>
</body>
</html>