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 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
Vue快速实现通用表单验证的方法
Feb 24 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
一贴学会PHP 新手入门教程
2009/08/03 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php字符串函数学习之substr()
2015/03/27 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
广告显示判断
2006/08/31 Javascript
5 cool javascript apps
2007/03/24 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
Python基于PycURL实现POST的方法
2015/07/25 Python
详解Python装饰器
2019/03/25 Python
Python实现ATM系统
2020/02/17 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
春季运动会广播稿大全
2014/02/19 职场文书
一句话工作感言
2014/03/01 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
2015国庆节宣传语
2015/07/14 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
创业计划书之寿司
2019/07/19 职场文书
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL