search

博客列表 >选择卡示例购物车练习(逻辑有点跟不上，取消选择框重新计算价格没有写出来)，又练习了幻灯片的制作

选择卡示例购物车练习(逻辑有点跟不上，取消选择框重新计算价格没有写出来)，又练习了幻灯片的制作

卢先生
卢先生原创
2022年01月10日 16:24:09270浏览

选择卡示例
重新复习了.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>
上一条：对象字面量的简化，推荐使用下一条：JS事件冒泡；常用字符串、数组函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多