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


Posted in Javascript onMay 09, 2014

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>
Javascript 相关文章推荐
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
JavaScript获取路径设计源码
May 22 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
js正则相关知识点专题
May 10 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 Javascript
关于Javascript 对象(object)的prototype
May 09 #Javascript
javascript字母大小写转换的4个函数详解
May 09 #Javascript
js统计页面的来访次数实现代码
May 09 #Javascript
JavaScript Array对象扩展indexOf()方法
May 09 #Javascript
js获取鼠标点击的位置实现思路及代码
May 09 #Javascript
用js格式化金额可设置保留的小数位数
May 09 #Javascript
JQuery动画animate的stop方法使用详解
May 09 #Javascript
You might like
html中select语句读取mysql表中内容
2006/10/09 PHP
php 中文和编码判断代码
2010/05/16 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
在Python中使用正则表达式的方法
2015/08/13 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
Python属性和内建属性实例解析
2020/01/14 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
python归并排序算法过程实例讲解
2020/11/04 Python
体育教育专业自荐信范文
2013/12/20 职场文书
企业军训感言
2014/02/08 职场文书
保护黄河倡议书
2014/05/16 职场文书
励志演讲稿300字
2014/08/21 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技