原生js实现购物车添加删除商品、计算价格功能
购物车
功能需求：
- 根据数据创建购物车内容；
- 实现购物车添加商品功能；
- 实现购物车商品数量的增加、减少；
- 实现购物车商品的删除功能；
- 购物车的全选功能；
- 无货商品不可修改数量、不计入总价；
- 底部计算总件数、总价；
看一下效果：
分析：
- 分了三个文件来写，GoodsList.js，用来创建商品列表；ShoppingCart.js，用来创建购物车内容，StepNumber.js，用来创建购物车中，操作商品数量的组件。
- 要分清各个页面之间的通信。
- 案例中，购物车数据为shopCartArr，所以任何有关数据的操作，最好是在同一个文件内，以保证数据的同步。不管是在哪个文件进行的操作，统一将数据抛发到 Html 文件里，对数据进行操作。
- 类是可以进行实例化的，不建议在类文件中给元素添加 id 属性，因为当实例化多个类时，页面上会出现多个相同的 id，违反了 id 属性的唯一性。
- 在给 input 设置属性时，如果使用的是 innerHTML 方法，input 的某些属性（比如checked、disabled等）可能会出现设置不成功的现象，可以使用DOM元素来操作。
下面附上代码：
html文件，模拟数据，监听各个文件的抛发事件，对数据进行操作：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>shoppingCarttitle>
head>
<body>
<script type="module">
import GoodsList from './js/GoodsList.js';
import ShoppingCart from './js/ShoppingCart.js';
let ADD_GOODS_EVENT="add_goods_event";
let DELETE_EVENT="delete_event";
let STEP_CHANGE_EVENT="step_change_event";
let CHECKED_EVENT="checked_event";
//监听添加商品事件
document.addEventListener(ADD_GOODS_EVENT,addGoodsEvent);
//监听删除商品事件
document.addEventListener(DELETE_EVENT,deleteEvent);
//监听改变商品数量事件
document.addEventListener(STEP_CHANGE_EVENT,stepChangeEvent);
//监听点击多选框事件
document.addEventListener(CHECKED_EVENT,checkedEvent);
//模拟商品列表数据
var arr=[
{id:"0001",img:"img01.webp",title:"不知火丑柑丑橘5斤装",desc:"第二件9.9元",price_desc:"1年历史最低价",price_now:"19.9",price_pre:"29.9",sale:"511",href:"https://item.jd.com/21562085787.html",weight:"2.5",state:"1"},
{id:"0006",img:"img06.webp",title:"全母盛宴（2.0-2.3两）10只",desc:"现捕现发",price_desc:"82天历史最低价",price_now:"98",price_pre:"189",sale:"35",href:"https://item.jd.com/60387540668.html",weight:"0.3",state:"0"},
{id:"0007",img:"img07.webp",title:"态好吃100%纯可可脂黑巧克力",desc:"买一送一丝滑细腻",price_desc:"181天历史最低价",price_now:"17.9",price_pre:"29.9",sale:"150",href:"https://item.jd.com/50895183185.html",weight:"0.12",state:"1"},
{id:"0010",img:"img10.webp",title:"买一送一雪媚娘蛋黄酥330g/盒",desc:"买一送一共12枚",price_desc:"1年历史最低价",price_now:"27.8",price_pre:"39.8",sale:"292",href:"https://item.jd.com/25665431802.html",weight:"0.33",state:"1"},
{id:"0011",img:"img11.webp",title:"五常有机稻花香500g（1斤）",desc:"正宗五常大米",price_desc:"138天历史最低价",price_now:"19.9",price_pre:"29.9",sale:"10",href:"https://item.jd.com/56090150750.html",weight:"0.5",state:"1"},
{id:"0012",img:"img12.webp",title:"湖南毛毛鱼 小鱼干20包 糖醋",desc:"2件8折3件7折",price_desc:"230天历史最低价",price_now:"13.9",price_pre:"19.9",sale:"103",href:"https://item.jd.com/49202317748.html",weight:"0.15",state:"1"},
]
//购物车列表数据
var shopCartArr=[];
//创建商品列表
setGoodsList();
function setGoodsList(){
let div=document.createElement("div");
div.className="clearfix";
for(let i=0;i<arr.length;i++){
let main = new GoodsList(arr[i],"./img/");
main.appendTo(div);
}
document.body.appendChild(div);
}
//添加商品
function addGoodsEvent(e){
let arr=shopCartArr.filter(item=>item.id===e.list.id);
if(arr.length===0){
//如果该商品是第一次添加，执行下面的操作
let data={
id:e.list.id,
//如果商品不可售卖，checked设为false
checked:e.list.state==1?true:false,
img:e.list.img,
title:e.list.title,
price:Number(e.list.price_now).toFixed(2),
num:1,
weight:e.list.weight,
subWeight:e.list.weight,
//state为1时，表示商品可售卖，为0时，表示不可售卖
state:e.list.state,
subPrice:Number(e.list.price_now).toFixed(2),
href:"https://item.jd.com/21562085787.html"
}
shopCartArr.push(data);
}else{
//如果该商品不是第一次添加，更改商品的数量
arr[0].num++;
arr[0].subWeight=(arr[0].num*arr[0].weight).toFixed(2);
arr[0].subPrice=(arr[0].num*arr[0].price).toFixed(2);
}
//重新获取购物车数据
setshoppingCart();
}
function deleteEvent(e){
//删除商品
shopCartArr=shopCartArr.filter(item=>item.id!==e.data.id);
//重新获取购物车数据
setshoppingCart();
}
function stepChangeEvent(e){
//更改商品的数量、小计和重量
shopCartArr.forEach(item=>{
if(item.id===e.data.id){
item.num=e.num;
item.subPrice=(item.num*item.price).toFixed(2);
item.subWeight=(item.num*item.weight).toFixed(2);
}
})
//重新获取购物车数据
setshoppingCart();
}
function checkedEvent(e){
if(e.data==="all"){
//如果点击的是全选按钮
shopCartArr.forEach(item=>{
//改变可售卖商品前面的checkbox状态
if(item.state==1) item.checked=e.tag.checked;
})
}else{
//如果点击的是某个商品的checkbox，只改变它的checked值
shopCartArr.forEach(item=>{
if(item.id===e.data.id) item.checked=e.tag.checked;
})
}
//重新获取购物车数据
setshoppingCart();
}
var shoppingCart;
//创建购物车内容
function setshoppingCart(){
if(shoppingCart){
//删除之前购物车的内容，重新创建
shoppingCart.elem.remove();
shoppingCart.elem=null;
}
shoppingCart=new ShoppingCart(shopCartArr);
shoppingCart.appendTo("body");
}
script>
body>
html>
ShoppingCart.js文件，创建购物车内容，操作购物车DOM元素时抛发事件：
import Utils from "./Utils.js";
import StepNumber from "./StepNumber.js";
export default class ShoppingCart{
static styles=false;
static DELETE_EVENT="delete_event";
static CHECKED_EVENT="checked_event";
constructor(_list){
this.list=_list;
this.elem=this.createE();
}
createE(){
if(this.elem) return this.elem;
//创建外层容器
let div=Utils.createE("div");
div.className="cart_main";
//创建头部内容
let cartTh=Utils.createE("div",{},{
className:"cart_table_th"
})
this.createCartTableTh(cartTh);
Utils.appendTo(cartTh,div);
//创建购物车主体内容
let cartCont=Utils.createE("div",{},{
className:"cart_content"
})
this.createShoppingCartCont(cartCont);
Utils.appendTo(cartCont,div);
//创建底部总计
let cartBottom=Utils.createE("div",{},{
className:"cart_bottom"
})
this.createCartBottom(cartBottom);
Utils.appendTo(cartBottom,div);
//插入样式
ShoppingCart.setStyle();
//计算显示的总计
this.totalCount();
return div;
}
appendTo(parent){
Utils.appendTo(this.elem,parent);
}
createCartTableTh(parent){
//创建头部内容
let str=`
商品信息
金额
数量
重量
小计
操作`;
parent.innerHTML=str;
let input=Utils.createE("input",{},{
type:"checkbox",
//全选框的默认值根据state为1的商品来设置
checked:this.list.filter(item=>item.state==1).every(item=>item.checked)
})
//给多选框监听点击事件
input.addEventListener("click",e=>this.checkboxClickHandler(e,"all"));
Utils.insertBefore(input,parent.firstElementChild.firstElementChild);
}
createShoppingCartCont(parent){
//创建购物车主体内容
this.list.forEach(item => {
let ul=Utils.createE("ul",{
//如果商品不可售卖，添加灰色背景
backgroundColor:item.state==0?`#f5f5f5`:"none"
},{
className:"item_content clearfix"
});
ul.innerHTML=`
${item.price}
${item.subWeight}kg
${item.state==1?"有货":"无货"}
${item.subPrice}
删除 `;
let input=Utils.createE("input",{},{
type:"checkbox",
checked:item.checked,
//如果商品不可售卖，设置多选框不可点击
disabled:item.state==0?true:false
});
Utils.appendTo(input,ul.firstElementChild);
//创建step
let step=this.createStepNumber(item);
Utils.appendTo(step,ul.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling);
//监听删除事件
ul.lastElementChild.addEventListener("click",()=>this.deleGoodsInfo(item));
Utils.appendTo(ul,parent);
//给可售卖商品的多选框监听点击事件
if(item.state==1) input.addEventListener("click",e=>this.checkboxClickHandler(e,item));
});
}
createStepNumber(obj){
let stepNumber=new StepNumber(obj);
return stepNumber.elem;
}
createCartBottom(parent){
//创建底部内容
let label=Utils.createE("label");
let input=Utils.createE("input",{},{
type:"checkbox",
//全选框的默认值根据state为1的商品来设置
checked:this.list.filter(item=>item.state==1).every(item=>item.checked)
})
//全选框监听点击事件
input.addEventListener("click",e=>this.checkboxClickHandler(e,"all"));
Utils.appendTo(input,label);
Utils.appendTo(Utils.createE("span",{margin:"0px"},{textContent:"全选"}),label);
Utils.appendTo(label,parent);
//创建删除按钮
let delBtn=Utils.createE("a",{},{
className:"cart_bottom_del",
textContent:"删除"
});
//监听删除事件
delBtn.addEventListener("click",()=>this.deleGoodsInfo("all"));
Utils.appendTo(delBtn,parent);
//创建文字内容
this.spanNum=Utils.createE("span");
Utils.appendTo(this.spanNum,parent);
this.spanWeight=Utils.createE("span");
Utils.appendTo(this.spanWeight,parent);
this.spanPrice=Utils.createE("span");
Utils.appendTo(this.spanPrice,parent);
}
totalCount(){
//总计，初始设置为0
this.totalPrices=0;
this.totalWeight=0;
this.totalNum=0;
this.list.forEach(item=>{
if(item.checked){
//计算选中商品的总计
this.totalPrices+=Number(item.subPrice);
this.totalWeight+=Number(item.subWeight);
this.totalNum+=Number(item.num);
}
})
this.spanPrice.innerHTML=`商品总价￥${this.totalPrices.toFixed(2)}`;
this.spanWeight.innerHTML=`商品总重：${this.totalWeight.toFixed(2)}kg`;
this.spanNum.innerHTML=`总共：${this.totalNum}件商品`;
}
checkboxClickHandler(e,type){
//多选框抛发事件
let evt=new Event(ShoppingCart.CHECKED_EVENT);
evt.data=type;
evt.tag=e.target;
document.dispatchEvent(evt);
}
deleGoodsInfo(type){
//删除商品
if(type==="all"){
this.list.forEach(item=>{
//使用递归循环
if(item.checked) this.deleGoodsInfo(item);
})
}else{
//删除商品抛发事件
let evt=new Event(ShoppingCart.DELETE_EVENT);
evt.data=type;
document.dispatchEvent(evt);
}
}
static setStyle(){
if(ShoppingCart.styles) return;
ShoppingCart.styles=true;
Utils.insertCss(".cart_main",{
width:"980px",
fontSize:"12px",
color: "#696969",
background:"#fff",
margin:"20px auto 0px",
textAlign:"center",
userSelect:"none"
})
Utils.insertCss(".cart_table_th",{
height: "34px",
border: "1px solid #dbdbdb",
borderBottom:"none",
height: "34px",
lineHeight: "34px",
background: "#f3f3f3",
color: "#666"
})
Utils.insertCss(".cart_table_th .th",{
float: "left",
textAlign: "center"
})
Utils.insertCss(".cart_table_th .th_chk",{
width:"58px"
})
Utils.insertCss(".cart_checkbox",{
width: "13px",
height: "13px",
})
Utils.insertCss(".th_item",{
width:"290px"
})
Utils.insertCss(".th_price,.td_price",{
width:"100px"
})
Utils.insertCss(".th_amount,.td_amount",{
width:"115px"
})
Utils.insertCss(".th_weight,.td_weight",{
width:"70px"
})
Utils.insertCss(".th_location,.td_location",{
width:"137px"
})
Utils.insertCss(".th_sum,.td_sum",{
width:"115px"
})
Utils.insertCss(".th_op,.td_op",{
width:"89px",
cursor:"pointer"
})
Utils.insertCss(".cart_content",{
border: "1px solid #dbdbdb",
backgroundColor: "#f3f3f3"
})
Utils.insertCss(".item_content",{
listStyle:"none",
padding:"0px",
margin:"0px",
height:"82px",
backgroundColor:"#fff",
borderBottom:"1px solid #dbdbdb"
})
Utils.insertCss(".item_content li",{
paddingTop:"16px",
float:"left"
})
Utils.insertCss(".item_content .td_chk",{
width: "44px",
paddingTop:"32px",
})
Utils.insertCss(".td_item",{
width:"308px",
textAlign:"left"
})
Utils.insertCss(".item_pic",{
width:"60px",
height:"60px",
float:"left"
})
Utils.insertCss(".item_pic img",{
width:"60px",
height:"60px"
})
Utils.insertCss(".item_info",{
float:"left",
padding:"12px 15px 0 11px",
width: "220px"
})
Utils.insertCss(".item_info a",{
color:"#666",
textDecoration:"none"
})
Utils.insertCss(".cart_bottom",{
height:"62px",
lineHeight:"62px",
backgroundColor:"#e6e6e6",
marginTop:"20px",
textAlign:"left",
fontSize:"14px"
})
Utils.insertCss(".cart_bottom label,.cart_bottom_del,.cart_bottom span",{
margin:"0px 20px"
})
Utils.insertCss(".cart_bottom_del",{
color:"#696969",
textDecoration:"none",
cursor:"pointer"
})
Utils.insertCss(".cart_bottom em",{
color:"#e71a0f",
fontStyle:"normal",
fontSize:"18px"
})
}
}
StepNumber.js文件，实现点击左右按钮，改变数量的功能：
import Utils from './Utils.js';
export default class StepNumber{
static styles=false;
static STEP_CHANGE_EVENT="step_change_event";
ids;
constructor(_data){
this.data=_data;
this.num=_data.num;
this.elem=this.createE();
}
createE(){
if(this.elem) return this.elem;
//创建外层容器
let div=Utils.createE("div");
div.className="item_amount clearfix";
//左边按钮
let reduceBtn=Utils.createE("a",{},{
className:"btn_reduce",
textContent:"-"
})
//输入框
let input=Utils.createE("input",{},{
className:"amount_inp",
type:"text",
value:this.num,
//如果state为0，设置input不可输入
disabled:this.data.state==1?false:true
})
//右边按钮
let addBtn=Utils.createE("a",{},{
className:"btn_add",
textContent:"+"
})
Utils.appendTo(reduceBtn,div);
Utils.appendTo(input,div);
Utils.appendTo(addBtn,div);
//设置样式
StepNumber.setStyles();
//给state为1的商品监听点击事件
if(this.data.state==1) div.addEventListener("click",e=>this.clickHandler(e));
return div;
}
appendTo(parent){
Utils.appendTo(this.elem,parent);
}
clickHandler(e){
e.preventDefault();
let target=e.target;
//如果点击的元素不是a或者input，直接跳出
if(target.nodeName!=="A"&&target.nodeName!=="INPUT") return;
if(Utils.hasClass(target,"btn_reduce")){
//点击左边的按钮
this.num--;
this.setStep(target.nextElementSibling);
}else if(Utils.hasClass(target,"btn_add")){
//点击右边的按钮
this.num++;
this.setStep(target.previousElementSibling);
}else if(target.nodeName==="INPUT"){
//点击input，监听input事件
target.addEventListener("input",e=>this.inputHandler(e));
}
}
inputHandler(e){
//采用节流，提高效率
if(this.ids) return;
this.ids=setTimeout(()=>{
clearTimeout(this.ids);
this.ids=0;
this.setInputsValue(e.target);
},500);
}
setInputsValue(target){
let value=target.value;
//禁止输入非数字
value=value.replace(/\D/g,"");
//如果input的value为空，让它等于1
if(value.length===0) value="1";
this.num=value;
this.setStep(target);
}
setStep(obj){
//设置值
if(this.num<=1) this.num=1;
if(this.num>=999) this.num=999;
obj.value=this.num;
//抛发事件
let evt=new Event(StepNumber.STEP_CHANGE_EVENT);
evt.num=this.num;
evt.data=this.data;
document.dispatchEvent(evt);
}
static setStyles(){
if(StepNumber.styles) return;
StepNumber.styles=true;
Utils.insertCss(".item_amount",{
width:"90px",
height:"26px"
})
Utils.insertCss(".btn_reduce,.btn_add",{
display:"block",
float:"left",
width:"21px",
height:"21px",
lineHeight:"21px",
textAlign:"center",
border:"1px solid #ccc",
color:"#696969",
textDecoration:"none"
})
Utils.insertCss(".amount_inp",{
float:"left",
width:"32px",
height:"19px",
lineHeight:"20px",
textAlign:"center",
margin:"0px 4px",
padding:"0px"
})
}
}
GoodsList.js文件，创建商品列表：
import Utils from './Utils.js';
export default class GoodsList {
static styles=false;
static ADD_GOODS_EVENT="add_goods_event";
constructor(_list, basePath) {
//拼接图片的路径
if (basePath) _list.img = basePath + _list.img;
this.list=_list;
this.elem = this.createElem(_list);
}
createElem(_list) {
if(this.elem) return this.elem;
let div = Utils.createE("div");
div.className = "goodsContainer";
//页面结构
div.innerHTML = `${_list.href}" target="_blank">
${_list.img}" title="${_list.title}">
${_list.title}
${_list.desc}
${_list.price_desc}￥${_list.price_now}
￥${_list.price_pre}
已卖${_list.sale}件
`;
let a=Utils.createE("a",{},{
className:"saleBtn",
textContent:"加入购物车"
})
//监听添加商品事件
a.addEventListener("click",e=>this.addShoppingCartHandler(e))
Utils.appendTo(a,div.lastElementChild.lastElementChild)
//写样式
GoodsList.setStyles();
return div;
}
appendTo(parent) {
Utils.appendTo(this.elem, parent);
}
addShoppingCartHandler(e){
//抛发事件
let evt=new Event(GoodsList.ADD_GOODS_EVENT);
evt.list=this.list;
document.dispatchEvent(evt);
}
static setStyles() {
if(GoodsList.styles) return;
GoodsList.styles=true;
Utils.insertCss("body", {
background: "#f5f5f5"
})
Utils.insertCss("body,div,p", {
margin: "0px",
padding: "0px"
})
Utils.insertCss(".goodsContainer", {
width: "226px",
height: "350px",
margin: "10px 0px 0px 10px",
background: "#fff",
float: "left"
})
Utils.insertCss(".goodsInfo", {
width:"220px",
paddingLeft:"16px",
cursor:"pointer",
textDecoration:"none"
})
Utils.insertCss(".goodsImg", {
width: "150px",
height: "150px",
margin: "20px 0px 0px 25px"
})
Utils.insertCss(".goodsImg:hover", {
position:"relative",
top:"-7px",
})
Utils.insertCss(".goodsTit", {
fontSize: "14px",
color: "#333333",
margin: "0px 16px 10px",
fontWeight: "bold",
textAlign: "left",
lineHeight: "20px",
height: "20px",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow: "hidden",
display:"block"
})
Utils.insertCss(".goodsDesc", {
margin: "0px 0px 10px 16px",
fontSize: "14px",
color: "#e01222",
display:"block"
})
Utils.insertCss(".goodsPrice", {
paddingLeft:"16px",
paddingTop:"13px",
borderTop: "1px solid #f3f3f3"
})
Utils.insertCss(".leftCon", {
float: "left"
})
Utils.insertCss(".priceDesc", {
padding: "0 8px",
height: "16px",
lineHeight: "16px",
backgroundColor: "#e6e6e6",
fontSize: "10px",
color: "#999",
borderRadius: "2px",
position: "relative",
marginBottom:"10px"
})
Utils.insertCss(".priceDesc:after", {
content: "\".\"",
position: "absolute",
left: "0",
right: "0",
bottom: "-6px",
margin: "0 auto",
width: "0",
height: "0",
borderWidth: "3px",
borderStyle: "solid dashed dashed",
borderColor: "#e6e6e6 transparent transparent",
pointerEvents: "none",
})
Utils.insertCss(".priceNow", {
fontSize: "24px",
color: "#e01222",
marginRight: "2px",
lineHeight: "1",
minWidth: "50px",
marginBottom:"3px"
})
Utils.insertCss(".priceNow span", {
fontSize: "14px"
})
Utils.insertCss(".pricePre", {
lineHeight: "1.2",
color: "#999",
fontSize: "18px",
})
Utils.insertCss(".rightCon", {
float: "right"
})
Utils.insertCss(".sale", {
height: "18px",
fontSize: "12px",
color: "#999999",
textAlign: "right",
paddingRight: "10px",
})
Utils.insertCss(".sale span", {
fontSize: "18px",
color: "#df0021"
})
Utils.insertCss(".saleBtn", {
marginTop: "15px",
color: "#fff",
height: "38px",
lineHeight: "38px",
fontSize: "16px",
display: "block",
width: "90px",
textAlign: "center",
background: "#df0021",
textDecoration:"none",
cursor:"pointer"
})
Utils.insertCss(".clearfix::after", {
content: "\".\"",
display: "block",
overflow: "hidden",
visibility: "hidden",
height: "0px",
clear: "both"
})
}
}
Utils.js文件，是一个工具包文件：
export default class Utils{
static createE(elem,style,prep){
elem=document.createElement(elem);
if(style) for(let prop in style) elem.style[prop]=style[prop];
if(prep) for(let prop in prep) elem[prop]=prep[prop];
return elem;
}
static appendTo(elem,parent){
if (parent.constructor === String) parent = document.querySelector(parent);
parent.appendChild(elem);
}
static insertBefore(elem,parent){
if(parent.constructor === String) parent=document.querySelector(parent);
parent.insertBefore(elem,parent.firstElementChild);
}
static randomNum(min,max){
return Math.floor(Math.random*(max-min)+min);
}
static randomColor(alpha){
alpha=alpha||Math.random().toFixed(1);
if(isNaN(alpha)) alpha=1;
if(alpha>1) alpha=1;
if(alpha<0) alpha=0;
let col="rgba(";
for(let i=0;i<3;i++){
col+=Utils.randomNum(0,256)+",";
}
col+=alpha+")";
return col;
}
static insertCss(select,styles){
if(document.styleSheets.length===0){
let styleS=Utils.createE("style");
Utils.appendTo(styleS,document.head);
}
let styleSheet=document.styleSheets[document.styleSheets.length-1];
let str=select+"{";
for(var prop in styles){
str+=prop.replace(/[A-Z]/g,function(item){
return "-"+item.toLocaleLowerCase();
})+":"+styles[prop]+";";
}
str+="}"
styleSheet.insertRule(str,styleSheet.cssRules.length);
}
static addClass(elem,className){
let arr=(elem.className+" "+className).match(/\S+/g);
arr=arr.filter((item,index)=>arr.indexOf(item,index+1)<0)
elem.className=arr.join(" ");
}
static removeClass(elem,className){
if(!elem.className) return;
let arr=elem.className.match(/\S+/g);
let arr1=className.match(/\S+/g);
arr1.forEach(item=>{
arr=arr.filter(t=>t!==item)
})
elem.className=arr.join(" ");
}
static hasClass(elem,className){
if(!elem.className) return false;
let arr=elem.className.match(/\S+/g);
let arr1=className.match(/\S+/g);
let res;
arr1.forEach(item=>{
res= arr.some(it=>it===item)
})
return res;
}
static loadImg({list,basePath,callback}){
if(!list || list.length===0) return;
if(basePath) list=list.map(item=>basePath+item);
let img=Utils.createE("img");
img.data={
list:list,
callback:callback,
resultList:[],
num:0
}
img.addEventListener("load",Utils.loadImgHandler);
img.src=list[img.data.num];
}
static loadImgHandler(e){
let data=e.currentTarget.data;
data.resultList.push(e.currentTarget.cloneNode(false));
data.num++;
if(data.num>data.list.length-1){
e.currentTarget.removeEventListener("load",Utils.loadImgHandler);
data.callback(data.resultList);
data=null;
return;
}
e.currentTarget.src=data.list[data.num];
}
}