JavaScript实现的购物车效果-效果好友列表
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实现的购物车效果-效果好友列表的更多相关文章
- javascript仿天猫加入购物车动画效果
javascript仿天猫加入购物车动画效果 注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...
- 基于Qt的相似QQ好友列表抽屉效果的实现
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/shuideyidi/article/details/30619167 前段时间在忙毕业设计, ...
- 使用 Canvas 和 JavaScript 创建逼真的下雨效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...
- 【转】Android 实现蘑菇街购物车动画效果
原文出处:http://blog.csdn.net/wangjinyu501/article/details/38400479 1.思路 目前想到两种方式实现这种效果,一是使用Tween动画,直截 ...
- JavaScript实现多栏目切换效果
效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- Android 实现蘑菇街购物车动画效果
版本号:1.0 日期:2014.8.6 版权:© 2014 kince 转载注明出处 使用过蘑菇街的用户基本上都知道有一个增加购物车的动画效果,此处不详细描写叙述想知道的能够去下载体验一下. 1 ...
- javascript 45种缓动效果BY司徒正美
javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...
- DIV+javascript实现首尾相连循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- css js 优化工具
我知道国内很多网页制作人员都还在制作table式网页,这样的网页打开速度很慢.如果要想网站打开速度快,就要学会使用DIV+CSS,将图片写进CSS,这样如果网站内容很多的时候,也不会影响网页的浏览.它 ...
- winDbg 命令使用帮助
srv*C:/symbol*http://msdl.microsoft.com/download/symbols;D:\Desktop\CMS_Dump symck //检查pdblm //显示pdb ...
- 14.3.3 Locks Set by Different SQL Statements in InnoDB 不同的SQL语句在InnoDB里的锁设置
14.3.3 Locks Set by Different SQL Statements in InnoDB 不同的SQL语句在InnoDB里的锁设置 locking read, 一个UPDATE,或 ...
- Android中使用SurfaceView和Canvas来绘制动画
事实上每一个View中都有Canvas能够用来绘制动画.仅仅须要在这个View中重载onDraw()方法就能够,可是SurfaceView类是一个专门用来制动动画的类. Canvas(中文叫做&quo ...
- 开启cocos2dx 3.0的Console功能
下面内容用于自己知识的备忘,想看具体内容,请參照例如以下地址. 原英文文地址: http://discuss.cocos2d-x.org/t/cocos3-0-tutorial-console-tut ...
- Fluentd: Open Source Log Management
Fluentd: Open Source Log Management "Fluentd" is an open-source tool to collect events and ...
- shu_1241 邮局位置问题
http://202.121.199.212/JudgeOnline/problem.php?cid=1078&pid=5 分析: 由于题目中的距离是折线距离,所以能够分别考虑两个方向.又x方 ...
- A Game of Thrones(13) - Tyrion
The north went on forever. Tyrion Lannister knew the maps as well as anyone, but a fortnight on the ...
- 【VBA研究】查找目录以下全部文件的名称
作者:iamlaosong 目录里面保存有面单扫描的图像文件,文件名称为邮件号码.如今想收集这些邮件号码,由于量非常大,不可能一个一个的截取,仅仅能通过程序实现.假定,当前工作表B列里放的是存放这些图 ...
- HDU 1061 N^N (n的n次方的最后一位)
题目意思: http://acm.hdu.edu.cn/showproblem.php?pid=1061 求N^N的最后一位数. 题目分析: 此题有非常多种方法,主要是中循环节,看自己怎么找了.我的方 ...