栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

JavaScript实现的购物车效果可以运用在好多地方

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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{
//创建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);
}

//移动
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

table{
border:10px;
}
select{
width:200px;
height:400px;
}
#order_area{
display:none;
}

























请选择您要购买的产品:











转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/107156.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号