简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 双色球，选项卡，购物车
Blogger Information
Blog 13
fans 0
comment 0
visits 6512
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
双色球，选项卡，购物车
shooter
Original
436 people have browsed it

双色球

效果图

代码

  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>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！