java 简单购物车_[Java教程]简单购物车

[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