35.[前端开发-JavaScript基础]Day12-for循环中变量-华为商城-商品列表-轮播图

for循环中监听函数中打印变量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <button>按钮</button>

  <script>

    var btnEl = document.querySelector("button")
    var message = "Hello World"

    /*
      for1: var name = kobe + 0
      for2: var name = kobe + 1
      for3: var name = kobe + 2
      for4: var name = kobe + 3
      for5: var name = kobe + 4
    */

    for (var i = 0; i < 5; i++) {

      console.log("---------")
      var name = "kobe" + i
      
      btnEl.onclick = function() {
        console.log(i)
        console.log(message)
        console.log(name)
      }
    }

    message = "哈哈哈哈哈"
    console.log(i) // 5
    console.log(name)
    
  </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div class="box">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
  </div>
  
  <script>

    // 强调: 代码的执行顺序

    var btnEls = document.querySelectorAll("button")

    // [btn1, btn2, btn3, btn4]

    /*
      for1: var btnItemEl = btnEls[0]
            btn1.index = 0
            btnItemEl.onclick = function() {}
      for2: var btnItemEl = btnEls[1]
            btn2.index = 1
      for3: var btnItemEl = btnEls[2]
            btn3.index = 2
      for4: var btnItemEl = btnEls[3]
            btn4.index = 3
    */

    // 对每一个按钮的点击进行监听
    for (var i = 0; i < btnEls.length; i++) {
      var btnItemEl = btnEls[i]
      btnItemEl.index = i
      
      debugger

      btnItemEl.onclick = function() {
        debugger
        console.log(i)
        console.log(btnItemEl)

        // 怎么样在这里能拿到对应的btnItemEl
        // 方案一: 直接获取this
        console.log(this)

        // 方案二: 先获取索引
        console.log(this.index)
      }
    }

    console.log(i) // 4
    console.log(btnItemEl)



  </script>

</body>
</html>

华为商城-整体项目的概览

华为商城-导航-操作界面搭建

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .crumbs {
      height: 63px;
      line-height: 63px;
      font-size: 12px;
    }

    .crumbs .item {
      cursor: pointer;
    }

    .crumbs .item:last-child {
      color: #000;
    }

    .operation {
      padding: 0 24px;
      background-color: #fff;
    }

    .operation > .row {
      display: flex;
    }

    .operation > .row .item {
      width: 104px;
      height: 48px;
      line-height: 48px;
      font-size: 12px;
      color: #000;
      cursor: pointer;
    }

    .operation > .row .item:first-child {
      color: #666;
      cursor: auto;
    }

    .operation > .row .item.active {
      color: red;
    }

    /* 商品列表 */
    .products {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .products > .item {
      width: 291px;
      background-color: #fff;
      margin-bottom: 12px;
    }

    .products > .item a {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .products > .item .album {
      width: 180px;
      height: 180px;
      margin: 30px 0;
    }

    .products > .item .name {
      font-weight: 700;
      color: #000;
    }

    .products > .item .discount {
      margin: 10px 0 16px;
      color: #666;
    }

    .products > .item .price {
      font-size: 16px;
      font-weight: 700;
      color: red;
    }

    .products > .item .service {
      display: flex;
      justify-content: center;
      margin: 10px 0;
    }

    .products > .item .service .tip {
      margin: 0 3px;
      padding: 0 3px;
      border: 1px solid red;
      border-radius: 3px;
      font-size: 12px;
      color: red;
    }

    .products > .item .comment {
      display: flex;
      justify-content: center;
      margin-bottom: 12px;
    }

    .products > .item .comment span {
      margin: 0 5px;
      font-size: 12px;
      color: #666;
    }

  </style>
</head>
<body>
  
  <!-- 商品展示的部分 -->
  <div class="wrapper">
    <!-- 面包屑的导航 -->
    <div class="crumbs">
      <span class="item">首页</span>
      <span>&gt;</span>
      <span class="item">笔记本</span>
    </div>

    <!-- 对内容进行操作 -->
    <div class="operation">
      <ul class="row category">
        <li class="item">分类：</li>
        <li class="item">笔记本</li>
        <li class="item">台式机</li>
        <li class="item">智慧屏</li>
      </ul>
      <ul class="row discount">
        <li class="item">服务优惠：</li>
        <li class="item">仅看有货</li>
        <li class="item">分期免息</li>
        <li class="item">优惠商品</li>
      </ul>
      <ul class="row sort">
        <li class="item">排序：</li>
        <li class="item active">综合</li>
        <li class="item">最新</li>
        <li class="item">评论数</li>
        <li class="item">价格</li>
      </ul>
    </div>

    <!-- 商品列表部分 -->
    <ul class="products">
      <li class="item">
        <a href="#">
          <img class="album" src="./img/product_01.webp" alt="">
          <div class="name">HUAWEI MateBook E 12.6英寸</div>
          <div class="discount">预订立省300元|12期免息</div>
          <div class="price">¥6499</div>
          <div class="service">
            <span class="tip">分期免息</span>
            <span class="tip">赠送积分</span>
          </div>
          <div class="comment">
            <span>3190人评论</span>
            <span>96% 好评</span>
          </div>
        </a>
      </li>
      <li class="item">
        <a href="#">
          <img class="album" src="./img/product_01.webp" alt="">
          <div class="name">HUAWEI MateBook E 12.6英寸</div>
          <div class="discount">预订立省300元|12期免息</div>
          <div class="price">¥6499</div>
          <div class="service">
            <span class="tip">分期免息</span>
            <span class="tip">赠送积分</span>
          </div>
          <div class="comment">
            <span>3190人评论</span>
            <span>96% 好评</span>
          </div>
        </a>
      </li>
      <li class="item">
        <a href="#">
          <img class="album" src="./img/product_01.webp" alt="">
          <div class="name">HUAWEI MateBook E 12.6英寸</div>
          <div class="discount">预订立省300元|12期免息</div>
          <div class="price">¥6499</div>
          <div class="service">
            <span class="tip">分期免息</span>
            <span class="tip">赠送积分</span>
          </div>
          <div class="comment">
            <span>3190人评论</span>
            <span>96% 好评</span>
          </div>
        </a>
      </li>
      <li class="item">
        <a href="#">
          <img class="album" src="./img/product_01.webp" alt="">
          <div class="name">HUAWEI MateBook E 12.6英寸</div>
          <div class="discount">预订立省300元|12期免息</div>
          <div class="price">¥6499</div>
          <div class="service">
            <span class="tip">分期免息</span>
            <span class="tip">赠送积分</span>
          </div>
          <div class="comment">
            <span>3190人评论</span>
            <span>96% 好评</span>
          </div>
        </a>
      </li>
    </ul>
  </div>


</body>
</html>

华为商城-动态商品列表的展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/product.css">
</head>
<body>
  <!-- 商品展示的部分 -->
  <div class="wrapper">
    <!-- 面包屑的导航 -->
    <div class="crumbs">
      <span class="item">首页</span>
      <span>&gt;</span>
      <span class="item">笔记本</span>
    </div>

    <!-- 对内容进行操作 -->
    <div class="operation">
      <ul class="row category">
        <li class="item">分类：</li>
        <li class="item">笔记本</li>
        <li class="item">台式机</li>
        <li class="item">智慧屏</li>
      </ul>
      <ul class="row discount">
        <li class="item">服务优惠：</li>
        <li class="item">仅看有货</li>
        <li class="item">分期免息</li>
        <li class="item">优惠商品</li>
      </ul>
      <ul class="row sort">
        <li class="item">排序：</li>
        <li class="item active">综合</li>
        <li class="item">最新</li>
        <li class="item">评论数</li>
        <li class="item">价格</li>
      </ul>
    </div>

    <!-- 商品列表部分 -->
    <ul class="products">
      <!-- <li class="item">
        <a href="#">
          <img class="album" src="./img/product_01.webp" alt="">
          <div class="name">HUAWEI MateBook E 12.6英寸</div>
          <div class="discount">预订立省300元|12期免息</div>
          <div class="price">¥6499</div>
          <div class="service">
            <span class="tip">分期免息</span>
            <span class="tip">赠送积分</span>
          </div>
          <div class="comment">
            <span>3190人评论</span>
            <span>96% 好评</span>
          </div>
        </a>
      </li> -->
    </ul>
  </div>


  <script src="./json/product_data.js"></script>
  <script>
    // 0.资源服务器的地址
    var serverURL = "https://res.vmallres.com/pimages"

    // 1.动态的展示商品列表
    var productsEl = document.querySelector(".products")
    for (var i = 0; i < resultList.length; i++) {
      // console.log(resultList[i]) // -> item
      // 获取一条数据
      var resultItem = resultList[i]

      // 将一条数据转成界面一个item
      // 1.1. 最外层的item
      var itemEl = document.createElement("li")
      itemEl.classList.add("item")
      productsEl.append(itemEl)

      // 1.2. 创建a元素
      var aEl = document.createElement("a")
      aEl.href = "#"
      itemEl.append(aEl)

      // 1.3. 添加img
      var albumEl = document.createElement("img")
      albumEl.classList.add("album")
      albumEl.src = `${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}`
      aEl.append(albumEl)

      // 1.4. 创建name
      var nameEl = document.createElement("div")
      nameEl.classList.add("name")
      nameEl.textContent = resultItem.name
      aEl.append(nameEl)

      // 1.5. 创建discount
      var discountEl = document.createElement("div")
      discountEl.classList.add("discount")
      discountEl.textContent = resultItem.promotionInfo
      aEl.append(discountEl)

      // 1.6. 创建price
      var priceEl = document.createElement("div")
      priceEl.classList.add("price")
      priceEl.textContent = "¥" + resultItem.price
      aEl.append(priceEl)

      // 1.7. 创建service
      var serviceEl = document.createElement("div")
      serviceEl.classList.add("service")
      for (var label of resultItem.promoLabels) {
        var tipEl = document.createElement("span")
        tipEl.classList.add("tip")
        tipEl.textContent = label
        serviceEl.append(tipEl)
      }
      aEl.append(serviceEl)

      // 1.8 创建comment
      var commentEl = document.createElement("div")
      commentEl.classList.add("comment")
      var countEl = document.createElement("span")
      countEl.textContent = `${resultItem.rateCount}人评论`
      commentEl.append(countEl)
      var goodEl = document.createElement("span")
      goodEl.textContent = `${resultItem.goodRate}% 好评`
      commentEl.append(goodEl)
      aEl.append(commentEl)
    }

  </script>
</body>
</html>

华为商城-动态商品列表的展示（重构）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/product.css">
</head>
<body>
  <!-- 商品展示的部分 -->
  <div class="wrapper">
    <!-- 面包屑的导航 -->
    <div class="crumbs">
      <span class="item">首页</span>
      <span>&gt;</span>
      <span class="item">笔记本</span>
    </div>

    <!-- 对内容进行操作 -->
    <div class="operation">
      <ul class="row category">
        <li class="item">分类：</li>
        <li class="item">笔记本</li>
        <li class="item">台式机</li>
        <li class="item">智慧屏</li>
      </ul>
      <ul class="row discount">
        <li class="item">服务优惠：</li>
        <li class="item">仅看有货</li>
        <li class="item">分期免息</li>
        <li class="item">优惠商品</li>
      </ul>
      <ul class="row sort">
        <li class="item">排序：</li>
        <li class="item active">综合</li>
        <li class="item">最新</li>
        <li class="item">评论数</li>
        <li class="item">价格</li>
      </ul>
    </div>

    <!-- 商品列表部分 -->
    <ul class="products">
    </ul>
  </div>


  <script src="./json/product_data.js"></script>
  <script>
    // 0.资源服务器的地址
    var serverURL = "https://res.vmallres.com/pimages"

    // 1.动态的展示商品列表
    var productsEl = document.querySelector(".products")
    showResultListAction()
    function showResultListAction() {
      for (var i = 0; i < resultList.length; i++) {
      // 获取一条数据
        var resultItem = resultList[i]

        // 将一条数据转成界面一个item
        var itemEl = document.createElement("li")
        itemEl.classList.add("item")

        // item里面的内容
        var serviceString = ""
        for (var label of resultItem.promoLabels) {
          serviceString += `<span class="tip">${label}</span>`
        }

        itemEl.innerHTML = `
          <a href="#">
            <img class="album" src="${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt="">
            <div class="name">${resultItem.name}</div>
            <div class="discount">${resultItem.promotionInfo}</div>
            <div class="price">¥${resultItem.price}</div>
            <div class="service">
              ${serviceString}
            </div>
            <div class="comment">
              <span>${resultItem.rateCount}人评论</span>
              <span>${resultItem.goodRate}% 好评</span>
            </div>
          </a>
        `
        productsEl.append(itemEl)
      }
    }
  </script>
</body>
</html>

华为商城-服务优惠的点击处理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/product.css">
</head>
<body>
  <!-- 商品展示的部分 -->
  <div class="wrapper">
    <!-- 面包屑的导航 -->
    <div class="crumbs">
      <span class="item">首页</span>
      <span>&gt;</span>
      <span class="item">笔记本</span>
    </div>

    <!-- 对内容进行操作 -->
    <div class="operation">
      <ul class="row category">
        <li class="item">分类：</li>
        <li class="item">笔记本</li>
        <li class="item">台式机</li>
        <li class="item">智慧屏</li>
      </ul>
      <ul class="row discount">
        <li class="item">服务优惠：</li>
        <li class="item">仅看有货</li>
        <li class="item">分期免息</li>
        <li class="item">优惠商品</li>
      </ul>
      <ul class="row sort">
        <li class="item">排序：</li>
        <li class="item active">综合</li>
        <li class="item">最新</li>
        <li class="item">评论数</li>
        <li class="item">价格</li>
      </ul>
    </div>

    <!-- 商品列表部分 -->
    <ul class="products">
    </ul>
  </div>


  <script src="./json/product_data.js"></script>
  <script>
    // 0.资源服务器的地址
    var serverURL = "https://res.vmallres.com/pimages"

    // 1.动态的展示商品列表
    var productsEl = document.querySelector(".products")
    for (var i = 0; i < resultList.length; i++) {
      // 获取一条数据
      var resultItem = resultList[i]

      // 将一条数据转成界面一个item
      var itemEl = document.createElement("li")
      itemEl.classList.add("item")

      // item里面的内容
      var serviceString = ""
      for (var label of resultItem.promoLabels) {
        serviceString += `<span class="tip">${label}</span>`
      }

      itemEl.innerHTML = `
        <a href="#">
          <img class="album" src="${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt="">
          <div class="name">${resultItem.name}</div>
          <div class="discount">${resultItem.promotionInfo}</div>
          <div class="price">¥${resultItem.price}</div>
          <div class="service">
            ${serviceString}
          </div>
          <div class="comment">
            <span>${resultItem.rateCount}人评论</span>
            <span>${resultItem.goodRate}% 好评</span>
          </div>
        </a>
      `
      productsEl.append(itemEl)
    }
    
    // 2.服务优惠的赛选
    var operationEl = document.querySelector(".operation")
    var discountEl = operationEl.querySelector(".discount")
    // 定义变量, 用户记录选中的服务
    var discountFilters = []
    for (var i = 1; i < discountEl.children.length; i++) {
      // 获取对应的discountItemEl
      var discountItemEl = discountEl.children[i]

      // 监听discountItemEl
      discountItemEl.onclick = function() {
        // 在active和非active切换
        this.classList.toggle("active")

        // 判断是否将关键字添加或者从discountFilters移除掉
        if (this.classList.contains("active")) {
          discountFilters.push(this.textContent.trim())
        } else {
          var filterItem = this.textContent.trim()
          var filterIndex = discountFilters.findIndex(function(item) {
            return item === filterItem
          })
          discountFilters.splice(filterIndex, 1)
        }
        console.log(discountFilters)
      }
    }

  </script>
</body>
</html>

华为商城-服务优惠的点击过滤展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/product.css">
</head>
<body>
  <!-- 商品展示的部分 -->
  <div class="wrapper">
    <!-- 面包屑的导航 -->
    <div class="crumbs">
      <span class="item">首页</span>
      <span>&gt;</span>
      <span class="item">笔记本</span>
    </div>

    <!-- 对内容进行操作 -->
    <div class="operation">
      <ul class="row category">
        <li class="item">分类：</li>
        <li class="item">笔记本</li>
        <li class="item">台式机</li>
        <li class="item">智慧屏</li>
      </ul>
      <ul class="row discount">
        <li class="item">服务优惠：</li>
        <li class="item">仅看有货</li>
        <li class="item">分期免息</li>
        <li class="item">优惠商品</li>
      </ul>
      <ul class="row sort">
        <li class="item">排序：</li>
        <li class="item active">综合</li>
        <li class="item">最新</li>
        <li class="item">评论数</li>
        <li class="item">价格</li>
      </ul>
    </div>

    <!-- 商品列表部分 -->
    <ul class="products">
    </ul>
  </div>


  <script src="./json/product_data.js"></script>
  <script src="./js/utils.js"></script>
  <script>
    /*
      1.获取服务优惠中的item
      2.监听item的点击
        * 切换active
      3.根据item的点击获取filterItem
        * 将其放在一个数组中
      4.根据最新的filter, 过滤数据
        * filterResultListAction
      5.根据过滤的最新数据进行展示
        * showResultListAction
    */

    // 0.资源服务器的地址
    var serverURL = "https://res.vmallres.com/pimages"

    // 1.动态的展示商品列表
    var productsEl = document.querySelector(".products")
    
    
    // 2.服务优惠的赛选
    var operationEl = document.querySelector(".operation")
    var discountEl = operationEl.querySelector(".discount")
    // 定义变量, 用户记录选中的服务
    var discountFilters = []
    for (var i = 1; i < discountEl.children.length; i++) {
      // 获取对应的discountItemEl
      var discountItemEl = discountEl.children[i]

      // 监听discountItemEl
      discountItemEl.onclick = function() {
        // 在active和非active切换
        this.classList.toggle("active")

        // 判断是否将关键字添加或者从discountFilters移除掉
        if (this.classList.contains("active")) {
          discountFilters.push(this.textContent.trim())
        } else {
          var filterItem = this.textContent.trim()
          var filterIndex = discountFilters.findIndex(function(item) {
            return item === filterItem
          })
          discountFilters.splice(filterIndex, 1)
        }

        // 过滤resultList
        filterResultListAction()
      }
    }


    // 封装函数: 过滤resultList数据
    var showResultList = resultList
    function filterResultListAction() {
      // 1.过滤数据
      showResultList = resultList.filter(function(item) {
        var isFlag = true
        for (var filterItem of discountFilters) {
          if (!item.services.includes(filterItem)) {
            isFlag = false
            break
          }
        }
        return isFlag
      })

      // 2.重新展示数据
      showResultListAction()
    }

    // 封装函数: 通过for循环, 展示数据
    showResultListAction()
    function showResultListAction() {
      productsEl.innerHTML = ""
      for (var i = 0; i < showResultList.length; i++) {
        // 获取一条数据
        var resultItem = showResultList[i]

        // 将一条数据转成界面一个item
        var itemEl = document.createElement("li")
        itemEl.classList.add("item")

        // item里面的内容
        var serviceString = ""
        for (var label of resultItem.promoLabels) {
          serviceString += `<span class="tip">${label}</span>`
        }

        itemEl.innerHTML = `
          <a href="#">
            <img class="album" src="${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt="">
            <div class="name">${resultItem.name}</div>
            <div class="discount">${resultItem.promotionInfo}</div>
            <div class="price">¥${resultItem.price}</div>
            <div class="service">
              ${serviceString}
            </div>
            <div class="comment">
              <span>${resultItem.rateCount}人评论</span>
              <span>${resultItem.goodRate}% 好评</span>
            </div>
          </a>
        `
        productsEl.append(itemEl)
      }

      // 添加空的item
      addProductsEmptyItem()
    }
  </script>
</body>
</html>

华为商城-轮播图界面基本搭建

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .banner .images {
      position: relative;
    }

    .banner .images .item {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      overflow: hidden;

      opacity: 0;
    }

    .banner .images .item.active {
      opacity: 1;
    }

    .banner .images .item img {
      position: relative;
      transform: translate(-50%);
      left: 50%;
      width: 1920px;
      height: 550px;
    }
  </style>
</head>
<body>
  
  <div class="banner">
    <ul class="images">
    </ul>
    <div class="control">
      <button>上一个</button>
      <button>下一个</button>
    </div>
    <div class="indicator"></div>
  </div>

  <script src="./json/banner_data.js"></script>
  <script>
    // 0.banner的serverURL
    var bannerServerURL = "https://res.vmallres.com/"

    // 1.动态添加轮播图图片数据
    var imagesEl = document.querySelector(".images")
    var activeItemEl = null
    for (var i = 0; i < banners.length; i++) {
      // 获取数据
      var banner = banners[i]

      // 创建li元素
      var itemEl = document.createElement("li")
      itemEl.classList.add("item")
      if (i === 0) {
        itemEl.classList.add("active")
        activeItemEl = itemEl
      }
      imagesEl.append(itemEl)

      // 创建img元素
      var imgEl = document.createElement("img")
      imgEl.src = `${bannerServerURL}${banner.imgUrl}`
      itemEl.append(imgEl)
    }

  </script>

</body>
</html>

华为商城-李轮播图的自动轮播效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .banner .images {
      position: relative;
      height: 550px;
    }

    .banner .images .item {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      overflow: hidden;

      opacity: 0;
      transition: opacity 1000ms ease;
    }

    .banner .images .item.active {
      opacity: 1;
    }

    .banner .images .item img {
      position: relative;
      transform: translate(-50%);
      left: 50%;
      width: 1920px;
      height: 550px;
    }
  </style>
</head>
<body>
  
  <div class="banner">
    <ul class="images">
    </ul>
    <div class="control">
      <button class="prev">上一个</button>
      <button class="next">下一个</button>
    </div>
    <div class="indicator"></div>
  </div>

  <script src="./json/banner_data.js"></script>
  <script>
    var bannersCount = banners.length

    // 0.banner的serverURL
    var bannerServerURL = "https://res.vmallres.com/"

    // 1.动态添加轮播图图片数据
    var imagesEl = document.querySelector(".images")
    var activeItemEl = null
    for (var i = 0; i < banners.length; i++) {
      // 获取数据
      var banner = banners[i]

      // 创建li元素
      var itemEl = document.createElement("li")
      itemEl.classList.add("item")
      if (i === 0) {
        itemEl.classList.add("active")
        activeItemEl = itemEl
      }
      imagesEl.append(itemEl)

      // 创建img元素
      var imgEl = document.createElement("img")
      imgEl.src = `${bannerServerURL}${banner.imgUrl}`
      itemEl.append(imgEl)
    }

    // 2.监听按钮的点击
    var previousIndex = 0
    var currentIndex = 0
    var controlEl = document.querySelector(".control")
    var prevBtnEl = controlEl.querySelector(".prev")
    var nextBtnEl = controlEl.querySelector(".next")
    prevBtnEl.onclick = function() {
      // 找到上一个
      previousIndex = currentIndex
      currentIndex--
      if (currentIndex === -1) {
        currentIndex = bannersCount - 1
      }

      // 让currentIndex变成active状态, 让previous变成普通的状态
      switchBannerItem()
    }
    nextBtnEl.onclick = function() {
      nextSwitch()
    }

    // 3.自动轮播效果
    var timer = null
    startTimer()

    // 4.暂停自动轮播
    imagesEl.onmouseenter = function() {
      console.log("------onmouseenter")
      stopTimer()
    }
    imagesEl.onmouseleave = function() {
      startTimer()
    }

    // 对功能封装的函数
    // 封装到函数: switchBannerItem
    function switchBannerItem() {
      var currentItemEl = imagesEl.children[currentIndex]
      var previousItemEl = imagesEl.children[previousIndex]
      previousItemEl.classList.remove("active")
      currentItemEl.classList.add("active")
    }

    // 封装到函数: 播放下一个
    function nextSwitch() {
      // 找到下一个
      previousIndex = currentIndex
      currentIndex++
      if (currentIndex === bannersCount) {
        currentIndex = 0
      }

      // 让currentIndex变成active状态, 让previous变成普通的状态
      switchBannerItem()
    }

    // 封装到函数: 开启定时器
    function startTimer() {
      timer = setInterval(function() {
        nextSwitch()
      }, 3000);
    }
    function stopTimer() {
      console.log("timer:", timer)
      clearInterval(timer)
    }
  </script>

</body>
</html>

商品列表-服务优惠-排序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/product.css">
</head>
<body>
  <!-- 商品展示的部分 -->
  <div class="wrapper">
    <!-- 面包屑的导航 -->
    <div class="crumbs">
      <span class="item">首页</span>
      <span>&gt;</span>
      <span class="item">笔记本</span>
    </div>

    <!-- 对内容进行操作 -->
    <div class="operation">
      <ul class="row category">
        <li class="item">分类：</li>
        <li class="item">笔记本</li>
        <li class="item">台式机</li>
        <li class="item">智慧屏</li>
      </ul>
      <ul class="row discount">
        <li class="item">服务优惠：</li>
        <li class="item">仅看有货</li>
        <li class="item">分期免息</li>
        <li class="item">优惠商品</li>
      </ul>
      <ul class="row sort">
        <li class="item">排序：</li>
        <li class="item active" data-key="default">综合</li>
        <li class="item" data-key="goodRate">好评</li>
        <li class="item" data-key="rateCount">评论数</li>
        <li class="item" data-key="price">价格</li>
      </ul>
    </div>

    <!-- 商品列表部分 -->
    <ul class="products">
    </ul>
  </div>


  <script src="./json/product_data.js"></script>
  <script src="./js/utils.js"></script>
  <script>
    /*
      1.监听排序item的点击
      2.排他效果
       * 点击item的active
       * 之前的item取消active
      3.获取点击的信息(比如评论数/好评/价格)
      4.根据点击信息, 对数据进行排序
       * default情况
       * 有key的情况
       * 特别注意: 不能修改源数组
      5.根据排序之后的数据, 重新展示页面
    */

    // 0.资源服务器的地址
    var serverURL = "https://res.vmallres.com/pimages"

    // 1.动态的展示商品列表
    var productsEl = document.querySelector(".products")
    
    
    // 2.服务优惠的赛选
    var operationEl = document.querySelector(".operation")
    var discountEl = operationEl.querySelector(".discount")
    // 定义变量, 用户记录选中的服务
    var discountFilters = []
    for (var i = 1; i < discountEl.children.length; i++) {
      // 获取对应的discountItemEl
      var discountItemEl = discountEl.children[i]

      // 监听discountItemEl
      discountItemEl.onclick = function() {
        // 在active和非active切换
        this.classList.toggle("active")

        // 判断是否将关键字添加或者从discountFilters移除掉
        if (this.classList.contains("active")) {
          discountFilters.push(this.textContent.trim())
        } else {
          var filterItem = this.textContent.trim()
          var filterIndex = discountFilters.findIndex(function(item) {
            return item === filterItem
          })
          discountFilters.splice(filterIndex, 1)
        }

        // 过滤resultList
        filterResultListAction()
      }
    }

    // 3.监听排序功能
    var sortEl = document.querySelector(".sort")
    var activeItemEl = sortEl.querySelector(".active")
    // var sortKeys = ["default", "goodRate", "rateCount", "price"]
    for (var i = 1; i < sortEl.children.length; i++) {
      var sortItemEl = sortEl.children[i]
      sortItemEl.index = i

      sortItemEl.onclick = function() {
        // 1.取消之前的, 添加新的active
        activeItemEl.classList.remove("active")
        this.classList.add("active")
        activeItemEl = this

        // 2.获取信息
        var sortKey = this.dataset.key

        // 3.根据key, 对数据进行排序
        sortResultListAction(sortKey)
      }
    }


    // 封装函数: 过滤resultList数据
    var showResultList = [].concat(resultList)
    function filterResultListAction() {
      // 1.过滤数据
      showResultList = resultList.filter(function(item) {
        var isFlag = true
        for (var filterItem of discountFilters) {
          if (!item.services.includes(filterItem)) {
            isFlag = false
            break
          }
        }
        return isFlag
      })

      // 2.重新展示数据
      showResultListAction()
    }

    // 封装函数: 通过for循环, 展示数据
    showResultListAction()
    function showResultListAction() {
      productsEl.innerHTML = ""
      for (var i = 0; i < showResultList.length; i++) {
        // 获取一条数据
        var resultItem = showResultList[i]

        // 将一条数据转成界面一个item
        var itemEl = document.createElement("li")
        itemEl.classList.add("item")

        // item里面的内容
        var serviceString = ""
        for (var label of resultItem.promoLabels) {
          serviceString += `<span class="tip">${label}</span>`
        }

        itemEl.innerHTML = `
          <a href="#">
            <img class="album" src="${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt="">
            <div class="name">${resultItem.name}</div>
            <div class="discount">${resultItem.promotionInfo}</div>
            <div class="price">¥${resultItem.price}</div>
            <div class="service">
              ${serviceString}
            </div>
            <div class="comment">
              <span>${resultItem.rateCount}人评论</span>
              <span>${resultItem.goodRate}% 好评</span>
            </div>
          </a>
        `
        productsEl.append(itemEl)
      }

      // 添加空的item
      addProductsEmptyItem()
    }
  
    // 封装函数: 通过key进行排序
    function sortResultListAction(key) {
      if (key === "default") {
        filterResultListAction()
      } else {
        showResultList.sort(function(item1, item2) {
          return item2[key] - item1[key]
        })
      }
      
      showResultListAction()
    }
  </script>
</body>
</html>