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 相关文章推荐
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
js实现简单页面全屏
Sep 17 Javascript
react中hook介绍以及使用教程
Dec 11 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
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
php中使用websocket详解
2016/09/23 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
子页向父页传值示例
2013/11/27 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python怎么判断模块安装完成
2020/06/19 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
青年文明号事迹材料
2014/01/18 职场文书
初一生物教学反思
2014/01/18 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
社区母亲节活动记录
2014/03/06 职场文书
研究生导师评语
2014/12/31 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
初二物理教学反思
2016/02/19 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
js前端图片加载异常兜底方案
2022/06/21 Javascript