请输入关键字进行搜索...

程序员鸡皮

文章 分类 评论
60 3 9
联系我
the theme is by @冷文学习者

站点介绍

一名PHP全栈程序员的日常......

重学Javascript基础（十三) 阶段性项目华为商城

abzzp 2024-10-17 140 0条评论 前端 JavaScript

首页 / 正文
本站是作为记录一名北漂程序员编程学习以及日常的博客，欢迎添加微信BmzhbjzhB咨询交流......

发布于2024-07-04

01.商品列表-界面搭建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 src="./img/product_01.webp" class="album" alt="">
                    <div class="name">HUAWEI MateBook E 12.6英寸 1</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 src="./img/product_01.webp" alt="" class="album">
                    <div class="name">HUAWEI MateBook E 12.6英寸 2</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 src="./img/product_01.webp" alt="" class="album">
                    <div class="name">HUAWEI MateBook E 12.6英寸 2</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 src="./img/product_01.webp" alt="" class="album">
                    <div class="name">HUAWEI MateBook E 12.6英寸 2</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>

02.商品列表-动态列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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}人评论`
            countEl.append(commentEl)
            var goodEl = document.createElement("span")
            goodEl.textContent = `${resultItem.goodRate}% 好评`
            commentEl.append(goodEl)
            aEl.append(commentEl)
        }
     </script>
</body>
</html>

03.商品列表-动态列表(重构)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

04.商品列表-服务优惠-点击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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.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 === filterIndex
                    })
                    discountFilters.splice(filterIndex,1)
                }
                console.log(discountFilters)
            }
        }
     </script>
</body>
</html>

05.商品列表-服务优惠-过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 = document.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()
            }
        }

        // 封装函数：过滤reslutList数据
        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>

06.轮播图-界面搭建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

07.轮播图-轮播控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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)
        }

        // 2.监听按钮的点击
        var previousIndex = 0
        var currentIndex = 0
        var controlEl = document.querySelector(".control")
        var prevBtnEl = document.querySelector(".prev")
        var nextBtnEl = document.querySelector(".next")
        prevBtnEl.onclick = function(){
            // 找到上一个
            previousIndex = currentIndex
            currentIndex--
            if(currentIndex === -1){
                currentIndex = bannersCount - 1
            }
            // 让currentIndex变成active状态，让previous变成普通的状态
            switchBannerItem()
        }

        nextBtnEl.onclick = function(){
            // 找到下一个
            previousIndex = currentIndex
            currentIndex++
            if(currentIndex === bannersCount){
                currentIndex = 0
            }

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

        // 封装到函数：switchBannerItem
        function switchBannerItem(){
            var currentItemEl = imagesEl.children[currentIndex]
            var previousItemEl = imagesEl.children[previousIndex]
            previousItemEl.classList.remove("active")
            currentItemEl.classList.add("active")
        }
    </script>
</body>
</html>

08.轮播图-自动轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 = document.querySelector(".prev")
        var nextBtnEl = document.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>

09.轮播图-指示器展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 {
        position: relative;
      }
  
      .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;
      }
  
      .indicator {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 42px;
        display: flex;
        justify-content: center;
      }
  
      .indicator .item {
        width: 8px;
        height: 8px;
        margin: 0 10px;
        border-radius: 50%;
        background-color: #aaa;
        cursor: pointer;
      }
  
      .indicator .item.active {
        background-color: #f00;
      }
    </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.根据数据动态添加页面内容
        // 1.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)
        }

        // 1.2 动态添加指示器内容
        var indicatorEl = document.querySelector(".indicator")
        for(var i = 0;i<bannersCount;i++){
            var itemEl = document.createElement("div")
            itemEl.classList.add("item")
            if(i === 0){
                itemEl.classList.add("active")
            }
            indicatorEl.append(itemEl)

            //监听指示器item的点击
            itemEl.index = i 
            itemEl.onclick = function(){
                previousIndex = currentIndex
                currentIndex = this.index
                switchBannerItem()
            }
        }

        // 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.暂停自动轮播
        var bannerEl = document.querySelector(".banner")
        bannerEl.onmouseenter = function(){
            stopTimer()
        }
        bannerEl.onmouseleave = function(){
            startTimer()
        }

        // 对功能封装的函数
        // 封装到函数：switchBannerItem
        function switchBannerItem(){
            // 1.切换图片的item
            var currentItemEl = imagesEl.children[currentIndex]
            var previousItemEl = imagesEl.children[previousIndex]
            previousItemEl.classList.remove("active")
            currentItemEl.classList.add("active")

            // 2.切换指示器的item
            var currentItemEl = indicatorEl.children[currentIndex]
            var previousInItemEl = indicatorEl.children[previousIndex]
            previousInItemEl.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(){
            clearInterval(timer)
        }
    </script>
</body>
</html>

10.轮播图-位移滚动

<!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 {
      position: relative;
      overflow: hidden;
    }

    .banner .images {
      position: relative;
      height: 550px;

      transition: all 500ms ease;
    }

    .banner .images .item {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      overflow: hidden;
      transition: opacity 1000ms ease;
    }

    .banner .images .item img {
      position: relative;
      transform: translate(-50%);
      left: 50%;
      width: 1920px;
      height: 550px;
    }

    .indicator {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 42px;
      display: flex;
      justify-content: center;
    }

    .indicator .item {
      width: 8px;
      height: 8px;
      margin: 0 10px;
      border-radius: 50%;
      background-color: #aaa;
      cursor: pointer;
    }

    .indicator .item.active {
      background-color: #f00;
    }
  </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>
    // 1.修改布局（css中）
    var bannersCount = banners.length

    // 0.banner的serverURL
    var bannerServerURL = "https://res.vmallres.com/"
    // 1.根据数据动态添加页面内容
    // 1.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)

        // 设置itemEl的样式（left）
        itemEl.style.left = `${i * 100}%`

        // 创建img元素
        var imgEl = document.createElement("img")
        imgEl.src = `${bannerServerURL}${banner.imgUrl}`
        itemEl.append(imgEl)
    }
   
    // 1.2 动态添加指示器内容
    var indicatorEl = document.querySelector(".indicator")
    for(var i = 0;i<bannersCount;i++){
        var itemEl = document.createElement("div")
        itemEl.classList.add("item")
        if(i === 0){
            itemEl.classList.add("active")
        }
        indicatorEl.append(itemEl)

        // 监听指示器item的点击
        itemEl.index = i
        itemEl.onclick = function(){
            previousIndex = currentIndex
            currentIndex = this.index
            switchBannerItem()
        }
    }

    // 2.监听按钮的点击
    var previousIndex = 0
    var currentIndex = 0
    var controlEl = document.querySelector(".control")
    var prevBtnEl = document.querySelector(".prev")
    var nextBtnEl = document.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.暂停自动轮播
    var bannerEl = document.querySelector(".banner")

    // 对功能封装的函数
    // 封装到函数 ：switchBannerItem
    function switchBannerItem(){
        // 1.切换整个imageEl的transform
        imagesEl.style.transform = `translateX(${-currentIndex * 100}%)`
        // 2.切换指示器的item
        var currentInItemEl = indicatorEl.children[currentIndex]
        var previousInItemEl = indicatorEl.children[previousIndex]
        previousInItemEl.classList.remove("active")
        currentInItemEl.classList.add("active")
    }

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

        // 让currentIndex变成active状态，让preious变成普通的状态
        switchBannerItem()
    } 
  </script>

</body>
</html>

11.轮播图-无限滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 {
        position: relative;
        overflow: hidden;
      }
  
      .banner .images {
        position: relative;
        height: 550px;
  
        transition: all 500ms ease;
      }
  
      .banner .images .item {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        overflow: hidden;
        transition: opacity 1000ms ease;
      }
  
      .banner .images .item img {
        position: relative;
        transform: translate(-50%);
        left: 50%;
        width: 1920px;
        height: 550px;
      }
  
      .indicator {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 42px;
        display: flex;
        justify-content: center;
      }
  
      .indicator .item {
        width: 8px;
        height: 8px;
        margin: 0 10px;
        border-radius: 50%;
        background-color: #aaa;
        cursor: pointer;
      }
  
      .indicator .item.active {
        background-color: #f00;
      }
    </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>
        /*
            1.修改布局(css中)
            2.需要让轮播结构: 最后一个位置添加第一个元素, 最前面位置添加最后一个元素
                * 调整这两个的left值
            3.对currentIndex的判断条件放到transform后面
            4.如果滚动到添加的第一个元素
        */
       var bannersCount = banners.length
       var animationDuration = 500

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

       // 1.根据数据动态添加页面内容
       // 1.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)
        // 设置itemEl的样式(left)
        itemEl.style.left = `${i * 100}%`

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

       // 追加：（无限轮播），最后和最前分别添加一个元素
       var firstItem = imagesEl.children[0].cloneNode(true)
       var lastItem = imagesEl.children[bannersCount - 1].cloneNode(true)
       imagesEl.append(firstItem)
       imagesEl.prepend(lastItem)
       // 调整位置
       lastItem.style.left = "-100%"
       firstItem.style.left = `${bannersCount * 1000}%`

       // 1.2 动态添加指示器内容
       var indicatorEl = document.querySelector(".indicator")
       for(var i = 0; i < bannersCount;i++){
            var itemEl = document.createElement("div")
            itemEl.classList.add("item")
            if(i === 0){
                itemEl.classList.add("active")
            }
            indicatorEl.append(itemEl)

            // 监听指示器item的点击
            itemEl.index = i 
            itemEl.onclick = function(){
                previousIndex = currentIndex
                currentIndex = this.index
                switchBannerItem()
            }
       }

       // 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--
        // 让currentIndex变成active状态，让previous变成普通状态
        switchBannerItem()
       }

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

       // 4.暂停自动轮播
       var bannerEl = document.querySelector(".banner")
       bannerEl.onmouseenter = function(){
        stopTimer()
       }
       bannerEl.onmouseleave = function(){
        startTimer()
       }

       // 对功能封装的函数
       // 封装到函数：switchBannerItem
       function switchBannerItem(){
        // 1.切换整个imagesEl的transform
        imagesEl.style.transition = `all ${animationDuration}ms ease`
        imagesEl.style.transform = `translateX(${-currentIndex * 100}%)`

        if(currentIndex === bannersCount){
            currentIndex  = 0
            fixBannerPosition()
        }else if(currentIndex === -1){
            currentIndex = bannersCount - 1
            fixBannerPosition()
        }

        // 2.切换指示器的item
        var currentInItemEl = indicatorEl.children[currentIndex]
        var previousInItemEl = indicatorEl.children[previousIndex]
        previousInItemEl.classList.remove("active")
        currentInItemEl.classList.add("active")
       }

       // 封装到函数：播放下一个
       function nextSwitch(){
        // 找到下一个
        previousIndex = currentIndex
        currentIndex++
        // 让currentIndex变成active状态，让previous变成普通的状态
        switchBannerItem()
       }

       // 封装到函数：开启定时器
       function startTimer(){
        if(timer) return
        timer = setInterval(function(){
            nextSwitch()
        },3000)
       }
       function stopTimer(){
        if(!timer) return
        clearInterval(timer)
        timer = null // 清除定时器之后，必须timer赋值为null
       }

      // 封装到函数：修正位移的位置
      function fixBannerPosition(){
        setTimeout(() => {
            imagesEl.style.transition = "none"
            imagesEl.style.transform = `translateX(${-currentIndex*100}%)`
        }, animationDuration);
      } 

      // 通过window的焦点
      document.onvisibilitychange = function(){
        console.log("可见性发生改变",document.visibilityState)
        if(document.visibilityState === 'visible'){
            startTimer()
        }else if(document.visibilityState === 'hidden'){
            stopTimer()
        }
      }
      </script>
</body>
</html>

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

<!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>

13.商品列表-服务优惠-排序(debug)

<!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"]

    // 全局保存sortKey
    var sortKey = "default"
    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.获取信息
        sortKey = this.dataset.key

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


    // 封装函数: 过滤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.重新展示数据
      sortResultListAction(true)
    }

    // 封装函数: 通过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(isJustShow) {
      if (sortKey === "default" && !isJustShow) {
        filterResultListAction()
      } else {
        showResultList.sort(function(item1, item2) {
          return item2[sortKey] - item1[sortKey]
        })
      }
      
      showResultListAction()
    }
  </script>
</body>
</html>

感谢大家观看，我们下次见

版权所属: abzzp
本文链接: https://xvzhu.cn/archives/58.html
协议授权: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》
下一篇 上一篇

评论(0)

最新评论

  • abzzp

    十天看一部剧，还可以吧[[呲牙]]

  • ab

    @梦不见的梦 行，谢谢提醒,我优化一下

  • 梦不见的梦

    网站的速度有待提升，每次打开都要转半天还进不来呢

  • abzzp

    @React实战爱彼迎项目(二) - 程序员鸡皮 哪里有问题了，报错了吗？[[微笑]]

  • abzzp

    @Teacher Du 那是怕你们毕不了业，我大学那会儿给小礼品[[发呆]]

  • Teacher Du

    我们大学那会，献血还给学分~

  • 夜

    @ab 我想去学网安，比如网警，但分也贼高😕

  • ab

    @夜 加油，你一样也可以成为程序员的，需要学习资料可以V我

  • 夜

    佬发布的好多技术文章似乎我只能评论这篇，真正的程序员！！哇塞 我也想去献血，过两年就成年了可以去献血了

日历

2024年11月

日一二三四五六
     12
3456789
10111213141516
17181920212223
24252627282930

标签云

vue JavaScript React Golang 观后感 ES6 读后感

友情链接

白雾茫茫丶 boys博客 云烟博客 时光日志

文章目录

推荐关键字： vue JavaScript React Golang 观后感 ES6 读后感

站点公告
本站是作为记录一名北漂程序员编程学习以及日常的博客，欢迎添加微信BmzhbjzhB咨询交流......
点击小铃铛关闭
配色方案
高贵黑
默认配色
墨蓝色
优雅白