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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
关于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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
Javascript - HTML的request类
2006/07/15 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
小程序实现分类页
2019/07/12 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
python 文件与目录操作
2008/12/24 Python
Python内置数据类型详解
2014/08/18 Python
Python open()文件处理使用介绍
2014/11/30 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
使用Python设计一个代码统计工具
2018/04/04 Python
Python subprocess库的使用详解
2018/10/26 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
最新销售员个人自荐信
2013/09/21 职场文书
小学生新学期寄语
2014/01/19 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
关爱残疾人标语
2014/06/25 职场文书
陕西导游词
2015/02/04 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python