JavaScript实现的购物车效果。当然，可以在许多地方使用这种效果。朋友的。例如，在选择。人力资源模块，工资的计算，人才选拔等。。下面来看一下班似有些车效果图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHlta2luZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center">

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实现的购物车效果-效果好友列表的更多相关文章

  1. javascript仿天猫加入购物车动画效果

    javascript仿天猫加入购物车动画效果   注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...

  2. 基于Qt的相似QQ好友列表抽屉效果的实现

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/shuideyidi/article/details/30619167     前段时间在忙毕业设计, ...

  3. 使用 Canvas 和 JavaScript 创建逼真的下雨效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...

  4. 【转】Android 实现蘑菇街购物车动画效果

    原文出处:http://blog.csdn.net/wangjinyu501/article/details/38400479 1.思路   目前想到两种方式实现这种效果,一是使用Tween动画,直截 ...

  5. JavaScript实现多栏目切换效果

    效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...

  6. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  7. Android 实现蘑菇街购物车动画效果

    版本号:1.0  日期:2014.8.6 版权:© 2014 kince 转载注明出处   使用过蘑菇街的用户基本上都知道有一个增加购物车的动画效果,此处不详细描写叙述想知道的能够去下载体验一下. 1 ...

  8. javascript 45种缓动效果BY司徒正美

    javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...

  9. DIV+javascript实现首尾相连循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. js封装的类似java StringBuilder类

    使用js的时候,经常会使用字符串拼接,但是在IE6和IE7没有对+作优化,所以性能会很低,鉴于此,我封装了StringBuilder类,用于拼接字符串,直接把代码贴出来如下: function Str ...

  2. iOS中的字符串NSString

    创建一个字符串对象: NSstring * str1 = @"hello world"; NSString * str = [[NSString alloc]initWithStr ...

  3. 在web网页中正确使用图片格式

    今天又看了一遍淘宝平四分享的PPT,以前转载网址:http://blog.sina.com.cn/s/blog_995c1f6301017fd2.html

  4. HashTable的数组和连接两种实现方法（Java版本号）

    1.散列表的接口类 package cn.usst.hashtable; /** * 散列表的接口类 * @author G-Xia * */ public interface HashTable { ...

  5. ios 上拉载入下拉刷新Dome

    为练手写了一个小的上拉载入很多其它下拉刷新的小的Dome . 没有太多的技术含量,仅仅是作为新手的启示用.是上一篇下拉载入的扩展.先看一下那个再看这个就easy非常多. Dome下载:http://d ...

  6. rm -vf `ls |egrep -v "info_20130826-180233.31764|QueryParser.INFO"`

    > rm -vf `ls |egrep -v "info_20130826-180233.31764|QueryParser.INFO"`

  7. 读取USB HDD（USB移动硬盘信息）序列号的代码

    读取USB HDD(USB移动硬盘)序列号的代码,型号及分位. 使用Visual Studio 2010编译成功. 代码使用了CrystalDiskInfo中的代码smartata.c中相关代码: 例 ...

  8. Centos 6安装完美搭建mysql、php、apache之旅

    安装apache [root@centos share]# yum -y install httpd Loaded plugins: fastestmirror, refresh-packagekit ...

  9. Android设备管理器漏洞2--禁止用户取消激活设备管理器

    2013年6月,俄罗斯安全厂商卡巴斯基发现了史上最强手机木马-Obad.A.该木马利用了一个未知的Android设备管理器漏洞(ANDROID-9067882),已激活设备管理器权限的手机木马利用该漏 ...

  10. atitit.团队建设--要不要招技术储备人才的问题

    atitit.团队建设--要不要招技术储备人才的问题 1.      人才的储备和招聘. 1 1.1.   模式1.     养兵千日,用兵一时 1 1.2. 模式2,暂时抱佛脚,也不多招一个人 1 ...