search

博客列表 >购物车及json常用api实例

购物车及json常用api实例

P粉479712293
P粉479712293原创
2022年09月06日 16:08:10373浏览

题目一：购物车

1.对应的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.     <link rel="stylesheet" href="../static/第22章/css/1购物车实例.css">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  11.     <div class="box">
  12.         <!-- *1. 全选按钮 -->
  13.         <div class="selectAll">
  14.           <!-- *change: 当它的值发生改变时触发 -->
  15.           <!-- *checked: 当前是选中状态, 布尔属性 -->
  16.           <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
  17.           <label for="check-all">全选</label>
  18.         </div>
  19.         <!-- *2. 商品列表 -->
  20.         <ul class="list">
  21.           <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
  22.           <li>
  23.             <input type="checkbox" onchange="checkItems()" checked />
  24.             <span class="content">手机</span>
  25.             <input type="number" value="1" min="1" class="num" />
  26.             <span class="price">100</span>
  27.             <span class="amount">0</span>
  28.           </li>
  29.           <li>
  30.             <input type="checkbox" onchange="checkItems()" checked />
  31.             <span class="content">电脑</span>
  32.             <input type="number" value="2" min="1" class="num" />
  33.             <span class="price">200</span><span class="amount">0</span>
  34.           </li>
  35.           <li>
  36.             <input type="checkbox" onchange="checkItems()" checked />
  37.             <span class="content">相机</span>
  38.             <input type="number" value="3" min="1" class="num" />
  39.             <span class="price">300</span>
  40.             <span class="amount">0</span>
  41.           </li>
  42.           <li>
  43.             <span>总计:</span>
  44.             <span class="total-num">0</span>
  45.             <span class="total-amount">0</span>
  46.           </li>
  47.         </ul>
  48.         <!-- *3. 结算按钮 -->
  49.         <button class="account">结算</button>
  50.       </div>
  51.       <script src="../static/第22章/1购物车实例.js"></script>
  52. </body>
  53. </html>

2.对应的css文件如下：

  1. .box {
  2.     width: 22em;
  3.     height: 2em;
  4.   }
  5.   .list > li {
  6.     height: 1.6em;
  7.     background-color: #efefef;
  8.     display: grid;
  9.     grid-template-columns: repeat(5, 3em);
  10.     gap: 1em;
  11.     place-items: center right;
  12.     border-bottom: 1px solid #ccc;
  13.   }
  14.   .list > li:first-of-type {
  15.     background-color: lightseagreen;
  16.     color: white;
  17.   }
  18.   .list > li:hover:not(:first-of-type) {
  19.     cursor: pointer;
  20.     background-color: lightcyan;
  21.   }
  22.   .list > li input[type='number'] {
  23.     width: 3em;
  24.     border: none;
  25.     outline: none;
  26.     text-align: center;
  27.     font-size: 1em;
  28.     background-color: transparent;
  29.   }
  30.   .list > li:last-of-type span.total-num,
  31.   .list > li:last-of-type span.total-amount {
  32.     grid-column: span 2;
  33.     place-self: center right;
  34.     color: lightseagreen;
  35.   }
  36.   .account {
  37.     float: right;
  38.     background-color: lightseagreen;
  39.     color: white;
  40.     border: none;
  41.     outline: none;
  42.     width: 4.5em;
  43.     height: 1.8em;
  44.   }
  45.   .account:hover {
  46.     background-color: coral;
  47.     cursor: pointer;
  48.   }

3.对应的js文件如下：

  1. // *1设置一个全选复选框的函数（checkAll())
  2. function checkAll(){
  3.     // *1.看看当前的事件触发者是谁
  4.     console.log(event.target);
  5.     // *2.看这触发者是否被选中
  6.     console.log(event.target.checked);
  7.     // *3.把触发者是否被选中保存到变量status中
  8.     let status=event.target.checked;
  9.     // *4.获取.list下的li下的所有复选框
  10.     const items=document.querySelectorAll('.list li input[type="checkbox"]');
  11.     console.log(items);
  12.     // *5.li元素集的遍历方法（li元素就是（li元素的被选中为变量statud))
  13.     // * 即父框被选中，子框同样被选中，父框不被选中，子框也不被选中
  14.     items.forEach(item=>(item.checked=status));
  15.     console.log(items);
  16.     // *调用自动计算函数autoCalculate()
  17.     autoCalculate();
  18. }
  19. // *2创建一个检查商品复选框状态的函数checkItems()
  20. function checkItems(){
  21.     // *1获取.list下的li下的所有复选框
  22.     const items=document.querySelectorAll('.list li input[type="checkbox"]');
  23.     // *2把商品复选框转成纯数组，当每个都被选中时为true,反之为false,并返回给变量status
  24.     let status=[...items].every(item=>item.checked===true);
  25.     // *3.变量statue赋给全选框的chacked值，以此来决定全选框是否被选中
  26.     document.querySelector('.check-all').checked=status;
  27.     // *调用自动计算函数autoCalculate()
  28.     autoCalculate();
  29. }
  30. // *3获取所有显示商品数量的数组
  31. const nums=document.querySelectorAll('.list .num');
  32. console.log(nums);
  34. // *4创建计算商品数量的函数getTotalNum(numArr)
  35.     function getTotalNum(numArr){
  36.         const items = document.querySelectorAll('.list li input[type="checkbox"]');
  37.         let item = [...items].map(item => item.checked);
  38.         let a = 0;
  39.         for(let i= 0; i < numArr.length; i++){
  40.             // console.log(i);
  41.             // 在计算总数量时判断商品勾选的状态
  42.             if(item[i] == true)
  43.                 a = a + numArr[i];
  44.         }
  45.         return a;
  46.     }
  47.     let numArr = ([...nums].map(item => parseInt(item.value)));
  48.     // *计算每个商品金额：数量*单价，数量数组numArr，单价数组priceArr。
  49.     function getAmount(numArr, priceArr){
  50.         return numArr.map((num, index) => {
  51.             // console.log(num, index);
  52.             // *index是num的索引，乘以所对应的单价
  53.             return num * priceArr[index];    
  54.         });
  55.     }
  56.     // *6计算总金额
  57.     // *创建计算总金额函数getTotalAmount(amountArr)
  58.     function getTotalAmount(amountArr){
  59.         const items = document.querySelectorAll('.list li input[type="checkbox"]');
  60.         let item = [...items].map(item => item.checked);
  61.         let b = 0;
  62.         for(let i= 0; i < amountArr.length; i++){
  63.             // console.log(i);
  64.             // *在计算总金额时判断商品勾选的状态
  65.             if(item[i] == true)
  66.                 b = b + amountArr[i];
  67.         }
  68.         return b;
  69.     }
  70.      //*7创建一自动计算函数autoCalculate()
  71.     function autoCalculate(){
  73.         // *1数量数组
  74.         let numArr=[...nums].map(item=>parseInt(item.value));
  76.         // *2获取所有商品单价
  77.        const prices=document.querySelectorAll('.list .price');
  78.         // *3单价数组
  79.         let priceArr=[...prices].map(item=>parseInt(item.textContent));
  80.         // *4金额数组
  81.         const amountArr=getAmount(numArr,priceArr);
  82.        console.log(amountArr);
  83.         // *5将以上数量添加到页面
  84.         // *1.将总数量添加到页面
  85.         document.querySelector('.total-num').textContent=getTotalNum(numArr);
  87.         // *2.将每个商品的金额填充
  88.         document.querySelectorAll('.amount').forEach((item,index)=>(item.textContent = amountArr[index]));
  90.         // *3.填充总金额
  91.        document.querySelector('.total-amount').textContent=getTotalAmount(amountArr);
  94.     }
  95.            // *8.当页面加载时,根据默认值进行自动计算(以下任选一)
  96.        // window.addEventListener('load', autoCalculate, false);
  97.         window.onload = autoCalculate;
  98.          // *当用户更新商品数量时, 将会触发商品金额,总数量,和总金额的动态更新
  99.       console.log(nums);
  100.       nums.forEach(item => (item.onchange = autoCalculate));

对应的浏览器显示效果如下：

1.当全选时：

2.全选数量改变时：

3.非全选时：

4.非全选数量改变时：

题目二：json常用api及其实例

1.对应的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. </head>
  9. <body>
  10.     <script src="../static/第22章/2JSON常用api及其实例.js"></script>
  11. </body>
  12. </html>

2.对应的js文件如下：

  1. // *创建一个js对象；
  2. const user={
  3.     id:1,
  4.     name:'张三',
  5.     sex:'男',
  6. };
  7. console.log(user);
  8. console.log(typeof user);
  9. // *把以上js对象转成json字符串
  10. let man=JSON.stringify(user);
  11. console.log(man);
  12. console.log(typeof man);
  13. // *从后端返回的json字符串
  14. man=`{
  15.     "id":1,
  16.     "name":"张三",
  17.     "sex":"男"
  18. }`;
  19. console.log(man);
  20. // *把以上后端过来的json字符串转为前端的js对象：
  21. let user1=JSON.parse(man);
  22. console.log(user1);
  23. console.log(typeof user1);
  24. // *把user1这js对象放到浏览器上
  25. let html=`
  26.    <ul>
  27.       <li>编号：${user1.id}</li>
  28.       <li>姓名：${user1.name}</li>
  29.       <li>性别：${user1.sex}</li>
  30.     </ul>
  31. `;
  32. document.body.innerHTML=html;

3.对应的浏览器效果图如下：

上一条：Vue的组件下一条：vue二级路由-路由守卫-组合api
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多