简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

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

双色球, 选项卡、购物车

Blackeye
Blackeye原创
2022年04月09日 18:18:53426浏览

part1

hw1

part2

hw2

part3

hw3

  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.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="box"></div>
  32.   </body>
  33.   <script>
  34.       // 1. 生成6红球ballListArr
  35.       // 临时存放1~33数组
  36.       let temp = [];
  37.       // 结果数组
  38.       let ballListArr = [];
  39.       // 初始化数组
  40.       for(let i=1;i<=33;i++){
  41.           temp[i-1] = i;
  42.       }
  43.       // 设置红球
  44.       for(let i=0;i<6;i++){
  45.           let index = Math.floor(Math.random()*temp.length);
  46.           ballListArr.push(temp[index]);
  47.           // 移除index元素，规避重复
  48.           temp.splice(index,1);
  49.       }
  50.       // 2. ballListArr排序
  51.       ballListArr.sort((a,b)=>a-b);
  52.       // 3. 加入一个蓝色球在ballListArr中
  53.       let blue = Math.floor(Math.random()*temp.length+1);
  54.       ballListArr.push(blue);
  55.       // 4. 将ballListArr渲染至页面中
  56.       const box = document.querySelector(".box");
  57.     //   ballListArr.forEach(item=>{
  58.     //     const div = document.createElement("div");
  59.     //     div.textContent = item;
  60.     //     box.append(div);
  61.     //   });
  62.       for(let i=0;i<ballListArr.length;i++){
  63.         const div = document.createElement("div");
  64.         div.innerHTML = ballListArr[i];
  65.         box.append(div);
  66.       }
  67.   </script>
  68. </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.         /* height: 2em; */
  23.       }
  25.       .box li a {
  26.         text-decoration: none;
  27.       }
  29.       .box li:hover {
  30.         cursor: pointer;
  31.       }
  33.       .box .content {
  34.         background-color: lightgreen;
  35.         display: none;
  36.         place-self: center start;
  37.       }
  39.       .box .content.active {
  40.         display: block;
  41.       }
  43.       .box .menu li.active {
  44.         background-color: lightgreen;
  45.       }
  46.     </style>
  47.   </head>
  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.   </body>
  86.   <script>
  87.     function show() {
  88.       // 1.清理active class
  89.       // 获取标签NodeList
  90.       const Lilist = event.currentTarget.children;
  91.       [...Lilist].forEach((item) => {
  92.         item.classList.remove("active");
  93.       });
  94.       // 获取内容NodeList
  95.       const contentList = document.querySelectorAll(".content");
  96.       contentList.forEach((item) => {
  97.         item.classList.remove("active");
  98.       });
  99.       // 2.添加active class
  100.       // 实际点击元素
  101.       const clickOption = event.target;
  102.       const index = clickOption.dataset.index;
  103.       clickOption.classList.add("active");
  104.       [...contentList].find(item=>index===item.dataset.index).classList.add("active");
  105.     }
  106.   </script>
  107. </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.       }
  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.   </body>
  113.   <script>
  114.     // 全局全选元素
  115.     let selectAll = true;
  116.     // 获取items元素
  117.     const itemList = document.querySelectorAll(
  118.       ".list li input[type='checkbox']"
  119.     );
  120.     // 获取全局numArr
  121.     const numArr = document.querySelectorAll(".num");
  123.     // 1.用户全选设置
  124.     function checkAll() {
  125.       // 修改全选元素
  126.       selectAll = event.target.checked;
  127.       // 设置items选中状态
  128.       [...itemList].forEach((item) => (item.checked = selectAll));
  129.       autoCalculate();
  130.     }
  131.     // 2.商品影响全选属性
  132.     function checkItems() {
  133.       event.preventDefault();
  134.       event.stopPropagation();
  135.       event.target.checked = event.target.checked;
  136.       const out = [...document
  137.         .querySelectorAll(".list li input[type='checkbox']")]
  138.         .every(item => item.checked === true);
  139.       if(out === false){
  140.           document.querySelector(".check-all").checked = false;
  141.       }else{
  142.         document.querySelector(".check-all").checked = true;   
  143.       }
  145.       autoCalculate();
  146.       // 选中触发事件；
  147.     }
  149.     // console.log(itemList.forEach(item=>console.log(item.checked)));
  151.     // 转换Helper
  152.     function getReatil(arr) {
  153.       return [...arr].map((item) => {
  154.         if (item.value === undefined) {
  155.           return parseInt(item.textContent);
  156.         }
  157.         return parseInt(item.value);
  158.       });
  159.     }
  160.     // 将为选中的内容置换为0
  161.     function getStatus(num, ck = 0) {
  162.       if (ck === 1) {
  163.         return num.map((item, index) => {
  164.           if (itemList[index].checked === false) {
  165.             return (item = 0);
  166.           } else {
  167.             return (item = item);
  168.           }
  169.         });
  170.       }
  171.       return getReatil(num).map((item, index) => {
  172.         if (itemList[index].checked === false) {
  173.           return (item = 0);
  174.         } else {
  175.           return (item = item);
  176.         }
  177.       });
  178.     }
  179.     // 计算金额
  180.     function getItemPrice(num, price) {
  181.       price = getReatil(price);
  182.       return getReatil(num).map((item, index) => item * price[index]);
  183.     }
  184.     // 总计：总数量
  185.     function getTotalNums(num) {
  186.       return getStatus(num).reduce((acc, index) => acc + index);
  187.     }
  188.     // 总计：总金额
  189.     function getTotalPrice(prices) {
  190.       return getStatus(prices, 1).reduce((acc, index) => acc + index);
  191.     }
  192.     // 计算及填充
  193.     function autoCalculate() {
  194.       // 给number增加事件
  195.       document
  196.         .querySelectorAll(".num")
  197.         .forEach((item) => (item.onchange = autoCalculate));
  198.       const prices = getItemPrice(
  199.         document.querySelectorAll(".num"),
  200.         document.querySelectorAll(".price")
  201.       );
  202.       const TotalNum = getTotalNums(document.querySelectorAll(".num"));
  203.       const TotalPrice = getTotalPrice(prices);
  204.       //金额填充
  205.       const amout = document.querySelectorAll(".amount");
  206.       amout.forEach((item, index) => (item.innerHTML = prices[index]));
  207.       //总计：总数量填充
  208.       document.querySelector(".total-num").innerHTML = TotalNum;
  209.       //总计：总金额填充
  210.       document.querySelector(".total-amount").innerHTML = TotalPrice;
  211.     }
  212.     window.onload = autoCalculate;
  213.   </script>
  214. </html>
上一条：py-libterraform 的使用和实现：一个 Terraform 的 Python 绑定下一条：Js的classList演示以及Event事件的演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多