ASCII码 ASCII码

双色球、选项卡、购物车实例

发布于：2022-05-28 15:38:07  栏目：技术文档

1 双色球

  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.   </head>
  9.   <style>
  10.     .box {
  11.       display: grid;
  12.       grid-template-columns: repeat(auto-fill, 30px);
  13.       grid-auto-rows: 30px;
  14.       gap: 5px;
  15.     }
  16.     .box > li {
  17.       list-style: none;
  18.       display: grid;
  19.       border-radius: 50%;
  20.       background-color: red;
  21.       color: wheat;
  22.       box-shadow: 2px 2px 2px #666;
  23.       line-height: 30px;
  24.       text-align: center;
  25.     }
  26.     .box > li:last-of-type {
  27.       background-color: blue;
  28.     }
  29.   </style>
  30.   <body>
  31.     <div class="box"></div>
  32.     <script>
  33.       // 红球： 1-33=>6,不重复,排序
  34.       // 篮球： 1-16=>1,可以和红球重复
  36.       // 思路：
  37.       // 1、先取红球，放在一个中奖号数组中，排序
  38.       // 2、然后把蓝球追加到中奖数组中
  39.       // 3.最后还要把中奖数组渲染到页面：dom
  41.       // 临时数组
  42.       let arr = [];
  44.       // 中奖数组
  45.       let res = [];
  47.       // 1、生成1-33个红球
  48.       for (let i = 1; i <= 33; i++) {
  49.         arr.push(i);
  50.       }
  51.       console.log(arr);
  53.       // 2、从33个红球中取出6个
  54.       for (let i = 0; i < 6; i++) {
  55.         // arr的下标取值范围：[0-32]
  56.         // 问题：如何生成0-32这样的整数索引，用它来获取数组中的数据
  57.         // Math.random(): 0-1之间的随机小数
  58.         // 0-33之间的小数，但永远不会到33这个数
  59.         // 0.0123， 32.99999，向下取整
  60.         // 0.0123 => 0 , 32.99999 => 32
  61.         // console.log(Math.random() * 33);
  62.         // console.log(Math.random() * arr.length);
  63.         // console.log(Math.floor(Math.random() * arr.length));
  64.         // 索引是唯一的，为什么重复了
  65.         // 索引不好重复，但是对应的值会重复
  66.         // [1,2,3,2]
  67.         // 0=>1,1=>2,2=>3,3=>2
  68.         // 应该每取一个就从原数组中删除一个
  69.         let index = Math.floor(Math.random() * arr.length);
  70.         // console.log(Math.ceil(1.000001)); 向上取整 返回2
  71.         res.push(arr[index]);
  72.       }
  74.       // 排序
  75.       res.sort((a, b) => a - b);
  76.       console.log(res);
  78.       // 3、生成一个蓝球，并追加到中奖数组中
  79.       // 必须是：1-16之间，并包括1,16
  80.       let blue = Math.ceil(Math.random() * 16);
  81.       console.log(blue);
  82.       res.push(blue);
  83.       console.log(res);
  85.       // 4、将中奖号码显示到页面中
  86.       const box = document.querySelector('.box');
  87.       res.forEach((item) => {
  88.         const ball = document.createElement('li');
  89.         ball.textContent = item;
  90.         box.append(ball);
  91.       });
  92.     </script>
  93.   </body>
  94. </html>

2.选项卡

  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.   </head>
  9.   <style>
  10.     .box {
  11.       width: 28em;
  12.       display: grid;
  13.       grid-template-columns: 3em 1fr;
  14.     }
  16.     .box ul {
  17.       margin: 0;
  18.       padding: 0;
  19.     }
  21.     .box li {
  22.       list-style: none;
  23.       /* height: 2em; */
  24.     }
  26.     .box li a {
  27.       text-decoration: none;
  28.     }
  30.     .box li:hover {
  31.       cursor: pointer;
  32.     }
  34.     .box .content {
  35.       background-color: lightgreen;
  36.       display: none;
  37.       place-self: center start;
  38.     }
  40.     .box .content.active {
  41.       display: block;
  42.     }
  44.     .box .menu li.active {
  45.       background-color: lightgreen;
  46.     }
  47.   </style>
  48.   <body>
  49.     <div class="box">
  50.       <!-- 1. 标签 -->
  51.       <!-- 子元素上的点击事件会冒泡到父元素,利用这个特点,只需要给父元素添加点击事件就可以了 -->
  52.       <ul class="menu" onclick="show()">
  53.         <!-- 先给默认显示的标签和对应的内容添加 class="active"处于激活状态/可见 -->
  54.         <!-- 使用自定义属性data-index使标签和与之对应的内容进行绑定 -->
  55.         <li data-index="1" class="active">本省</li>
  56.         <li data-index="2">全国</li>
  57.         <li data-index="3">防疫</li>
  58.       </ul>
  60.       <!-- 2. 内容 -->
  61.       <ul class="content active" data-index="1">
  62.         <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  63.         <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  64.         <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  65.         <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  66.         <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  67.       </ul>
  69.       <ul class="content" data-index="2">
  70.         <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  71.         <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  72.         <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  73.         <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  74.         <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  75.       </ul>
  77.       <ul class="content" data-index="3">
  78.         <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  79.         <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  80.         <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  81.         <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  82.         <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  83.       </ul>
  84.     </div>
  85.     <script>
  86.       function show() {
  87.         // 事件绑定者
  88.         // console.log(event.currentTarget);
  89.         // 事件主体
  90.         // console.log(event.target);
  92.         const ul = event.currentTarget;
  93.         const li = event.target;
  95.         // 1. 将原高亮的标签去掉active,并把当前的标签设置为active
  96.         [...ul.children].forEach((li) => li.classList.remove('active'));
  97.         li.classList.add('active');
  99.         // 2. 根据标签的data-index进行查询,获取与它对应的列表
  100.         const content = document.querySelectorAll('.content');
  101.         // document.querySelectorAll()返回的是NodeList对象,上面已定义了forEach,所以不用转真数组
  102.         console.log(content);
  104.         content.forEach((li) => li.classList.remove('active'));
  106.         console.log(
  107.           [...content].filter((ul) => ul.dataset.index === li.dataset.index)[0]
  108.         );
  109.         //    filter(ul => ul.dataset.index === li.dataset.index)[0]
  110.         //    用find进行简化, find就是获取filter结果数组中的第一个
  111.         [...content]
  112.           .find((ul) => ul.dataset.index === li.dataset.index)
  113.           .classList.add('active');
  114.       }
  115.     </script>
  116.   </body>
  117. </html>

3.购物车（半成品）

  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.       }
  14.       .list > li {
  15.         height: 1.6em;
  16.         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.       }
  24.       .list > li:first-of-type {
  25.         background-color: lightseagreen;
  26.         color: white;
  27.       }
  29.       .list > li:hover:not(:first-of-type) {
  30.         cursor: pointer;
  31.         background-color: lightcyan;
  32.       }
  34.       .list > li input[type='number'] {
  35.         width: 3em;
  36.         border: none;
  37.         outline: none;
  38.         text-align: center;
  39.         font-size: 1em;
  40.         background-color: transparent;
  41.       }
  43.       .list > li:last-of-type span.total-num,
  44.       .list > li:last-of-type span.total-amount {
  45.         grid-column: span 2;
  46.         place-self: center right;
  47.         color: lightseagreen;
  48.       }
  50.       .account {
  51.         float: right;
  52.         background-color: lightseagreen;
  53.         color: white;
  54.         border: none;
  55.         outline: none;
  56.         width: 4.5em;
  57.         height: 1.8em;
  58.       }
  60.       .account:hover {
  61.         background-color: coral;
  62.         cursor: pointer;
  63.       }
  64.     </style>
  65.   </head>
  66.   <body>
  67.     <div class="box">
  68.       <div class="selectAll">
  69.         <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change  -->
  70.         <input
  71.           type="checkbox"
  72.           class="check-all"
  73.           name="check-all"
  74.           onchange="checkAll()"
  75.           checked
  76.         />
  77.         <label for="check-all">全选</label>
  78.       </div>
  79.       <ul class="list">
  80.         <li>
  81.           <span>选择</span><span>品名</span><span>数量</span><span>单价</span
  82.           ><span>金额</span>
  83.         </li>
  84.         <li>
  85.           <input type="checkbox" onchange="checkItems()" checked />
  86.           <span class="content">手机</span>
  87.           <input type="number" value="1" min="1" class="num" />
  88.           <span class="price">100</span>
  89.           <span class="amount">0</span>
  90.         </li>
  91.         <li>
  92.           <input type="checkbox" onchange="checkItems()" checked />
  93.           <span class="content">电脑</span>
  94.           <input type="number" value="2" min="1" class="num" />
  95.           <span class="price">200</span><span class="amount">0</span>
  96.         </li>
  97.         <li>
  98.           <input type="checkbox" onchange="checkItems()" checked />
  99.           <span class="content">相机</span>
  100.           <input type="number" value="3" min="1" class="num" />
  101.           <span class="price">300</span>
  102.           <span class="amount">0</span>
  103.         </li>
  104.         <li>
  105.           <span>总计:</span>
  106.           <span class="total-num">0</span>
  107.           <span class="total-amount">0</span>
  108.         </li>
  109.       </ul>
  110.       <button class="account">结算</button>
  111.     </div>
  112.     <script>
  113.       // 1.全选
  114.       function checkAll() {
  115.         // 1.全选按钮状态
  116.         let status = event.target.checked;
  117.         // console.log(status);
  118.         // 2.根据状态动态设置所有商品的状态
  119.         let items = document.querySelectorAll(
  120.           '.list li input[type="checkbox"]'
  121.         );
  122.         items.forEach((item) => (item.checked = status));
  123.       }
  125.       // 2.根据用户选择来动态设置全选状态
  126.       function checkItems() {
  127.         // 1.拿到全部商品
  128.         let items = document.querySelectorAll(
  129.           '.list li input[type="checkbox"]'
  130.         );
  132.         // 2.判断状态，只有全部被选中，才需要设置为全选true,   array.every
  133.         let status = [...items].every((item) => item.checked === true);
  134.         // console.log(status);
  135.         // 3.将这个状态设置到全选按钮
  136.         document.querySelector('.check-all').checked = status;
  137.       }
  139.       // 商品自动计算
  140.       // 所有计算都是基于商品数量的变化
  142.       let nums = document.querySelectorAll('.num');
  143.       console.log(nums);
  144.       let items = document.querySelectorAll(".list li input[type='checkbox']");
  145.       // nums.forEach((item) => console.log(item.value));
  147.       //判断商品是否被选中，获取到选中的商品
  148.       function goodStatus(numArr) {
  149.         let items = document.querySelectorAll(
  150.           ".list li input[type='checkbox']"
  151.         );
  152.         return numArr.map((num, index) => {
  153.           if (items[index].checked === true) {
  154.             return num;
  155.           } else {
  156.             return 0;
  157.           }
  158.         });
  159.       }
  161.       // 1. 计算总数量
  162.       function getTotalNum(numArr) {
  163.         return numArr.reduce((acc, cur) => acc + cur);
  164.       }
  166.       // 2. 计算每个商品的金额
  167.       function getAmount(numArr, priceArr) {
  168.         // 金额 = 数量 * 单价
  169.         return numArr.map((num, index) => num * priceArr[index]);
  170.       }
  171.       // console.log(getAmount([1, 2, 4], [100, 200, 300]));
  173.       // 3. 计算总金额
  174.       function getTotalAmount(amountArr) {
  175.         return amountArr.reduce((acc, cur) => acc + cur);
  176.       }
  178.       // 4. 自动计算
  179.       function autoCalculate() {
  180.         // 商品数量数组
  181.         let numArr = [...nums].map((num) => parseInt(num.value));
  182.         numArr = goodStatus(numArr);
  183.         console.log(numArr);
  185.         // 单价数组
  186.         const prices = document.querySelectorAll('.price');
  187.         const priceArr = [...prices].map((price) =>
  188.           parseInt(price.textContent)
  189.         );
  191.         // 金额数组
  192.         const amountArr = getAmount(numArr, priceArr);
  193.         console.log(amountArr);
  195.         // 总数量
  196.         console.log(getTotalNum(numArr));
  197.         document.querySelector('.total-num').textContent = getTotalNum(numArr);
  198.         // 总金额
  199.         document.querySelector('.total-amount').textContent =
  200.           getTotalAmount(amountArr);
  202.         // 为每个商品填充金额
  203.         document
  204.           .querySelectorAll('.amount')
  205.           .forEach((amount, index) => (amount.textContent = amountArr[index]));
  206.       }
  208.       // 当页面加载的时候自动计算
  209.       window.onload = autoCalculate;
  211.       // 当数量更新时，自动计算所有数据
  212.       nums.forEach((num) => (num.onchange = autoCalculate));
  214.       // 计算选中状态商品数据
  215.       items.forEach((item) => (item.onchange = autoCalculate));
  216.     </script>
  217.   </body>
  218. </html>

虽然实现了，点击选择下面的复选框，对选中的商品进行计算。但是全选功能缺失效了。也没有实现全选反选对商品进行计算，请老师看到后回复一下解决方案，实在是做不出来这个效果

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行