search

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

双色球，选项卡，购物车

shooter
shooter原创
2022年04月12日 13:27:28445浏览

双色球

效果图

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.       button {
  29.         margin-left: 100px;
  30.         margin-top: 100px;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="box"></div>
  36.     <button onclick="suiji()">随机</button>
  37.     <script>
  38.       function suiji() {
  39.         // 临时数组: 放红球
  40.         let arr = [];
  41.         // 中奖数组,最后应该有7个数,6个红球,1个蓝球
  42.         let res = [];
  43.         // 1. 生成1-33个红球
  44.         for (let i = 0; i <= 33; i++) {
  45.           arr.push(i);
  46.         }
  47.         console.log(arr);
  48.         // 2. 从33个红球中取出6个
  49.         for (let i = 0; i < 6; i++) {
  50.           // 应该每取一个就从原始数组中删除一个
  51.           let index = Math.floor(Math.random() * arr.length);
  52.           res.push(arr[index]);
  53.           arr.splice(index, 1);
  54.         }
  55.         //排序
  56.         res.sort((a, b) => a - b);
  57.         console.log(res);
  58.         // 3. 生成一个蓝球, 并追加到中奖数组中
  59.         // 必须是: 1-16之间,并包括 1, 16
  60.         let blue = Math.floor(Math.random() * 16) + 1;
  61.         console.log(blue);
  62.         res.push(blue);
  63.         console.log(res);
  65.         //将中奖号码显示到页面中
  66.         const box = document.querySelector('.box');
  67.         let box1 = box.children.length;
  68.         if (box1 !== 0) {
  69.           box.innerHTML = '';
  70.         }
  71.         res.forEach((item) => {
  72.           const ball = document.createElement('div');
  73.           ball.textContent = item;
  74.           box.append(ball);
  75.         });
  76.       }
  77.       window.onload = suiji;
  78.     </script>
  79.   </body>
  80. </html>

选项卡

效果图

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.       }
  15.       .box ul {
  16.         margin: 0;
  17.         padding: 0;
  18.       }
  20.       .box li {
  21.         list-style: none;
  22.       }
  24.       .box li a {
  25.         text-decoration: none;
  26.       }
  28.       .box li:hover {
  29.         cursor: pointer;
  30.       }
  32.       .box .content {
  33.         background-color: lightcoral;
  34.         display: none;
  35.         place-self: center start;
  36.       }
  38.       .box .content.active {
  39.         display: block;
  40.       }
  42.       .box .menu li.active {
  43.         background-color: lightcoral;
  44.       }
  45.     </style>
  46.   </head>
  48.   <body>
  49.     <div class="box">
  50.       <ul class="menu" onclick="show()">
  51.         <li data-index="1" class="active">本省</li>
  52.         <li data-index="2">全国</li>
  53.         <li data-index="3">防疫</li>
  54.       </ul>
  56.       <!-- 2. 内容 -->
  57.       <ul class="content active" data-index="1">
  58.         <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  59.         <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  60.         <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  61.         <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  62.         <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  63.       </ul>
  65.       <ul class="content" data-index="2">
  66.         <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  67.         <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  68.         <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  69.         <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  70.         <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  71.       </ul>
  73.       <ul class="content" data-index="3">
  74.         <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  75.         <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  76.         <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  77.         <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  78.         <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  79.       </ul>
  80.     </div>
  82.     <script>
  83.       function show() {
  84.         // 事件绑定者
  85.         // 事件主体
  86.         let ul = event.currentTarget;
  87.         let li = event.target;
  88.         //将原高亮的标签去掉active,并把当前的标签设置为active
  89.         [...ul.children].forEach((li) => li.classList.remove('active'));
  90.         li.classList.add('active');
  91.         //根据标签的data-index进行查询,获取与它对应的列表
  92.         content = document.querySelectorAll('.content');
  93.         content.forEach((li) => li.classList.remove('active'));
  94.         [...content]
  95.           //    用find进行简化, find就是获取filter结果数组中的第一个
  96.           .find((ul) => ul.dataset.index === li.dataset.index)
  97.           .classList.add('active');
  98.       }
  99.     </script>
  100.   </body>
  101. </html>

购物车

效果图



代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  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: aliceblue;
  16.         display: grid;
  17.         grid-template-columns: repeat(5, 3em);
  18.         gap: 1em;
  19.         place-items: center right;
  20.         border-bottom: 1px solid #ccc;
  21.       }
  22.       .list > li:first-of-type {
  23.         background-color: lightseagreen;
  24.         color: white;
  25.       }
  26.       .list > li:hover:not(:first-of-type) {
  27.         cursor: pointer;
  28.         background-color: lightcyan;
  29.       }
  30.       .list > li input[type='number'] {
  31.         width: 3em;
  32.         border: none;
  33.         outline: none;
  34.         text-align: center;
  35.         font-size: 1em;
  36.         background-color: transparent;
  37.       }
  38.       .list > li:last-of-type span.total-num,
  39.       .list > li:last-of-type span.total-amount {
  40.         grid-column: span 2;
  41.         place-self: center right;
  42.         color: lightseagreen;
  43.       }
  44.       .account {
  45.         float: right;
  46.         background-color: lightseagreen;
  47.         color: white;
  48.         border: none;
  49.         outline: none;
  50.         width: 4.5em;
  51.         height: 1.8em;
  52.       }
  54.       .account:hover {
  55.         background-color: coral;
  56.         cursor: pointer;
  57.       }
  58.     </style>
  59.   </head>
  60.   <body>
  61.     <div class="box">
  62.       <div class="selectAll">
  63.         <input
  64.           type="checkbox"
  65.           class="check-all"
  66.           name="check-all"
  67.           onchange="checkAll()"
  68.           checked
  69.         />
  70.         <label for="check-all">全选</label>
  71.       </div>
  72.       <ul class="list">
  73.         <li>
  74.           <span>选择</span><span>品名</span><span>数量</span><span>单价</span
  75.           ><span>金额</span>
  76.         </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="1" 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="1" 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.       //全选
  108.       function checkAll() {
  109.         //全选按钮状态
  110.         let status = event.target.checked;
  111.         //子商品状态
  112.         document
  113.           .querySelectorAll(".list li input[type='checkbox']")
  114.           .forEach((item) => (item.checked = status));
  115.         autoCalculate();
  116.       }
  117.       function checkItems() {
  118.         //全部商品
  119.         let items = document.querySelectorAll(
  120.           ".list li input[type='checkbox']"
  121.         );
  122.         //判断状态
  123.         let status = [...items].every((item) => item.checked === true);
  124.         document.querySelector('.check-all').checked = status;
  125.         autoCalculate();
  126.       }
  127.       const nums = document.querySelectorAll('.num');
  128.       //商品是否被选中
  129.       function goodStatus(numArr) {
  130.         let items = document.querySelectorAll(
  131.           ".list li input[type='checkbox']"
  132.         );
  133.         return numArr.map((num, index) => {
  134.           if (items[index].checked === false) {
  135.             return (num = 0);
  136.           } else {
  137.             return num;
  138.           }
  139.         });
  140.       }
  141.       //计算总数量
  142.       function getTotalNum(numArr) {
  143.         numArr = goodStatus(numArr);
  144.         return numArr.reduce((acc, cur) => acc + cur);
  145.       }
  146.       //计算每个商品金额
  147.       function getAmount(numArr, priceArr) {
  148.         return numArr.map((num, index) => num * priceArr[index]);
  149.       }
  150.       //总金额
  151.       function getTotalAmount(amountArr) {
  152.         amountArr = goodStatus(amountArr);
  153.         return amountArr.reduce((acc, cur) => acc + cur);
  154.       }
  155.       //自动计算
  156.       function autoCalculate() {
  157.         //数量数组
  158.         const numArr = [...nums].map((num) => parseInt(num.value));
  159.         //单价数组
  160.         const prices = document.querySelectorAll('.price');
  161.         const pricesArr = [...prices].map((price) =>
  162.           parseInt(price.textContent)
  163.         );
  164.         //金额数组
  165.         const amountArr = getAmount(numArr, pricesArr);
  166.         document.querySelector('.total-num').textContent = getTotalNum(numArr);
  167.         document.querySelector('.total-amount').textContent =
  168.           getTotalAmount(amountArr);
  169.         //为每个商品填充金额
  170.         document
  171.           .querySelectorAll('.amount')
  172.           .forEach((amount, index) => (amount.textContent = amountArr[index]));
  173.       }
  174.       //自动加载
  175.       window.onload = autoCalculate();
  176.       //数量变化自动计算
  177.       [...nums].forEach((num) => (num.onchange = autoCalculate));
  178.     </script>
  179.   </body>
  180. </html>
上一条：Js字符串api以及数组api演示下一条：轮播图练习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多