search

博客列表 >双色球, 选项卡，购物车

双色球, 选项卡，购物车

只如初见
只如初见原创
2022年04月13日 08:03:25608浏览

双色球

代码

  1. <div class="box"></div>
  2.     <script>
  3.         // 临时数组: 放红球
  4.         let arr = [];
  5.         // 中奖数组,最后应该有7个数,6个红球,1个蓝球
  6.         let result = [];
  7.         // 1. 生成1-33个红球
  8.         for (let i = 1; i <= 33; i++) {
  9.             arr.push(i);
  10.         }
  11.         //console.log(arr);
  12.         // 2. 从33个红球中随机取出6个
  13.         for (let i = 0; i < 6; i++) {
  14.             let index = Math.floor(Math.random() * arr.length);
  15.             result.push(arr[index]);
  16.             arr.splice(index, 1);
  17.         }
  18.         //排序
  19.         result.sort((a, b) => a - b);
  20.         console.log(result);
  21.         // 3. 生成蓝色球
  22.         let blue = Math.floor(Math.random() * 16) + 1;
  23.         result.push(blue);
  24.         // 将生成的双色球放入页面显示
  25.         const box = document.querySelector(".box");
  26.         result.forEach(function (item) {
  27.             const twoball = document.createElement('div');
  28.             twoball.textContent = item;
  29.             box.append(twoball);
  30.         });
  31.     </script>
  32.     <style>
  33.         .box {
  34.             display: grid;
  35.             grid-template-columns: repeat(auto-fill, 30px);
  36.             grid-auto-rows: 30px;
  37.             gap: 5px;
  38.         }
  40.         .box>div {
  41.             border-radius: 50%;
  42.             display: grid;
  43.             place-items: center;
  44.             background-color: red;
  45.             color: white;
  46.             box-shadow: 2px 2px 2px #666;
  47.         }
  49.         .box>div:last-of-type {
  50.             background-color: blue;
  51.         }
  52.     </style>

效果图

选项卡

代码

  1. <div class="box">
  2.         <!-- 1. 标签 -->
  3.         <!-- 子元素上的点击事件会冒泡到父元素,利用这个特点,只需要给父元素添加点击事件就可以了 -->
  4.         <ul class="menu" onclick="show()">
  5.             <!-- 先给默认显示的标签和对应的内容添加 class="active"处于激活状态/可见 -->
  6.             <!-- 使用自定义属性data-index使标签和与之对应的内容进行绑定 -->
  7.             <li data-index="1" class="active">本省</li>
  8.             <li data-index="2">全国</li>
  9.             <li data-index="3">防疫</li>
  10.         </ul>
  12.         <!-- 2. 内容 -->
  13.         <ul class="content active" data-index="1">
  14.             <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  15.             <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  16.             <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  17.             <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  18.             <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  19.         </ul>
  21.         <ul class="content" data-index="2">
  22.             <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  23.             <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  24.             <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  25.             <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  26.             <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  27.         </ul>
  29.         <ul class="content" data-index="3">
  30.             <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  31.             <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  32.             <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  33.             <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  34.             <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  35.         </ul>
  36.     </div>
  37.     <script>
  38.         function show() {
  39.             // 事件绑定着
  40.             const listUl = event.currentTarget;
  41.             // 事件主体
  42.             const listLi = event.target;
  43.             // 1. 将原高亮的标签去掉active,并把当前的标签设置为active
  44.             [...listUl.children].forEach(function (item) {
  45.                 item.classList.remove('active');
  46.             });
  47.             listLi.classList.add('active');
  49.             // 2. 根据标签的data-index进行查询,获取与它对应的列表
  50.             const content = document.querySelectorAll('.content');
  51.             content.forEach(function (item) {
  52.                 item.classList.remove('active');
  53.             });
  54.             //关联对应的内容区块，并显示
  55.             [...content].find(listUl => listUl.dataset.index === listLi.dataset.index).classList.add('active');
  57.         }
  58.     </script>

效果图

购物车

代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>购物车</title>
  9.     <style>
  10.         .box {
  11.             width: 22em;
  12.             height: 2em;
  13.         }
  15.         .list>li {
  16.             height: 1.6em;
  17.             background-color: #efefef;
  18.             display: grid;
  19.             grid-template-columns: repeat(5, 3em);
  20.             gap: 1em;
  21.             place-items: center right;
  22.             border-bottom: 1px solid #ccc;
  23.         }
  25.         .list>li:first-of-type {
  26.             background-color: lightseagreen;
  27.             color: white;
  28.         }
  30.         .list>li:hover:not(:first-of-type) {
  31.             cursor: pointer;
  32.             background-color: lightcyan;
  33.         }
  35.         .list>li input[type='number'] {
  36.             width: 3em;
  37.             border: none;
  38.             outline: none;
  39.             text-align: center;
  40.             font-size: 1em;
  41.             background-color: transparent;
  42.         }
  44.         .list>li:last-of-type span.total-num,
  45.         .list>li:last-of-type span.total-amount {
  46.             grid-column: span 2;
  47.             place-self: center right;
  48.             color: lightseagreen;
  49.         }
  51.         .account {
  52.             float: right;
  53.             background-color: lightseagreen;
  54.             color: white;
  55.             border: none;
  56.             outline: none;
  57.             width: 4.5em;
  58.             height: 1.8em;
  59.         }
  61.         .account:hover {
  62.             background-color: coral;
  63.             cursor: pointer;
  64.         }
  65.     </style>
  66. </head>
  68. <body>
  69.     <div class="box">
  70.         <div class="selectAll">
  71.             <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change  -->
  72.             <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
  73.             <label for="check-all">全选</label>
  74.         </div>
  75.         <ul class="list">
  76.             <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
  77.             <li>
  78.                 <input type="checkbox" onchange="checkItems()" checked />
  79.                 <span class="content">手机</span>
  80.                 <input type="number" value="1" min="1" class="num" />
  81.                 <span class="price">100</span>
  82.                 <span class="amount">0</span>
  83.             </li>
  84.             <li>
  85.                 <input type="checkbox" onchange="checkItems()" checked />
  86.                 <span class="content">电脑</span>
  87.                 <input type="number" value="2" min="1" class="num" />
  88.                 <span class="price">200</span><span class="amount">0</span>
  89.             </li>
  90.             <li>
  91.                 <input type="checkbox" onchange="checkItems()" checked />
  92.                 <span class="content">相机</span>
  93.                 <input type="number" value="3" min="1" class="num" />
  94.                 <span class="price">300</span>
  95.                 <span class="amount">0</span>
  96.             </li>
  97.             <li>
  98.                 <span>总计:</span>
  99.                 <span class="total-num">0</span>
  100.                 <span class="total-amount">0</span>
  101.             </li>
  102.         </ul>
  103.         <button class="account">结算</button>
  104.     </div>
  106.     <script>
  107.         // 1. 全选
  108.         function checkAll() {
  109.             // 1. 全选按钮状态
  110.             let status = event.target.checked;
  111.             // console.log(status);
  112.             // 2. 根据状态动态设置所有商品的状态
  113.             let items = document.querySelectorAll('.list li input[type="checkbox"]');
  114.             items.forEach(item => (item.checked = status));
  116.             //autoCalculate();
  118.             // document
  119.             //     .querySelectorAll('.list li input[type="checkbox"]')
  120.             //     .forEach(item => (item.checked = event.target.checked));
  121.         }
  123.         // 2. 根据用户选择来动态设置全选状态
  124.         function checkItems() {
  125.             // 1.  拿到全部商品
  126.             let items = document.querySelectorAll('.list li input[type="checkbox"]');
  127.             // 2. 判断状态,只有全部被选择,才需要设置全选为true, array.every
  128.             let status = [...items].every(item => item.checked === true);
  129.             // console.log(status);
  130.             // 3. 将这个新状态设置到全选按钮
  131.             document.querySelector('.check-all').checked = status;
  134.             autoCalculate();
  136.             // document.querySelector('.check-all').checked = [
  137.             //     ...document.querySelectorAll('.list li input[type="checkbox"]'),
  138.             // ].every(item => item.checked === true);
  139.         }
  141.         // 商品自动计算
  142.         // 所有计算都是基于商品数量的变化
  144.         const nums = document.querySelectorAll('.num');
  145.         //console.log(nums);
  146.         // nums.forEach(item => console.log(item.value));
  148.         // 1. 计算总数量
  149.         function getTotalNum(numArr) {
  150.             numArr = goodStatus(numArr);
  151.             return numArr.reduce((acc, cur) => acc + cur);
  152.         }
  154.         // 2. 计算每个商品的金额
  155.         function getAmount(numArr, priceArr) {
  156.             // 金额 = 数量 * 单价
  157.             return numArr.map((num, index) => num * priceArr[index]);
  158.         }
  159.         // console.log(getAmount([1, 2, 3], [100, 200, 300]));
  161.         // 3. 计算总金额
  162.         function getTotalAmount(amountArr) {
  163.             amountArr = goodStatus(amountArr);
  164.             return amountArr.reduce((acc, cur) => acc + cur);
  165.         }
  167.         //判断商品是否被选中，获取到选中的商品
  168.         function goodStatus(numArr) {
  169.             let items = document.querySelectorAll(
  170.                 ".list li input[type='checkbox']"
  171.             );
  172.             return numArr.map((num, index) => {
  173.                 if (items[index].checked === false) {
  174.                     return (num = 0);
  175.                 } else {
  176.                     return num;
  177.                 }
  178.             });
  179.         }
  181.         // 4. 自动计算
  182.         function autoCalculate() {
  183.             // 商品数量数组
  184.             const numArr = [...nums].map(num => parseInt(num.value));
  186.             //console.log(numArr);
  188.             // 单价数组
  189.             const prices = document.querySelectorAll('.price');
  190.             const priceArr = [...prices].map(price => parseInt(price.textContent));
  191.             //console.log(priceArr);
  193.             // 金额数组
  194.             const amountArr = getAmount(numArr, priceArr);
  195.             //console.log(amountArr);
  197.             // 总数量
  198.             console.log(getTotalNum(numArr));
  199.             document.querySelector('.total-num').textContent = getTotalNum(numArr);
  200.             // 总金额
  201.             document.querySelector('.total-amount').textContent = getTotalAmount(amountArr);
  203.             // 为每个商品填充金额
  204.             document.querySelectorAll('.amount').forEach((amount, index) => (amount.textContent = amountArr[index]));
  205.         }
  207.         // 当页面加载的时候自动计算
  208.         window.onload = autoCalculate;
  210.         // 当数量更新时,自动计算所有数据
  211.         nums.forEach(num => (num.onchange = autoCalculate));
  213.         // 作业 : 只计算选中商品的金额,同时更新总数量和总金额
  214.         // vue: 计算属性, 侦听器,可以极大的简化以上过程
  215.     </script>
  216. </body>
  218. </html>

效果

上一条：四种打开php格式文件方法下一条：PHP mkdir创建文件夹实现方法解析
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多