简体中文（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

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

双色球与选项卡与购物车

新手1314
新手1314原创
2022年04月12日 09:28:01346浏览

双色球

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.         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.     <script>
  33.       // 红球: 1-33=>6,不重复,排序
  34.       // 蓝球: 1-16=>1, 可以和红球重复
  36.       // 思路:
  37.       // 1. 先取红球, 放在一个中奖号数组中, 排序
  38.       // 2. 然后把蓝球追加到中奖数组中
  39.       // 3. 最后还要马中奖数组渲染到页面: dom
  41.       // 红球
  42.       let red = [];
  43.       // 中奖数组
  44.       let list = [];
  45.       // 1.生成1-33个红球
  46.       for (let i = 1; i <= 33; i++) {
  47.         red.push(i);
  48.       }
  49.       console.log(red);
  50.       //   2.从33个红球中取出6个
  51.       for (let i = 0; i < 6; i++) {
  52.         let index = Math.floor(Math.random() * red.length);
  53.         list.push(red[index]);
  54.         red.splice(index, 1);
  55.       }
  56.       list.sort((a, b) => a - b);
  57.       console.log(list);
  59.       //   3、生成一个篮球，并追加到中奖数组中。
  61.       let blue = Math.ceil(Math.random() * 16);
  62.       list.push(blue);
  63.       console.log(list);
  65.       //   4.将中奖号码显示到页面中
  66.       let box = document.querySelector(".box");
  67.       list.forEach(news => {
  68.         let ball = document.createElement("div");
  69.         ball.textContent = news;
  70.         box.append(ball);
  71.       });
  72.     </script>
  73.   </body>
  74. </html>

选项卡

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.     <script>
  86.       function show() {
  87.         // console.log(event.currentTarget);
  88.         let ul = event.currentTarget;
  89.         let li = event.target;
  91.         // ul.children:返回所有子元素也就是返回所有Li元素
  92.         console.log(ul.children);
  93.         //点击li元素去掉高亮
  94.         [...ul.children].forEach(li => li.classList.remove("active"));
  95.         //将点击的li元素赋予class值，显示高亮
  96.         li.classList.add("active");
  97.         let content = document.querySelectorAll(".content");
  98.         console.log(content);
  99.         //点击li元素，遍历所有ul里的content,去掉样式active
  100.         content.forEach(li => li.classList.remove("active"));
  101.         //找到数组里第一个ul里的index值与li里index相同的ul元素，并赋予它active样式
  102.         [...content].find(ul => ul.dataset.index === li.dataset.index).classList.add("active");
  103.         // console.log([...content].filter(ul => ul.dataset.index === li.dataset.index));
  104.         // console.log(ul.dataset.index);
  105.       }
  106.     </script>
  107.   </body>
  108. </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 type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
  71.         <label for="check-all">全选</label>
  72.       </div>
  73.       <ul class="list">
  74.         <li>
  75.           <span>选择</span>
  76.           <span>品名</span>
  77.           <span>数量</span>
  78.           <span>单价</span>
  79.           <span>金额</span>
  80.         </li>
  81.         <li>
  82.           <input type="checkbox" onchange="checkItems()" checked  />
  83.           <span class="content">手机</span>
  84.           <input type="number" value="1" min="1" class="num" />
  85.           <span class="price">100</span>
  86.           <span class="amount">0</span>
  87.         </li>
  88.         <li>
  89.           <input type="checkbox" onchange="checkItems()" checked  />
  90.           <span class="content">电脑</span>
  91.           <input type="number" value="2" min="1" class="num" />
  92.           <span class="price">200</span>
  93.           <span class="amount">0</span>
  94.         </li>
  95.         <li>
  96.           <input type="checkbox" onchange="checkItems()" checked  />
  97.           <span class="content">相机</span>
  98.           <input type="number" value="3" min="1" class="num" />
  99.           <span class="price">300</span>
  100.           <span class="amount">0</span>
  101.         </li>
  102.         <li>
  103.           <span>总计:</span>
  104.           <span class="total-num">0</span>
  105.           <span class="total-amount">0</span>
  106.         </li>
  107.       </ul>
  108.       <button class="account">结算</button>
  109.     </div>
  110.     <script>
  111.       // 全选状态动态改变商品状态
  112.       function checkAll() {
  113.         //确定点击全选的返回值
  114.         console.log(event.target);
  115.         // 把全选的状态赋值于变量
  116.         let status = event.target.checked;
  117.         //确认全选按钮状态
  118.         console.log(status);
  119.         // 读取商品选择的状态
  120.         let item = document.querySelectorAll(".list li input[type='checkbox']");
  121.         // 遍历所有商品选择状态，并把全选的状态动态赋予商品的状态
  122.         item.forEach(item => (item.checked = status));
  123.         autoCalculate();
  124.       }
  125.       //   商品状态动态改变全选状态
  126.       function checkItems() {
  127.         //   获取所有商品的选择状态
  128.         let item = document.querySelectorAll(".list li input[type='checkbox']");
  129.         // 判断所有商品状态是否为true
  130.         let status = [...item].every(item => item.checked === true);
  131.         //将所有商品的状态赋予全选按钮，全部商品全选中则为true，有一个没选中则为false
  132.         document.querySelector(".check-all").checked = status;
  133.         autoCalculate();
  134.       }
  136.       //   获取所有商品元素
  138.       let num = document.querySelectorAll(".num");
  139.       function goodStatus(numArr) {
  140.         let items = document.querySelectorAll(".list li input[type='checkbox']");
  141.         return numArr.map((num, index) => {
  142.           if (items[index].checked === false) {
  143.             return (num = 0);
  144.           } else {
  145.             return num;
  146.           }
  147.         });
  148.       }
  149.       console.log(num);
  150.       //   总数量
  151.       function getTotalNum(numArr) {
  152.         numArr = goodStatus(numArr);
  153.         return numArr.reduce((acc, list) => acc + list);
  154.       }
  155.       //   console.log(getTotalNum([1, 2, 3]));
  156.       //   每个商品的金额
  157.       function getAmount(numArr, priceArr) {
  158.         return numArr.map((num, index) => num * priceArr[index]);
  159.       }
  160.       //   console.log(getAmount([1, 2, 3], [100, 200, 300]));
  161.       // 总金额
  162.       function getTotalAmount(amountArr) {
  163.         amountArr = goodStatus(amountArr);
  164.         return amountArr.reduce((acc, list) => acc + list);
  165.       }
  167.       // 自动计算
  168.       function autoCalculate() {
  169.         // 获取商品数量数组
  170.         let numArr = [...num].map(num => parseInt(num.value));
  172.         console.log(numArr);
  174.         // 获取单价数组元素
  175.         let price = document.querySelectorAll(".price");
  176.         // console.log(price);
  177.         //将单价数组元素的值赋予变量
  178.         let priceAll = [...price].map(price => parseInt(price.textContent));
  179.         console.log(priceAll);
  181.         // 金额数组
  182.         // 调用上面的getAmount函数并传入商品数量与单价元素
  183.         let amountAll = getAmount(numArr, priceAll);
  185.         // 总数量
  186.         console.log(getTotalNum(numArr));
  187.         document.querySelector(".total-num").textContent = getTotalNum(numArr);
  188.         //总金额
  189.         document.querySelector(".total-amount").textContent = getTotalAmount(amountAll);
  190.         // 为每个商品加载时自动计算
  191.         document.querySelectorAll(".amount").forEach((amount, index) => (amount.textContent = amountAll[index]));
  192.       }
  193.       //   console.log(autoCalculate());
  194.       window.onload = autoCalculate;
  196.       num.forEach(num => (num.onchange = autoCalculate));
  197.     </script>
  198.   </body>
  199. </html>
上一条：实例演示双色球下一条：javascript-基础（八）轮播图，XHR
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多