search

博客列表 >双色球抽奖、选项卡、购物车（实现动态勾选商品计算价格）

双色球抽奖、选项卡、购物车（实现动态勾选商品计算价格）

李玉峰
李玉峰原创
2022年04月12日 01:08:58452浏览

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.     <style>
  9.       .box {
  10.         display: grid;
  11.         grid-template-columns: repeat(auto-fill, 30px);
  12.         grid-auto-rows: 30px;
  13.         gap: 5px;
  14.       }
  16.       .box > div {
  17.         border-radius: 50%;
  18.         display: grid;
  19.         place-items: center;
  20.         background-color: red;
  21.         color: white;
  22.         box-shadow: 2px 2px 2px #666;
  23.       }
  25.       .box > div:last-of-type {
  26.         background-color: blue;
  27.       }
  28.     </style>
  29.   </head>
  31.   <body>
  32.     <div class="box"></div>
  33.     <button onclick="refresh()" style="margin-top: 10px">抽奖</button>
  34.     <script>
  35.       function refresh() {
  36.         // 红球: 1-33=>6,不重复,排序
  37.         // 蓝球: 1-16=>1, 可以和红球重复
  39.         // 思路:
  40.         // 1. 先取红球, 放在一个中奖号数组中, 排序
  41.         // 2. 然后把蓝球追加到中奖数组中
  42.         // 3. 最后还要马中奖数组渲染到页面: dom
  44.         // 临时数组: 放红球
  45.         let arr = [];
  47.         // 全部中奖数组,最后应该有7个数,6个红球,1个蓝球
  48.         let res = [];
  50.         // 1. 生成1-33个红球
  51.         for (let i = 1; i <= 33; i++) {
  52.           arr.push(i);
  53.         }
  54.         console.log(arr);
  56.         // 2. 从33个红球中取出6个
  57.         for (let i = 0; i < 6; i++) {
  58.           // arr的下标取值范围: [0-32]
  59.           // 问题: 如何生成0-32这样的整数索引,用它来获取数组中的数据
  60.           // Math.random(): 0-1之间的随机小数
  62.           // console.log(Math.random());
  63.           // 0-33之间的小数,但永远不会到33这个数
  64.           // 0.0123, 32.999999, 向下取整
  65.           // 0.0123 => 0
  66.           // 32.9999999 => 32
  67.           // console.log(Math.random() * 33);
  68.           // console.log(Math.random() * arr.length);
  69.           // console.log(Math.floor(Math.random() * arr.length));
  70.           // 索引是唯一的,为什么重复了
  71.           // 索引不会重复,但是对应的值会重复
  72.           // [1,2,3,2]
  73.           // 0=>1,1=>2, 2=>3, 3=>2
  74.           // 应该每取一个就从原始数组中删除一个
  75.           let index = Math.floor(Math.random() * arr.length);
  76.           // console.log(Math.ceil(1.000001));
  77.           res.push(arr[index]);
  78.           arr.splice(index, 1);
  79.         }
  81.         // 排序
  82.         res.sort((a, b) => a - b);
  84.         console.log(res);
  86.         // 3. 生成一个蓝球, 并追加到中奖数组中
  87.         // 必须是: 1-16之间,并包括 1, 16
  88.         let blue = Math.floor(Math.random() * 16) + 1;
  89.         console.log(blue);
  90.         res.push(blue);
  91.         console.log(res);
  93.         // 4. 将中奖号码显示到页面中
  94.         const box = document.querySelector(".box");
  96.         let box_content = box.children.length;
  98.         console.log(box_content);
  99.         console.log("不太明白这里的判断作用");
  100.         if (box_content !== 0) {
  101.           box.innerHTML = "";
  102.         }
  104.         res.forEach((item) => {
  105.           const ball = document.createElement("div");
  106.           ball.textContent = item;
  107.           box.append(ball);
  108.         });
  109.       }
  111.       window.onload = refresh;
  112.     </script>
  113.   </body>
  114. </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.     <style>
  9.       .box {
  10.         width: 28em;
  11.         display: grid;
  12.         grid-template-columns: 3em 1fr;
  13.       }
  14.       .box ul {
  15.         margin: 0;
  16.         padding: 0;
  17.       }
  19.       .box li {
  20.         list-style: none;
  21.         /* height: 2em; */
  22.       }
  24.       .box li a {
  25.         text-decoration: none;
  26.       }
  27.       .box li:hover {
  28.         cursor: pointer;
  29.       }
  31.       .box .content {
  32.         background-color: lightgreen;
  33.         display: none;
  34.         place-self: center start;
  35.       }
  36.       .box .content.active {
  37.         display: block;
  38.       }
  39.       .box .menu li.active {
  40.         background-color: lightgreen;
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <div class="box">
  46.       <!-- 标签 -->
  47.       <!-- 子元素(li点击)上的点击事件会冒泡到父元素(ul),利用这个特点,只需要给父元素添加点击事件即可 -->
  48.       <ul class="menu" onclick="show()">
  49.         <!-- 默认显示的标签和内容添加:class="active" -->
  50.         <!-- 使用自定义属性data-index使标签和内容进行绑定 -->
  51.         <li data-index="1" class="active">本市</li>
  52.         <li data-index="2">本省</li>
  53.         <li data-index="3">全国</li>
  54.       </ul>
  55.       <!-- 内容 -->
  56.       <ul class="content active" data-index="1">
  57.         <li><a href="">本市新闻本市新闻本市新闻本市新闻本市新闻</a></li>
  58.         <li><a href="">本市新闻本市新闻本市新闻本市新闻本市新闻</a></li>
  59.         <li><a href="">本市新闻本市新闻本市新闻本市新闻本市新闻</a></li>
  60.         <li><a href="">本市新闻本市新闻本市新闻本市新闻本市新闻</a></li>
  61.         <li><a href="">本市新闻本市新闻本市新闻本市新闻本市新闻</a></li>
  62.       </ul>
  63.       <ul class="content" data-index="2">
  64.         <li><a href="">本省新闻本省新闻本省新闻</a></li>
  65.         <li><a href="">本省新闻本省新闻本省新闻</a></li>
  66.         <li><a href="">本省新闻本省新闻本省新闻</a></li>
  67.         <li><a href="">本省新闻本省新闻本省新闻</a></li>
  68.         <li><a href="">本省新闻本省新闻本省新闻</a></li>
  69.       </ul>
  70.       <ul class="content" data-index="3">
  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.         <li><a href="">全国新闻全国新闻全国新闻</a></li>
  76.       </ul>
  77.     </div>
  78.     <script>
  79.       function show() {
  80.         // console.log("hello");
  81.         // 事件绑定者ul
  82.         // console.log(event.currentTarget);
  83.         // 事件触发者:事件主体li
  84.         // console.log(event.target);
  85.         const ul = event.currentTarget;
  86.         const li = event.target;
  88.         // 标签的切换
  89.         // 1.将原来的高亮标签"active"去掉
  90.         [...ul.children].forEach((li) => li.classList.remove("active"));
  91.         // 2.新点击的ul下的li添加属性:class="active"
  92.         li.classList.add("active");
  94.         // 内容区处理
  95.         // 根据标签的data-index进行查询,获取与标签对应的内容切换
  96.         const content = document.querySelectorAll(".content");
  97.         // document.querySelectorAll()返回的是NodeList对象,上面已定义了forEach
  98.         // console.log(content);
  99.         // 1.将原来的高亮标签"active"去掉
  100.         content.forEach((li) => li.classList.remove("active"));
  101.         // 2.把当前点击的标签对应的content显示出来
  102.         // 获取到data-index对应的值的内容
  103.         // console.log([...content].find((ul) => ul.dataset.index === li.dataset.index));
  104.         // 添加属性:class="active"
  105.         [...content].find((ul) => ul.dataset.index === li.dataset.index).classList.add("active");
  106.       }
  107.     </script>
  108.   </body>
  109. </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>
  67.   <body>
  68.     <div class="box">
  69.       <div class="selectAll">
  70.         <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change  -->
  71.         <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
  72.         <label for="check-all">全选</label>
  73.       </div>
  74.       <ul class="list">
  75.         <li>
  76.           <span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span>
  77.         </li>
  78.         <li>
  79.           <input type="checkbox" onchange="checkItems()" checked />
  80.           <span class="content">手机</span>
  81.           <input type="number" value="1" min="1" max="5" class="num" />
  82.           <span class="price">100</span>
  83.           <span class="amount">0</span>
  84.         </li>
  85.         <li>
  86.           <input type="checkbox" onchange="checkItems()" checked />
  87.           <span class="content">电脑</span>
  88.           <input type="number" value="2" min="1" class="num" />
  89.           <span class="price">200</span><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="3" min="1" class="num" />
  95.           <span class="price">300</span>
  96.           <span class="amount">0</span>
  97.         </li>
  98.         <li>
  99.           <span>总计:</span>
  100.           <span class="total-num">0</span>
  101.           <span class="total-amount">0</span>
  102.         </li>
  103.       </ul>
  104.       <button class="account">结算</button>
  105.     </div>
  107.     <script>
  108.       // 1.全选功能
  109.       function checkAll() {
  110.         //   1.全选按钮状态
  111.         // let status = document.querySelector(".check-all").checked;
  112.         // 事件主体引用
  113.         let status = event.target.checked;
  114.         // console.log(status);
  115.         // 2.动态设置所有商品的状态
  116.         // document.querySelectorAll('.list li input[type="checkbox"]');
  117.         let items = document.querySelectorAll('.list li input[type="checkbox"]');
  118.         // 遍历商品input，修改状态 checked
  119.         items.forEach((item) => (item.checked = status));
  120.       }
  121.       //   2.根据用户选择动态设置：取消其中一个时，全选取消，反之也是
  122.       function checkItems() {
  123.         // alert(1);
  124.         // 1.拿到全部商品
  125.         let items = document.querySelectorAll(".list li input[type='checkbox']");
  126.         // 2.判断状态，只有全部选，才设置全选true,Array.every
  127.         let status = [...items].every((item) => item.checked === true);
  128.         // 状态变化
  129.         document.querySelector(".check-all").checked = status;
  130.         // 更新
  131.         autoCalculate();
  132.         console.log(status);
  133.         // 3.将这个新状态设置到全选按钮上
  134.         document.querySelector(".check-all").checked = status;
  135.       }
  136.       //   商品的自动计算
  137.       //   所有的计算时基于商品数量的变化
  139.       // 计算选中的商品总数量
  140.       const nums = document.querySelectorAll(".num");
  142.       // 商品是否被选中
  143.       function selectedItem(numArr) {
  144.         let items = document.querySelectorAll(".list li input[type='checkbox']");
  145.         return numArr.map((num, index) => {
  146.           if (items[index].checked === false) {
  147.             return (num = 0);
  148.           } else {
  149.             return num;
  150.           }
  151.         });
  152.       }
  153.       //   计算商品总数量
  154.       //   console.log(nums);
  155.       //   查看商品数量
  156.       //   nums.forEach((item) => console.log(item.value));
  157.       //   1.求和计算商品总数量
  158.       function getTotalNum(numArr) {
  159.         numArr = selectedItem(numArr);
  160.         return numArr.reduce((acc, cur) => acc + cur);
  161.       }
  162.       //   console.log(getTotalNum([1, 2, 3]));
  163.       // 2.计算每个商品的金额
  164.       function getAmount(numArr, priceArr) {
  165.         //   金额 = 商品单价 * 数量
  166.         return numArr.map((num, index) => num * priceArr[index]);
  167.       }
  169.       //   3.计算总金额
  170.       function getTotalAmount(amountArr) {
  171.         amountArr = selectedItem(amountArr);
  172.         return amountArr.reduce((acc, cur) => acc + cur);
  173.       }
  175.       //   4.自动计算
  176.       function autoCalculate() {
  177.         //   商品数量数组
  178.         // parseInt()和Number():字符串转换为数字
  179.         const numArr = [...nums].map((num) => parseInt(num.value));
  180.         console.log(numArr);
  182.         //商品单价数组
  183.         const prices = document.querySelectorAll(".price");
  184.         const priceArr = [...prices].map((price) => parseInt(price.textContent));
  185.         console.log(priceArr);
  187.         // 金额数组
  188.         const amountArr = getAmount(numArr, priceArr);
  189.         console.log(amountArr);
  191.         //    计算商品总数量
  192.         console.log(getTotalNum(numArr));
  193.         // 渲染到显示页面
  194.         document.querySelector(".total-num").textContent = getTotalNum(numArr);
  195.         // 渲染总金额到页面中显示
  196.         document.querySelector(".total-amount").textContent = getTotalAmount(amountArr);
  198.         //   渲染每个商品的计算金额到页面中显示
  199.         document
  200.           .querySelectorAll(".amount")
  201.           .forEach((amount, index) => (amount.textContent = amountArr[index]));
  202.       }
  203.       //   console.log(getAmount([12, 2, 3], [100, 200, 300]));
  204.       //   autoCalculate();
  205.       //   当页面加载的时候自动计算
  206.       //   window.onload = function () {
  207.       //     autoCalculate();
  208.       //   };
  209.       //   简化
  210.       window.onload = autoCalculate();
  211.       //   当数量更新时,自动计算其他数据
  212.       [...nums].forEach((num) => (num.onchange = autoCalculate));
  213.     </script>
  214.   </body>
  215. </html>
上一条：轮播图实战下一条：Laravel实现将数据库操作记入日志
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议