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{
//创建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{
var option=outstore.options[x];
//将被选中的列表项添加到临时数组中存储
if(option.selected){
temps.push(option);//临时数组中添加数据，为了避免重复，数组缓存要清空
}
}
//2.在store列表中删除已经选中的物品
//3.在购物车中添加已经选择的产品
for(var x=0;x{
//每一个节点都只有一个父节点
//先删除后添加
outstore.removechild(temps[x]);
//添加
instore.appendchild(temps[x]);
}
}
下面是主文件;
复制代码 代码如下:
insert title here
//*/
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;xvar 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;xvar order = orders[x];
if(order.checked){
//确定要买的。
sum=sum+number(order.value);
}
}
alert(您看看您是不是要支付+sum+元);
}
> onclick=selectgoods();>
请选择您要购买的产品：