JavaScript实现的购物车效果可以运用在好多地方
更新时间：2014年05月09日 09:46:54 作者：
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>
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>
相关文章
下面小编就为大家分享一篇js原生方法被覆盖,从新赋值原生的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
使用jquery来在页面加载时获取页面input控件中所有text控件并添加样式,由于其他方式比较麻烦所以就想通过在页面加载的时候将要改动的text找到并添加属性，感兴趣的你可以参考下，希望可以帮助到你2013-02-02
我们都知道localStorage不主动删除,永远不会销毁，那么如何设置localStorage的过期时间呢？下面这篇文章主要给大家介绍了关于如何给localStorage设置一个过期时间的相关资料，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了js显示世界时间的方法,可现实世界各大城市的当前时间,涉及JavaScript针对时间的获取与运算操作技巧,需要的朋友可以参考下2016-04-04
这个是我在网上找的资料，具体的出处，我已经记不清楚了，觉得很不错，就和大家分享了2010-01-01
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
这篇文章主要介绍了关于微信小程序获取小程序码并接受buffer流保存为图片的方法，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧<BR>2019-06-06
定时器顾名思义就是在某个特定的时间去执行一些任务，现代的应用程序早已不是以前的那些由简单的增删改查拼凑而成的程序了，高复杂性早已是标配，而任务的定时调度与执行也是对程序的基本要求了。本文将利用JavaScript手写原生任务定时器，需要的可以参考一下2022-03-03
前后台用js传参过程中,如果是中文就容易出现乱码,下面这篇文章主要给大家介绍了关于js解决url传递中文参数乱码问题的的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要是对键盘KeyCode值进行了详细的汇总，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
这篇文章主要介绍了ES6中的迭代器、Generator函数以及Generator函数的异步操作方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
最新评论