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ú)的文件。主要是控制上面的列表顯示的。
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]);
}
}
下面是主文件;
<!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>
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>
您可能感興趣的文章:
- js購(gòu)物車實(shí)現(xiàn)思路及代碼(個(gè)人感覺(jué)不錯(cuò))
- Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車程序
- 簡(jiǎn)單的前端js+ajax 購(gòu)物車框架(入門篇)
- js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車有圖有代碼
- 原生js模擬淘寶購(gòu)物車項(xiàng)目實(shí)戰(zhàn)
- Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車程序
- js+cookies實(shí)現(xiàn)懸浮購(gòu)物車的方法
- JavaScript編寫(xiě)一個(gè)簡(jiǎn)易購(gòu)物車功能
- 利用Angularjs和bootstrap實(shí)現(xiàn)購(gòu)物車功能
- 原生js實(shí)現(xiàn)淘寶購(gòu)物車功能
相關(guān)文章
下面小編就為大家分享一篇js原生方法被覆蓋,從新賦值原生的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
JS獲取頁(yè)面input控件中所有text控件并追加樣式屬性
使用jquery來(lái)在頁(yè)面加載時(shí)獲取頁(yè)面input控件中所有text控件并添加樣式,由于其他方式比較麻煩所以就想通過(guò)在頁(yè)面加載的時(shí)候?qū)⒁膭?dòng)的text找到并添加屬性，感興趣的你可以參考下，希望可以幫助到你2013-02-02
給localStorage設(shè)置一個(gè)過(guò)期時(shí)間的方法分享
我們都知道localStorage不主動(dòng)刪除,永遠(yuǎn)不會(huì)銷毀，那么如何設(shè)置localStorage的過(guò)期時(shí)間呢？下面這篇文章主要給大家介紹了關(guān)于如何給localStorage設(shè)置一個(gè)過(guò)期時(shí)間的相關(guān)資料，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了js顯示世界時(shí)間的方法,可現(xiàn)實(shí)世界各大城市的當(dāng)前時(shí)間,涉及JavaScript針對(duì)時(shí)間的獲取與運(yùn)算操作技巧,需要的朋友可以參考下2016-04-04
這個(gè)是我在網(wǎng)上找的資料，具體的出處，我已經(jīng)記不清楚了，覺(jué)得很不錯(cuò)，就和大家分享了2010-01-01
關(guān)于微信小程序獲取小程序碼并接受buffer流保存為圖片的方法
這篇文章主要介紹了關(guān)于微信小程序獲取小程序碼并接受buffer流保存為圖片的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧<BR>2019-06-06
JavaScript實(shí)現(xiàn)手寫(xiě)原生任務(wù)定時(shí)器
定時(shí)器顧名思義就是在某個(gè)特定的時(shí)間去執(zhí)行一些任務(wù)，現(xiàn)代的應(yīng)用程序早已不是以前的那些由簡(jiǎn)單的增刪改查拼湊而成的程序了，高復(fù)雜性早已是標(biāo)配，而任務(wù)的定時(shí)調(diào)度與執(zhí)行也是對(duì)程序的基本要求了。本文將利用JavaScript手寫(xiě)原生任務(wù)定時(shí)器，需要的可以參考一下2022-03-03
js解決url傳遞中文參數(shù)亂碼問(wèn)題的方法詳解
前后臺(tái)用js傳參過(guò)程中,如果是中文就容易出現(xiàn)亂碼,下面這篇文章主要給大家介紹了關(guān)于js解決url傳遞中文參數(shù)亂碼問(wèn)題的的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
這篇文章主要是對(duì)鍵盤KeyCode值進(jìn)行了詳細(xì)的匯總，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
ES6中的迭代器、Generator函數(shù)及Generator函數(shù)的異步操作方法
這篇文章主要介紹了ES6中的迭代器、Generator函數(shù)以及Generator函數(shù)的異步操作方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05