选项卡

代码

  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.                 border-left: 1px solid #ccc;
  14.             }
  16.             .box ul {
  17.                 margin: 0;
  18.                 padding: 0;
  19.             }
  21.             .box li {
  22.                 list-style: none;
  23.                 /* height: 2em; */
  24.             }
  26.             .box li a {
  27.                 text-decoration: none;
  28.             }
  30.             .box li:hover {
  31.                 cursor: pointer;
  32.             }
  34.             .box .content {
  35.                 background-color: lightgreen;
  36.                 display: none;
  37.                 place-self: center start;
  38.             }
  40.             .box .content.active {
  41.                 display: block;
  42.             }
  44.             .box .menu li.active {
  45.                 background-color: lightgreen;
  46.             }
  47.         </style>
  48.     </head>
  49.     <body>
  50.         <div class="box">
  51.             <!-- 1. 标签 -->
  52.             <!-- 子元素上的点击事件会冒泡到父元素,利用这个特点,只需要给父元素添加点击事件就可以了 -->
  53.             <ul class="menu" onclick="show()">
  54.                 <!-- 先给默认显示的标签和对应的内容添加 class="active"处于激活状态/可见 -->
  55.                 <!-- 使用自定义属性data-index使标签和与之对应的内容进行绑定 -->
  56.                 <li data-index="1" class="active">本省</li>
  57.                 <li data-index="5">全国</li>
  58.                 <li data-index="8">防疫</li>
  59.             </ul>
  61.             <!-- 2. 内容 -->
  62.             <ul class="content active" data-index="1">
  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.                 <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  68.             </ul>
  70.             <ul class="content" data-index="5">
  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.                 <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  76.             </ul>
  78.             <ul class="content" data-index="8">
  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.                 <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  84.             </ul>
  85.             <ul class="content" data-index="8">
  86.                 <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  87.                 <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  88.                 <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  89.                 <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  90.                 <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  91.             </ul>
  92.         </div>
  93.         <script>
  94.             function show() {
  95.                 // 1. 事件触发者(目标)
  96.                 let target = event.target;
  97.                 console.log('选择了:', target.textContent);
  98.                 //2.移除menu下所有li元素中为active的class
  99.                 [...target.parentNode.children].forEach(item => {
  100.                     item.classList.remove('active');
  101.                 });
  102.                 //3.添加active为class
  103.                 target.classList.add('active');
  104.                 //4.获取data-index属性
  105.                 let index = target.dataset.index;
  106.                 console.log('选中的下标:', index);
  107.                 //5.移除content下所有li元素中为active的class
  108.                 [...target.parentNode.parentNode.children].forEach(item => {
  109.                     item.classList.remove('active');
  110.                 });
  111.                 //6.为content下对应的li元素添加active
  112.                 let content = document.querySelectorAll('.content');
  113.                 [...content].find(item => item.dataset.index == index).classList.add('active');
  114.             }
  115.         </script>
  116.     </body>
  117. </html>

购物车

代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>
  67.     <body>
  68.         <div class="box">
  69.             <div class="selectAll">
  70.                 <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change  -->
  71.                 <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
  72.                 <label for="check-all">全选</label>
  73.             </div>
  74.             <ul class="list" onchange="change()">
  75.                 <li>
  76.                     <span>选择</span>
  77.                     <span>品名</span>
  78.                     <span>数量</span>
  79.                     <span>单价</span>
  80.                     <span>金额</span>
  81.                 </li>
  82.                 <li>
  83.                     <input type="checkbox" checked />
  84.                     <span class="content">手机</span>
  85.                     <input type="number" value="1" min="1" class="num" />
  86.                     <span class="price">100</span>
  87.                     <span class="amount">0</span>
  88.                 </li>
  89.                 <li>
  90.                     <input type="checkbox" checked />
  91.                     <span class="content">电脑</span>
  92.                     <input type="number" value="2" min="1" class="num" />
  93.                     <span class="price">200</span>
  94.                     <span class="amount">0</span>
  95.                 </li>
  96.                 <li>
  97.                     <input type="checkbox" checked />
  98.                     <span class="content">相机</span>
  99.                     <input type="number" value="3" min="1" class="num" />
  100.                     <span class="price">300</span>
  101.                     <span class="amount">0</span>
  102.                 </li>
  103.                 <li>
  104.                     <span>总计:</span>
  105.                     <span class="total-num">0</span>
  106.                     <span class="total-amount">0</span>
  107.                 </li>
  108.             </ul>
  109.             <button class="account">结算</button>
  110.         </div>
  112.         <script>
  113.             // 1. 全选
  114.             function checkAll() {
  115.                 // 1. 全选按钮状态
  116.                 let status = event.target.checked;
  117.                 // 2. 根据状态动态设置所有商品的状态
  118.                 let items = document.querySelectorAll('.list li input[type="checkbox"]');
  119.                 items.forEach(item => (item.checked = status));
  120.                 change();
  121.             }
  123.             //购物车发生改变时,计算总价和总数量,金额,并显示到页面上
  124.             //使用事件冒泡来处理变化
  125.             function change() {
  126.                 let target = event.target;
  127.                 console.log('选择了:', event.target);
  128.                 //1.当商品未全部选中时,全选按钮不选中
  129.                 let items = document.querySelectorAll('.list li input[type="checkbox"]');
  130.                 document.querySelector('.selectAll input[type="checkbox"]').checked = [...items].every(
  131.                     item => item.checked
  132.                 );
  133.                 //2.获取所有的选中的商品
  134.                 let checkItems = document.querySelectorAll('.list li input[type="checkbox"]:checked');
  135.                 console.log(checkItems);
  136.                 //3.计算金额,总金额和总数量,并显示到页面上
  137.                 getAmount(checkItems);
  138.                 getTotalAmount(checkItems);
  139.                 getTotalNum(checkItems);
  140.             }
  142.             // 当页面加载的时候自动计算
  143.             window.onload = change;
  145.             //计算选中的总数量,并更新到页面上
  146.             function getTotalNum(checkItems) {
  147.                 let totalNum = 0;
  148.                 checkItems.forEach(item => {
  149.                     totalNum += parseInt(item.nextElementSibling.nextElementSibling.value);
  150.                 });
  151.                 document.querySelector('.total-num').innerText = totalNum;
  152.             }
  154.             //计算选中的总金额,并更新到页面上
  155.             function getTotalAmount(checkItems) {
  156.                 let totalAmount = 0;
  157.                 checkItems.forEach(item => {
  158.                     totalAmount +=
  159.                         parseInt(item.nextElementSibling.nextElementSibling.value) *
  160.                         parseInt(item.nextElementSibling.nextElementSibling.nextElementSibling.innerText);
  161.                 });
  162.                 document.querySelector('.total-amount').innerText = totalAmount;
  163.             }
  165.             //计算选中单个商品的金额并更新到页面上
  166.             function getAmount(checkItems) {
  167.                 checkItems.forEach(item => {
  168.                     let num = item.parentNode.querySelector('.num').value;
  169.                     let price = item.parentNode.querySelector('.price').innerText;
  170.                     item.parentNode.querySelector('.amount').innerText = num * price;
  171.                 });
  172.             }
  174.             //把选中的商品的数量和金额更新到页面上,单个商品总金额也更新
  175.             function updateTotalNumAndAmount() {
  176.                 let totalNum = getTotalNum(checkItems);
  177.                 let totalAmount = getTotalAmount(checkItems);
  178.                 getAmount(checkItems);
  179.                 document.querySelector('.total-num').innerText = totalNum;
  180.                 document.querySelector('.total-amount').innerText = totalAmount;
  181.             }
  182.         </script>
  183.     </body>
  184. </html>