JavaScript实现的购物车效果可以运用在好多地方

154 阅读 0 评论 102 点赞

我是靠谱客的博主甜甜往事，最近开发中收集的这篇文章主要介绍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> 