ASCII码 ASCII码

javascript选项卡,轮播图与购物车的实现

发布于：2022-01-12 09:51:04  栏目：技术文档

选项卡实现

  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>Document</title>
  8.     <style>
  9.         .box {
  10.           width: 28em;
  11.           display: grid;
  12.           grid-template-columns: 3em 1fr;
  13.         }
  14.         .box ul {
  15.           margin: 0;
  16.           padding: 0;
  17.         }
  18.         .box li {
  19.           list-style: none;
  20.           /* height: 2em; */
  21.         }
  22.         .box li a {
  23.           text-decoration: none;
  24.         }
  25.         .box li:hover {
  26.           cursor: pointer;
  27.         }
  28.         .box .content {
  29.           background-color: lightgreen;
  30.           display: none;
  31.           place-self: center start;
  32.         }
  33.         .box .content.active {
  34.           display: block;
  35.         }
  36.         .box .menu li.active {
  37.           background-color: lightgreen;
  38.         }
  39.       </style>
  40. </head>
  43. <body>
  44.     <div class="box">
  45.          <ul class="menu" onclick="show()">
  46.             <li data-index="1" class="active">本省</li>
  47.             <li data-index="2" >全国</li>
  48.             <li data-index="3" >防疫</lifang>
  49.          </ul>
  51.          <div class="content active" data-index="1">
  52.             <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  53.             <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  54.             <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  55.             <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  56.             <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
  57.          </div>
  59.          <div class="content" data-index="2">
  60.             <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  61.             <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  62.             <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  63.             <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  64.             <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
  66.          </div>
  68.          <div class="content" data-index="3">
  69.             <li><a href="">坚持“动态清零”不动摇(人民论坛)</a></li>
  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.          </div>
  76.     </div>
  78.     <script>
  79.             function show(){
  80.                 console.log(event);
  81.                 let target=event.target;
  82.                 console.log(target);
  84.                 let menu=document.querySelectorAll(".menu li");
  85.                 let content=document.querySelectorAll(".content");
  86.                 console.log(menu);
  87.                 console.log(content);
  89.                 menuarray=[...menu];
  90.                 contentarray=[...content];
  91.                 console.log(menuarray);
  93.                 menuarray.forEach(li => {
  94.                     li.classList.remove("active");                    
  95.                 });
  97.                 contentarray.forEach(ele => ele.classList.remove("active"));
  99.                 target.classList.add("active");
  100.                 contentarray.forEach((li,index)=>{
  101.                     if (li.dataset.index===target.dataset.index)
  102.                     {
  103.                         li.classList.add("active");
  105.                     }
  106.                 })
  112.             }
  113.     </script>
  116. </body>
  117. </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>Document</title>
  8.     <style>
  9.         /* ! 3. 轮播图 */
  10.         .slider {
  11.           max-width: 750px;
  12.           min-width: 320px;
  13.           margin: auto;
  15.           padding: 0 10px;
  16.         }
  18.         .slider .imgs {
  19.           /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  20.           height: 150px;
  21.         }
  23.         .slider .imgs img {
  24.           /* 图片完全充满父级空间显示 */
  25.           height: 100%;
  26.           width: 100%;
  27.           /* 图片带有圆角 */
  28.           border-radius: 10px;
  29.           /* 默认图片全部隐藏,只有有active的图片才显示 */
  30.           display: none;
  31.         }
  33.         /* 默认显示第一张 */
  34.         .slider .imgs img.active {
  35.           display: block;
  36.         }
  37.         /* 轮播图按钮组 */
  38.         .slider .btns {
  39.           /* 按钮水平一排显示,用flex,且水平居中 */
  40.           display: flex;
  41.           place-content: center;
  42.         }
  43.         .slider .btns span {
  44.           /* 按钮宽高相同,确定显示成一个正圆 */
  45.           width: 8px;
  46.           height: 8px;
  47.           /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
  49.           background-color: rgba(255, 255, 255, 0.4);
  50.           /* 50%可确保显示为正圆 */
  51.           border-radius: 50%;
  52.           /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
  53.           margin: -12px 3px 5px;
  54.         }
  55.         .slider .btns span.active {
  56.           background-color: #fff;
  57.         }
  58.       </style>
  59. </head>
  61. <body>
  62.     <div class="slider">
  63.         <!-- 图片容器 -->
  64.         <div class="imgs">
  65.           <!-- 轮播图默认从第一张开始显示 -->
  66.           <a href=""><img src="./images/banner1.jpg" alt="" data-index="1" class="active" /></a>
  67.           <a href=""><img src="./images/banner2.jpg" alt="" data-index="2" /></a>
  68.           <a href=""><img src="./images/banner3.png" alt="" data-index="3" /></a>
  69.         </div>
  70.         <!-- 切换按钮数量与图片数量必须一致 -->
  71.         <div class="btns" >
  72.           <span data-index="1" class="active" onclick="setActive()"></span>
  73.           <span data-index="2" onclick="setActive()"></span>
  74.           <span data-index="3" onclick="setActive()"></span>
  75.         </div>
  76.       </div>
  78.       <script>
  79.         let btns=document.querySelectorAll(".btns span");
  80.         let imgs=document.querySelectorAll(".imgs a img");
  82.           function setActive(){
  84.             console.log(event.target);
  87.             console.log(btns);
  88.             console.log(imgs);
  90.             let btnsarray=[...btns];
  91.             let imgsarray=[...imgs];
  93.             btnsarray.forEach(element => {
  94.                 element.classList.remove("active");
  95.             });
  96.             imgsarray.forEach(ele=>ele.classList.remove("active"));
  98.             event.target.classList.add("active");
  100.             imgsarray.forEach(ele=>{
  101.                 if (ele.dataset.index===event.target.dataset.index)
  102.                 {
  103.                     ele.classList.add("active");
  104.                 }
  105.             });
  110.           }
  112.            // setInterval支持第3个参数,就是传给回调的参数
  113.            console.log(btns);
  114.         console.log(Object.keys(btns));
  115.       setInterval(
  116.         function (arr) {
  117.           // 使这个数组首尾相接实现无限循环效果
  118.           let i = arr.shift();
  119.           console.log(i);
  120.           btns[i].dispatchEvent(new Event("click"));
  121.           arr.push(i);
  122.         },
  123.         2000,
  124.         Object.keys(btns)
  125.       );
  130.       </script>
  133. </body>
  134. </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>实战2: 购物车</title>
  8.     <style>
  9.       .box {
  10.         width: 22em;
  11.         height: 2em;
  12.       }
  13.       .list > li {
  14.         height: 1.6em;
  15.         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.       }
  23.       .list > li:first-of-type {
  24.         background-color: lightseagreen;
  25.         color: white;
  26.       }
  27.       .list > li:hover:not(:first-of-type) {
  28.         cursor: pointer;
  29.         background-color: lightcyan;
  30.       }
  31.       .list > li input[type="number"] {
  32.         width: 3em;
  33.         border: none;
  34.         outline: none;
  35.         text-align: center;
  36.         font-size: 1em;
  37.         background-color: transparent;
  38.       }
  40.       .list > li:last-of-type span.total-num,
  41.       .list > li:last-of-type span.total-amount {
  42.         grid-column: span 2;
  43.         place-self: center right;
  44.         color: lightseagreen;
  45.       }
  46.       .account {
  47.         float: right;
  48.         background-color: lightseagreen;
  49.         color: white;
  50.         border: none;
  51.         outline: none;
  52.         width: 4.5em;
  53.         height: 1.8em;
  54.       }
  55.       .account:hover {
  56.         background-color: coral;
  57.         cursor: pointer;
  58.       }
  59.     </style>
  60.   </head>
  61.   <body>
  62.     <div class="box">
  63.       <div class="selectAll">
  64.         <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
  65.         <label for="check-all">全选</label>
  66.       </div>
  67.       <ul class="list">
  68.         <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
  69.         <li>
  70.           <input data-index="1" type="checkbox" onchange="checkItems()" checked />
  71.           <span class="content">手机</span>
  72.           <input data-index="1" type="number" value="1" min="1" class="num" />
  73.           <span data-index="1" class="price">100</span>
  74.           <span data-index="1" class="amount">0</span>
  75.         </li>
  76.         <li>
  77.           <input data-index="2" type="checkbox" onchange="checkItems()" checked />
  78.           <span class="content">电脑</span>
  79.           <input data-index="2" type="number" value="2" min="1" class="num" />
  80.           <span data-index="2" class="price">200</span><span data-index="2" class="amount">0</span>
  81.         </li>
  82.         <li>
  83.           <input data-index="3" type="checkbox" onchange="checkItems()" checked />
  84.           <span class="content">相机</span>
  85.           <input data-index="3" type="number" value="3" min="1" class="num" />
  86.           <span data-index="3" class="price">300</span>
  87.           <span data-index="3" class="amount">0</span>
  88.         </li>
  89.         <li>
  90.           <span>总计:</span>
  91.           <span class="total-num">0</span>
  92.           <span class="total-amount">0</span>
  93.         </li>
  94.       </ul>
  95.       <button class="account">结算</button>
  96.     </div>
  98.     <script>
  99.       // 1. 全选
  100.       function checkAll() {
  101.         // 1. 获取当前全选框的状态
  102.         let status = event.target.checked;
  104.         // 2. 根据这个状态,来动态的设置所有商品的状态
  105.         const items = document.querySelectorAll(".list li input[type=checkbox]");
  106.         items.forEach(item => (item.checked = status));
  107.       }
  109.       // 2. 根据用户选择的每个商品状态来动态设置全选状态
  110.       function checkItems() {
  111.         // 1. 获取全部的商品
  112.         const items = document.querySelectorAll(".list li input[type=checkbox]");
  114.         // 2. 判断状态,只有全部为true,才返回true, array.every
  115.         let status = [...items].every(item => item.checked === true);
  117.         // 3. 将这个状态添加到全选上
  118.         document.querySelector(".check-all").checked = status;
  119.       }
  121.       // ------------  商品的自动计算  -------------------
  123.       // 购物车所有的数据计算的依据是:  基于商品的"数量"的变化
  124.       const nums = document.querySelectorAll(".num");
  125.       const checkbox=document.querySelectorAll(".list li input[type=checkbox]");
  126.       // 1. 计算总数量
  127.       function getTotalNum(numArr) {
  128.         return numArr.reduce((acc, cur) => acc + cur);
  129.       }
  131.       // 2. 计算每个商品的金额
  132.       function getAmount(numArr, priceArr) {
  133.         // 金额 = 数量 * 单价
  134.         return numArr.map((num, index) => num * priceArr[index]);
  135.       }
  137.       // 3. 计算总金额
  138.       function getTotalAmount(amountArr) {
  139.         return amountArr.reduce((acc, cur) => acc + cur);
  140.       }
  142.       // 4. 自动计算
  143.       function autoCalculate() {
  146.         const numArr = [...nums].map(num => parseInt(num.value));
  148.         console.log(numArr);
  149.         // 单价数组
  150.         const prices = document.querySelectorAll(".price");
  151.         const priceArr = [...prices].map(price => parseInt(price.textContent));
  153.         // 金额数组
  154.         const amountArr = getAmount(numArr, priceArr);
  155.         console.log(amountArr);
  157.         // 1. 总数量
  158.         let allnum,allmoney;
  159.         allnum=getTotalNum(numArr);
  161.         allmoney= getTotalAmount(amountArr);
  162.          // 数量数组
  163.          checkboxarray=[...checkbox];
  164.          console.log(checkboxarray);
  165.          console.log("开始遍历"); 
  166.          checkboxarray.map(
  167.              function (ele){
  168.                console.log(ele.checked); 
  169.                  if (ele.checked==false)
  170.                  {
  171.                     [...nums].forEach(function (num){
  172.                         if (num.dataset.index==ele.dataset.index)
  173.                         {
  174.                             allnum=allnum-num.value;
  175.                             allmoney=allmoney-amountArr[parseInt(num.dataset.index)-1];
  176.                             console.log("所有数量:"+allnum+"当前减去:"+num.value+"当前总价格:"+allmoney);
  177.                         }
  179.                     });
  183.                  }
  184.              }
  185.          )
  186.          //   arr.filter(item => item >= 3)[0] -> find
  189.         document.querySelectorAll(".amount").forEach((amount, index) => (amount.textContent = amountArr[index]));
  192.         document.querySelector(".total-num").textContent = allnum;
  195.         document.querySelector(".total-amount").textContent = allmoney;
  199.       }
  201.       // 当购物车加载时,初始化,要自动计算
  202.       window.onload = autoCalculate;
  204.       // 当数量更新时,触发自动计算
  205.       nums.forEach(num => (num.onchange = autoCalculate));
  206.       checkbox.forEach(ele=>(ele.onchange=autoCalculate));
  207.     </script>
  209.   </body>
  210. </html>

上述代码实现了简易的购物车:只计算选中的商品, 未选中商品的数量和金额自动从总计中减去

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行