[Java教程]简单购物车
0
2016-11-21 15:01:16
.clear{
clear: both;
}
.left{
float: left;
}
.ul{
padding: 0;
width: 300px;
height: 200px;
list-style-type: none;
border: 1px solid black;
}
.buywrap{
margin:0 60px;
}
li:hover{
background-color:royalblue;
}
li{
height: 30px;
cursor: pointer;
background-color: #eee;
}
window.οnlοad=function(){
//具名函数封装,外部无法访问,当然除了IE8.
(function shoppingCartInit(){
//初始化
var ulObj=document.getElementsByTagName("ul");
var addAll=document.getElementById("buyAll");
var back=document.getElementById("back");
//部分功能重叠 0:点击左边 1:右边 ; history存储上次操作时dom状态,只能储存10次操作
var type;
ulObj[0].history=[ulObj[0].cloneNode(true)];
ulObj[1].history=[ulObj[1].cloneNode(true)];
ulObj=Array.prototype.slice.call(ulObj);
ulObj.forEach(translate);
addAll.οnclick=buyAll;
back.οnclick=backEvent;
function translate(item,index,arr){
item.addEventListener("click",move,false)
function move(e){
var event=e||window.event;
var target=event.target||event.srcElement;
if(target.nodeName.toLocaleLowerCase()=="li"){
target.parentElement.id=="percharse"?type=0:type=1;
if(!type){
ulObj[1].appendChild(target);
}else{
ulObj[0].appendChild(target)
}
history();
}
}
};
function buyAll(){
if(!ulObj[0].children[0]){alert(1)}
var childLi=ulObj[0].children;
for(var i=0;i
var cloneLi=childLi[i].cloneNode(true)
ulObj[1].appendChild(cloneLi);
}
ulObj[0].innerHTML="";
history();
}
function backEvent(){
var length=ulObj[0].history.length;
var newLength=length==1?1:length-1;
ulObj[0].history.length=newLength;
ulObj[1].history.length=newLength;
ulObj[0].innerHTML=ulObj[0].history[ulObj[0].history.length-1].innerHTML;
ulObj[1].innerHTML=ulObj[1].history[ulObj[1].history.length-1].innerHTML;
}
function history(){
if(ulObj[0].history.length>10){
ulObj[0].history.shift();
ulObj[1].history.shift();
}
ulObj[0].history.push(ulObj[0].cloneNode(true));
ulObj[1].history.push(ulObj[1].cloneNode(true));
}
}())
}
- 商品一
- 商品二
- 商品三
- 商品四
全部添加
返回
本文网址:http://www.shaoqun.com/a/266240.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。
0