渲染

let arr = [
{
img: ../img/dingdan1.png, riqi: 2018-12-9, dingdan: 猫眼订单号：205454510, img1: ../img/图层2.png, namn: 《海王》, yingting: 金挽IMAX影厅, tingzuowei: 6号激光厅 7排7座 7排6座, kaibo: 周日 11月18日 16；40, qian: ￥86, wan: 完成, can: 查看详细

},
{
    img: `../img/dingdan2.png`, riqi: `2018-11-18`, dingdan: `猫眼订单号：205454511`, img1: `../img/图层2.png`, namn: `《海王1》`, yingting: `金挽IMAX影厅1 `, tingzuowei: `5号激光厅 7排7座 7排6座`, kaibo: `周日 11月19日 16；40`, qian: `￥90`, wan: `完成`, can: `查看详细`

},
{
    img: `../img/dingdan3.png`, riqi: `2018-11-11`, dingdan: `猫眼订单号：205454510`, img1: `../img/图层2.png`, namn: `《海王2》`, yingting: `金挽IMAX影厅2 `, tingzuowei: `6号激光厅 7排5座 7排6座`, kaibo: `周日 11月20日 16；40`, qian: `￥85`, wan: `完成`, can: `查看详细`

},
{
    img: `../img/dingdan4.png`, riqi: `2018-11-9`, dingdan: `猫眼订单号：205454510`, img1: `../img/图层2.png`, namn: `《海王3》`, yingting: `金挽IMAX影厅4 `, tingzuowei: `7号激光厅 7排7座 7排6座`, kaibo: `周日 11月21日 16；40`, qian: `￥84`, wan: `完成`, can: `查看详细`

},
{
    img: `../img/dingdan5.png`, riqi: `2018-11-5`, dingdan: `猫眼订单号：205454510`, img1: `../img/图层2.png`, namn: `《海王4》`, yingting: `金挽IMAX影厅5 `, tingzuowei: `8号激光厅 7排7座 7排6座`, kaibo: `周日 11月18日 16；40`, qian: `￥87`, wan: `完成`, can: `查看详细`

},
{
    img: `../img/dingdan6.png`, riqi: `2018-12-9`, dingdan: `猫眼订单号：205454510`, img1: `../img/图层2.png`, namn: `《海王》`, yingting: `金挽IMAX影厅 `, tingzuowei: `6号激光厅 7排7座 7排6座`, kaibo: `周日 11月18日 16；40`, qian: `￥86`, wan: `完成`, can: `查看详细`

},
{
    img: `../img/dingdan7.png`, riqi: `2018-12-9`, dingdan: `猫眼订单号：205454510`, img1: `../img/图层2.png`, namn: `《海王》`, yingting: `金挽IMAX影厅 `, tingzuowei: `6号激光厅 7排7座 7排6座`, kaibo: `周日 11月18日 16；40`, qian: `￥86`, wan: `完成`, can: `查看详细`

},
{
    img: `../img/dingdan8.png`, riqi: `2018-12-9`, dingdan: `猫眼订单号：205454510`, img1: `../img/图层2.png`, namn: `《海王》`, yingting: `金挽IMAX影厅 `, tingzuowei: `6号激光厅 7排7座 7排6座`, kaibo: `周日 11月18日 16；40`, qian: `￥86`, wan: `完成`, can: `查看详细`

},
{
    img: `../img/dingdan9.png`, riqi: `2018-12-9`, dingdan: `猫眼订单号：205454510`, img1: `../img/图层2.png`, namn: `《海王》`, yingting: `金挽IMAX影厅 `, tingzuowei: `6号激光厅 7排7座 7排6座`, kaibo: `周日 11月18日 16；40`, qian: `￥86`, wan: `完成`, can: `查看详细`

},
{
    img: `../img/dingdan10.png`, riqi: `2018-12-9`, dingdan: `猫眼订单号：205454510`, img1: `../img/图层2.png`, namn: `《海王》`, yingting: `金挽IMAX影厅 `, tingzuowei: `6号激光厅 7排7座 7排6座`, kaibo: `周日 11月18日 16；40`, qian: `￥86`, wan: `完成`, can: `查看详细`

}

]

function xuan() {
let asdEle = document.createElement(“aside”)
let aEle = document.querySelector(“article”)
let seEle = document.createElement(“section”)
console.log(aEle);
console.log(seEle);
aEle.appendChild(asdEle)
aEle.appendChild(seEle)
aEle.style.display = “flex”
let h = document.createElement(“h1”)
let pE = document.createElement(“p”)
let pE1 = document.createElement(“p”)
asdEle.appendChild(h)
asdEle.appendChild(pE)
asdEle.appendChild(pE1)
h.innerHTML = 个人中心
pE.innerHTML = 我的订单
pE1.innerHTML = 基本信息

// let divEle1 = document.createElement("div")
// let divEle2 = document.createElement("div")
// seEle.appendChild(divEle)
// divEle.appendChild(divEle1)
// divEle.appendChild(divEle2)
// console.log(divEle);
// let  pEle  = document.createElement("p")
// divEle1.appendChild(pEle)
// let  spEle = document.createElement("span")
// let  spEle1 = document.createElement("span")
// pEle.appendChild(spEle)
// pEle.appendChild(spEle1)

for (let index in arr) {
    let divEle = document.createElement("div")
    divEle.className = "boxx"
    seEle.appendChild(divEle)
    divEle.innerHTML = `
  <div class= "box">
  <p class = "boxxx">
  <span>${arr[index].riqi}</span>
  <span>${arr[index].dingdan}</span>
  </p>
  <img src ="${arr[index].img1}"    data-index="${index}" class= "tu">
  </div>
  <div class= "box1">
  <img src = "${arr[index].img}">
  <div>
  <h1>${arr[index].namn}</h1>
  <p>${arr[index].yingting}</p>
  <p>${arr[index].tingzuowei}</p>
  <p class = "boo">${arr[index].kaibo}</p>
  </div>
  <div><p class= "boi">${arr[index].qian}</p></div>
  <div><p class= "boi">${arr[index].wan}</p></div>
  <div><p class= "box4">${arr[index].can}</p></div>

  </div>
  




`


}




// for (let i = 0; i < 11; i++) {
//     let divEle = document.createElement("div")
//     aEle.appendChild(seEle)
//     seEle.appendChild(divEle)
//     let divEle1 = document.createElement("div")
//     divEle1.className =  "box"
//     let divEle2 = document.createElement("div")
//     divEle.appendChild(divEle1)
//     divEle.appendChild(divEle2)

//     divEle1.style.height = 50 + "px"
//     divEle2.style.height = 137 + "px"
//     divEle1.style.backgroundColor = "#f7f7f7"


// }

//     for(let  index in arr){
//        let  box1 = document.getElementsByClassName("box")
//         box1.innerHTML=`
//            <p>${arr[index].riqi}</p>
//         `
//     }
//     let divEle = document.querySelectorAll("div")


//     let pEle = document.createElement("p")
//     divEle[8].appendChild(pEle)

//     console.log(divEle);


// }

}

xuan()
let boEle = document.querySelector(“body”)
console.log(boEle);
boEle.addEventListener(“click”, dian)

function dian(e) {
let seEel = document.querySelector(“section”)
let asEel = document.querySelector(“aside”)
let arEle = document.querySelector(“article”)
// let seEle = document.createElement(“section”)
let event = e || window.event
console.log(event.target.className );
if (event.target.className ===“tu”) {
console.log( event.target.dataset.index);
arr.splice(event.target.dataset.index,1)
console.log(arr);
arEle.innerHTML = “”
xuan()

}
console.log(1);

}