Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 选择卡示例购物车练习(逻辑有点跟不上，取消选择框重新计算价格没有写出来)，又练习了幻灯片的制作
Blogger Information
Blog 37
fans 1
comment 0
visits 24212
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
选择卡示例购物车练习(逻辑有点跟不上，取消选择框重新计算价格没有写出来)，又练习了幻灯片的制作
卢先生
Original
271 people have browsed it

选择卡示例
重新复习了.filter返回条件的第一个元素（数组型）
重新复习了.find 返回符合条件的第一个元素
重新复习了.classList.remove 删除class元素
重新复习了.classList.add 增加元素
重新复习了.currentTarget 绑定者
重新复习了.target 触发者
重新复习了.Array.from 类数组转换
重新复习了[…类数组] 类数组转换
重新复习了.dataset.index 自定义元素

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>实战选择卡</title>
  7.   </head>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.     }
  15.     div {
  16.       border: green 1px solid;
  17.       height: 20rem;
  18.       display: grid;
  19.       grid-template-rows: repeat(4, 1fr);
  20.     }
  22.     .head .heada {
  23.       display: none;
  24.     }
  26.     .head ul:first-of-type li {
  27.       clear: none;
  28.       float: left;
  29.       color: orange;
  30.       padding: 2px;
  31.       margin: 2px;
  32.     }
  34.     .head .heada.index {
  35.       display: block;
  36.     }
  38.     li {
  39.       list-style: none;
  40.     }
  42.     body {
  43.       display: grid;
  44.     }
  46.     .gaoliang {
  47.       background-color: green;
  48.       display: block;
  49.     }
  51.     a {
  52.       color: #fff;
  53.     }
  55.     div ul.heada.gaoliang {
  56.       display: block;
  57.     }
  58.   </style>
  60.   <body>
  61.     <div class="head">
  62.       <ul onclick="show()">
  63.         <li data-index="1" class="gaoliang">测试1</li>
  64.         <li data-index="2">测试2</li>
  65.         <li data-index="3">测试3</li>
  66.       </ul>
  67.       <ul class="heada index gaoliang" data-index="1">
  68.         <li><a href="#">选择卡1</a></li>
  69.         <li><a href="#">选择卡1</a></li>
  70.         <li><a href="#">选择卡1</a></li>
  71.       </ul>
  72.       <ul class="heada" data-index="2">
  73.         <li><a href="#">选择卡2</a></li>
  74.         <li><a href="#">选择卡2</a></li>
  75.         <li><a href="#">选择卡2</a></li>
  76.       </ul>
  77.       <ul class="heada" data-index="3">
  78.         <li><a href="#">选择卡3</a></li>
  79.         <li><a href="#">选择卡3</a></li>
  80.         <li><a href="#">选择卡3</a></li>
  81.       </ul>
  82.     </div>
  83.     <script>
  84.       function show() {
  85.         console.log(event);
  86.         // 当前事件绑定到了父级
  87.         console.log(event.currentTarget);
  88.         // 查看当前事件触发者
  89.         console.log(event.target);
  90.         const ul = event.currentTarget;
  91.         const li = event.target;
  92.         // 当点击某个标签时，其他标签取消高亮，当前标签变为高亮
  93.         // 先拿到当前ul绑定者的子级，触发者，
  94.         console.log(ul.children);
  95.         // 当前触发者是类数组，需要处理成数组
  96.         console.log([...ul.children]);
  97.         //   意思是拿到ul的子元素， 循环找到所有li标签， 删除所有的class属性值为gaoliang的
  98.         [...ul.children].forEach(li => li.classList.remove("gaoliang"));
  99.         // 这个地方意思就是触发者追加一个class属性值为gaoliang
  100.         li.classList.add("gaoliang");
  101.         /////////////////拿内容部分/////////////////
  102.         const uls = document.querySelectorAll(".heada");
  103.         console.log(uls);
  104.         const ulsa = Array.from(uls);
  106.         // 老实说不需要转换，都是数组形式，我已经转换完了，看了看
  107.         uls.forEach(li => li.classList.remove("gaoliang"));
  108.         // 然后转换成数组，之前我已经转换成ulsa了
  109.         // filter过滤器过滤满足条件的data-inedx的数据
  110.         // 把filter换成find拿到的是这个html节点
  111.         const content = [...ulsa].find(function (ul) {
  112.           return ul.dataset.index === li.dataset.index;
  113.         });
  114.         console.log(content);
  115.         // contents返回的值就是一个数组，一个成员的数组，换一个方法来
  116.         content.classList.add("gaoliang");
  117.       }
  118.     </script>
  119.   </body>
  120. </html>

购物车跟老师写了一遍,加强了map,foreach两种遍历循环的认识,以及reduce叠加器认识,
虽然加强认识,但是总是感觉乱乱的,看到map一般是函数的返回上,但是foreach一般是填充到页面上.reduce累加器一般是计算结果,map或者把数组里面的索引拿出来单独用,还得强加联系
代码部分:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>实战:购物车计算</title>
  8.     <style>
  9.       .box {
  10.         width: 22em;
  11.         height: 2em;
  12.       }
  13.       .list > li {
  14.         height: 1.6em;
  15.         background-color: #efefef;
  17.         display: grid;
  18.         grid-template-columns: repeat(5, 3em);
  19.         gap: 1em;
  20.         place-items: center right;
  21.         border-bottom: 1px solid #ccc;
  22.       }
  23.       .list > li:first-of-type {
  24.         background-color: lightseagreen;
  25.         color: white;
  26.       }
  27.       .list > li:hover:not(:first-of-type) {
  28.         cursor: pointer;
  29.         background-color: lightcyan;
  30.       }
  31.       .list > li input[type="number"] {
  32.         width: 3em;
  33.         border: none;
  34.         outline: none;
  35.         text-align: center;
  36.         font-size: 1em;
  37.         background-color: transparent;
  38.       }
  40.       .list > li:last-of-type span.total-num,
  41.       .list > li:last-of-type span.total-amount {
  42.         grid-column: span 2;
  43.         place-self: center right;
  44.         color: lightseagreen;
  45.       }
  46.       .account {
  47.         float: right;
  48.         background-color: lightseagreen;
  49.         color: white;
  50.         border: none;
  51.         outline: none;
  52.         width: 4.5em;
  53.         height: 1.8em;
  54.       }
  55.       .account:hover {
  56.         background-color: coral;
  57.         cursor: pointer;
  58.       }
  59.     </style>
  60.   </head>
  61.   <body>
  62.     <div class="box">
  63.       <div class="selectAll">
  64.         <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
  65.         <label for="check-all">全选</label>
  66.       </div>
  67.       <ul class="list">
  68.         <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
  69.         <li>
  70.           <input type="checkbox" onchange="checkItems()" checked />
  71.           <span class="content">手机</span>
  72.           <input type="number" value="1" min="1" class="num" />
  73.           <span class="price">100</span>
  74.           <span class="amount">0</span>
  75.         </li>
  76.         <li>
  77.           <input type="checkbox" onchange="checkItems()" checked />
  78.           <span class="content">电脑</span>
  79.           <input type="number" value="2" min="1" class="num" />
  80.           <span class="price">200</span><span class="amount">0</span>
  81.         </li>
  82.         <li>
  83.           <input type="checkbox" onchange="checkItems()" checked />
  84.           <span class="content">相机</span>
  85.           <input type="number" value="3" min="1" class="num" />
  86.           <span class="price">300</span>
  87.           <span class="amount">0</span>
  88.         </li>
  89.         <li>
  90.           <span>总计:</span>
  91.           <span class="total-num">0</span>
  92.           <span class="total-amount">0</span>
  93.         </li>
  94.       </ul>
  95.       <button class="account">结算</button>
  96.     </div>
  97.   </body>
  98.   <script>
  99.     function checkAll() {
  100.       // 获取全选框的点击状态 返回true跟false
  101.       let ad = event.target.checked;
  102.       console.log(ad);
  103.       //   获取下面所有的全选框状态,根据主全选框动态设置子全选框
  104.       let zys = document.querySelectorAll(".list li input[type=checkbox]");
  105.       console.log(zys);
  106.       //   用forEach循环拿到数组zys的数组值,然后让ad的值全部给数组的值
  107.       zys.forEach(function (zhi) {
  108.         return (zhi.checked = ad);
  109.       });
  110.     }
  112.     function checkItems() {
  113.       let zys = document.querySelectorAll(".list li input[type=checkbox]");
  114.       console.log(zys);
  115.       //   every判断
  116.       let quanxuan = [...zys].every(function (zhi) {
  117.         //   判断zhi.checked全部返回true则返回true 如果不是则返回fales
  118.         return zhi.checked === true;
  119.       });
  120.       //   把每个商品every返回的状态,给全选按钮
  121.       document.querySelector(".check-all").checked = quanxuan;
  122.     }
  123.     //////////////商品自动计算//////////////////////
  124.     const nums = document.querySelectorAll(".num");
  125.     console.log(nums);
  126.     console.log([...nums]);
  127.     // 购物车所有的数据计算依据是:基于商品的"数量"的变化
  128.     function zongshu(numArr) {
  129.       // acc是累加器,aur是当前数组的每一个值
  130.       return numArr.reduce(function (acc, cur) {
  131.         return acc + cur;
  132.       });
  133.     }
  135.     //////////////计算每个商品的总额///////////////
  136.     // 这里的函数 里面的两个值,都是一个数组,nuarr是数量,pricearr是单价
  137.     function getAmount(numArr, priceArr) {
  138.       //   这里那numarr当数组处理, map是数组的值 index是键 而pricearr对应了map里面值的键 所以map的键=pricearr的键
  139.       return numArr.map((num, index) => num * priceArr[index]);
  140.     }
  141.     ///////////计算总金额//////////////
  142.     function getTotalAmount(amountArr) {
  143.       return amountArr.reduce((acc, cur) => acc + cur);
  144.     }
  145.     // 自动计算
  146.     function autoCalculate() {
  147.       // 数量数组 从class num中拿到数量,然后用map返回数组
  148.       const numArr = [...nums].map(function (num) {
  149.         //   直接从value里面拿的值
  150.         return parseInt(num.value);
  151.       });
  152.       //单价数组 单价数组保存在class=price中
  153.       const prices = document.querySelectorAll(".price");
  154.       //   处理单价 处理成数组//为什么使用textcontent 因为他在html中
  155.       const pricearr = [...prices].map(num => parseInt(num.textContent));
  156.       //金额数组
  157.       const amountArr = getAmount(numArr, pricearr);
  158.       console.log(amountArr);
  159.       // 总数量
  160.       document.querySelector(".total-num").textContent = zongshu(numArr);
  161.       //   金额
  162.       document.querySelectorAll(".amount").forEach((amount, index) => (amount.textContent = amountArr[index]));
  163.       //   总金额
  164.       document.querySelector(".total-amount").textContent = getTotalAmount(amountArr);
  165.     }
  166.     console.log(autoCalculate());
  167.     // 当购物车加载时触发
  168.     window.onload = autoCalculate;
  170.     //当数量更新时,触发自动计算
  171.     nums.forEach(num => (num.onchange = autoCalculate));
  172.   </script>
  173. </html>

幻灯片部分，重新学习了onclick点击事件，已经定时器派发事件的使用，并且对函数的执行有了更加深入的了解，以及自定义dataset.index的深入了解

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  9.     <head>
  10.         <meta charset="UTF-8" />
  11.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  12.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  13.         <title>实战4: 轮播图</title>
  14.         <style>
  15.             /* ! 3. 轮播图 */
  17.             .slider {
  18.                 max-width: 750px;
  19.                 min-width: 320px;
  20.                 margin: auto;
  21.                 padding: 0 10px;
  22.             }
  24.             .slider .imgs {
  25.                 /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  26.                 height: 150px;
  27.             }
  29.             .slider .imgs img {
  30.                 /* 图片完全充满父级空间显示 */
  31.                 height: 100%;
  32.                 width: 100%;
  33.                 /* 图片带有圆角 */
  34.                 border-radius: 10px;
  35.                 /* 默认图片全部隐藏,只有有active的图片才显示 */
  36.                 display: none;
  37.             }
  38.             /* 默认显示第一张 */
  40.             .slider .imgs img.active {
  41.                 display: block;
  42.             }
  43.             /* 轮播图按钮组 */
  45.             .slider .btns {
  46.                 /* 按钮水平一排显示,用flex,且水平居中 */
  47.                 display: flex;
  48.                 place-content: center;
  49.             }
  51.             .slider .btns span {
  52.                 /* 按钮宽高相同,确定显示成一个正圆 */
  53.                 width: 8px;
  54.                 height: 8px;
  55.                 /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
  56.                 background-color: rgba(255, 255, 255, 0.4);
  57.                 /* 50%可确保显示为正圆 */
  58.                 border-radius: 50%;
  59.                 /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
  60.                 margin: -12px 3px 5px;
  61.             }
  63.             .slider .btns span.active {
  64.                 background-color: #fff;
  65.             }
  66.         </style>
  67.     </head>
  69.     <body>
  70.         <div class="slider">
  71.             <!-- 图片容器 -->
  72.             <div class="imgs">
  73.                 <!-- 轮播图默认从第一张开始显示 -->
  74.                 <a href=""><img src="./images/banner1.jpg" alt="" data-index="1" class="active" /></a>
  75.                 <a href=""><img src="./images/banner2.jpg" alt="" data-index="2" /></a>
  76.                 <a href=""><img src="./images/banner3.png" alt="" data-index="3" /></a>
  77.             </div>
  78.             <!-- 切换按钮数量与图片数量必须一致 -->
  79.             <div class="btns">
  80.                 <span data-index="1" class="active" onclick="setActive()"></span>
  81.                 <span data-index="2" onclick="setActive()"></span>
  82.                 <span data-index="3" onclick="setActive()"></span>
  83.             </div>
  84.         </div>
  85.     </body>
  86.     <script>
  87.         //获取全部图片及图片按钮
  88.         let imgs = document.querySelectorAll(".slider .imgs img")
  89.         console.log(imgs)
  90.         let spans = document.querySelectorAll(".slider .btns span")
  91.         console.log(spans)
  92.             // 设置激活按钮
  93.         function setActive() {
  94.             imgs.forEach(i => i.classList.remove("active"))
  95.             spans.forEach(i => i.classList.remove("active"))
  96.                 // 触发者增加class active
  97.             event.target.classList.add("active");
  98.             //  图片已经设置了一个foreach循环删除active，下面遍历imgs，如果imgdataset.index===点击的spans触发者是同一个dataset.index
  99.             // 则img class增加active
  100.             imgs.forEach(function(img) {
  101.                 if (img.dataset.index === event.target.dataset.index) {
  102.                     img.classList.add("active")
  103.                 }
  104.             });
  107.         }
  109.         // 设置定时器
  110.         setInterval(
  111.             function(arr) {
  112.                 // 声明一个i，删除数组里面的第一项
  113.                 let i = arr.shift(); ///括号 括号 不是中括号
  114.                 // 派发事件i等于btns里面的索引，派发一个click点击事件
  115.                 spans[i].dispatchEvent(new Event("click"));
  116.                 // push尾部塞入 塞入是push() 括号 括号 不是中括号
  117.                 arr.push(i);
  118.             },
  119.             2000,
  120.             Object.keys(spans)
  121.         );
  122.     </script>
  124. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：可以在自动计算那判断一下每一行的状态
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post