search

博客列表 >原生购物车

原生购物车

再见羊肉串儿
再见羊肉串儿原创
2021年08月05日 20:55:51697浏览
  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="style.css" />
  8.     <title>购物车</title>
  9.     <style></style>
  10.   </head>
  11.   <body>
  12.     <table>
  13.       <caption>
  14.         <h2>我的购物车</h2>
  15.       </caption>
  16.       <thead>
  17.         <th>
  18.           <input type="checkbox" name="checkAll" id="checkAll" checked />
  19.           <label for="checkAll">全选</label>
  20.         </th>
  21.         <th>图片</th>
  22.         <th>品名</th>
  23.         <th>单位</th>
  24.         <th>单价/元</th>
  25.         <th>数量</th>
  26.         <th>金额/元</th>
  27.       </thead>
  28.       <tbody>
  29.         <tr>
  30.           <td>
  31.             <input type="checkbox" name="item" class="item" checked />
  32.           </td>
  33.           <td>
  34.             <img src="images/p1.png" />
  35.           </td>
  36.           <td>JavaScript权威指南（第七版）</td>
  37.           <td>本</td>
  38.           <td>100</td>
  39.           <td>
  40.             <input type="number" class="num" min="1" value="1" />
  41.           </td>
  42.           <td class="amount">0</td>
  43.         </tr>
  44.         <tr>
  45.           <td>
  46.             <input type="checkbox" name="item" class="item" checked />
  47.           </td>
  48.           <td>
  49.             <img src="images/p2.png" />
  50.           </td>
  51.           <td>JavaScript权威指南（第七版）</td>
  52.           <td>本</td>
  53.           <td>200</td>
  54.           <td>
  55.             <input type="number" class="num" min="1" value="1" />
  56.           </td>
  57.           <td class="amount">0</td>
  58.         </tr>
  59.         <tr>
  60.           <td>
  61.             <input type="checkbox" name="item" class="item" checked />
  62.           </td>
  63.           <td>
  64.             <img src="images/p3.png" />
  65.           </td>
  66.           <td>JavaScript权威指南（第七版）</td>
  67.           <td>本</td>
  68.           <td>300</td>
  69.           <td>
  70.             <input type="number" class="num" min="1" value="1" />
  71.           </td>
  72.           <td class="amount">0</td>
  73.         </tr>
  74.         <tr>
  75.           <td>
  76.             <input type="checkbox" name="item" class="item" checked />
  77.           </td>
  78.           <td>
  79.             <img src="images/p4.png" />
  80.           </td>
  81.           <td>JavaScript权威指南（第七版）</td>
  82.           <td>本</td>
  83.           <td>400</td>
  84.           <td>
  85.             <input type="number" class="num" min="1" value="1" />
  86.           </td>
  87.           <td class="amount">0</td>
  88.         </tr>
  89.         <tr>
  90.           <td>
  91.             <input type="checkbox" name="item" class="item" />
  92.           </td>
  93.           <td>
  94.             <img src="images/p5.png" />
  95.           </td>
  96.           <td>JavaScript权威指南（第七版）</td>
  97.           <td>本</td>
  98.           <td>500</td>
  99.           <td>
  100.             <input type="number" class="num" min="1" value="1" />
  101.           </td>
  102.           <td class="amount">0</td>
  103.         </tr>
  104.       </tbody>
  105.       <tfoot>
  106.         <tr>
  107.           <td colspan="5">总计</td>
  108.           <td>0</td>
  109.           <td>0</td>
  110.         </tr>
  111.       </tfoot>
  112.     </table>
  113.     <script src="demo.js"></script>
  114.   </body>
  115. </html>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. html {
  8.   font-size: 10px;
  9. }
  11. body {
  12.   font-size: 1.6rem;
  13. }
  15. /* table样式 */
  17. /* 表格*/
  18. table {
  19.   margin: 0 auto;
  20.   border-collapse: collapse;
  21. }
  23. input,
  24. label:hover {
  25.   cursor: pointer;
  26. }
  28. /* 隔行变色 */
  29. tr:nth-of-type(even) {
  30.   background-color: gainsboro;
  31. }
  33. caption {
  34.   margin: 1rem 0;
  35. }
  37. /* tbody样式 */
  38. thead {
  39.   background-color: green;
  40.   color: white;
  41. }
  43. tfoot {
  44.   background-color: lightblue;
  45. }
  47. /* 设置边框线 */
  48. th,
  49. td {
  50.   text-align: center;
  51.   padding: 1rem;
  52. }
  53. /* 图片大小 */
  54. td > img {
  55.   width: 3em;
  56.   height: 3em;
  57. }
  1. /**
  2.  * 当页面加载成功后计算选中商品的价格和数目
  3.  * */
  4. window.onload = autoCalculate;
  6. //获取“全选"按钮元素
  7. let checkAllBtn = document.querySelector("#checkAll");
  8. //获取多选框元素
  9. let checkBoxArr = document.querySelectorAll("input[name='item']");
  11. /**
  12.  * 全选与全不选
  13.  */
  14. // checkAllBtn.onclick = function (ev) {
  15. //   checkBoxArr.forEach(function (item) {
  16. //     item.checked = ev.target.checked;
  17. //   });
  18. // };
  19. //上面注释的简化形式
  20. checkAllBtn.onclick = (ev) =>
  21.   checkBoxArr.forEach((item) => (item.checked = ev.target.checked));
  22. //每次点击也要计算一次数据
  23. checkAllBtn.onchange = autoCalculate;
  25. /**
  26.  * 只有一个没有选中，全选框就不选中
  27.  */
  28. checkBoxArr.forEach(function (item) {
  29.   item.onclick = function () {
  30.     let res = [...checkBoxArr].every(function (ite) {
  31.       return ite.checked;
  32.     });
  33.     checkAllBtn.checked = res;
  34.   };
  35.   //每次点击也要计算一次数据
  36.   item.onchange = autoCalculate;
  37. });
  39. // 获取产品单价元素
  40. let tdPriceArr = document.querySelectorAll("tr >td:nth-of-type(5)");
  41. let priceArr = [...tdPriceArr].map(function (ev) {
  42.   return ev.textContent * 1;
  43. });
  44. //当数量发生变化的时候获取数量
  45. let tdNumArr = document.querySelectorAll(".num");
  46. //当每一个数量框发生变化时调用方法autoCalculate
  47. tdNumArr.forEach(function (ev) {
  48.   ev.onchange = autoCalculate;
  49. });
  51. function autoCalculate() {
  52.   let numArr = [...tdNumArr].map(function (item) {
  53.     return item.value * 1;
  54.   });
  55.   //   let p = [numArr, priceArr].reduce(function (prev, curr) {
  56.   //     let a = prev.map(function (item, index) {
  57.   //       return item * curr[index];
  58.   //     });
  59.   //     return a;
  60.   //   });
  61.   //上面注释的简化
  62.   //   计算每种商品的消耗的总金额，数量*单价
  63.   let o = [numArr, priceArr].reduce((prev, curr) =>
  64.     prev.map((item, index) => item * curr[index])
  65.   );
  66.   //   将价格放到每款产品后面
  67.   let price = document.querySelectorAll(".amount");
  68.   price.forEach(function (items, index) {
  69.     items.textContent = o[index];
  70.   });
  71.   /**
  72.    * 给总计赋值
  73.    * 获取选中的tr,如果没有选中的tr则默认总计的地方都为0
  74.    */
  75.   let totleNum = document.querySelector("tfoot > tr > td:nth-of-type(2)");
  76.   let totlePrice = document.querySelector("tfoot > tr > td:nth-of-type(3)");
  77.   let checkArr = document.querySelectorAll("input[name='item']:checked");
  78.   //   console.log(checkArr.length);
  79.   if (checkArr.length > 0) {
  80.     // 获取选中的tr里面的价格
  81.     let pricecarr = [...checkArr].map(function (ev) {
  82.       return (
  83.         ev.parentNode.parentNode.querySelector("td:nth-of-type(5)")
  84.           .textContent * 1
  85.       );
  86.     });
  87.     // 获取选中的tr里面的数量
  88.     let numcarr = [...checkArr].map(function (ev) {
  89.       return ev.parentNode.parentNode.querySelector(".num").value * 1;
  90.     });
  91.     let c = [numcarr, pricecarr].reduce((prev, curr) =>
  92.       prev.map((item, index) => item * curr[index])
  93.     );
  94.     //总计里面的数据只计算选中的，不选中的不计算
  95.     totleNum.textContent = numcarr.reduce(function (prev, curr) {
  96.       return prev + curr;
  97.     });
  98.     totlePrice.textContent = c.reduce(function (prev, curr) {
  99.       return prev + curr;
  100.     });
  101.   } else {
  102.     totleNum.textContent = 0;
  103.     totlePrice.textContent = 0;
  104.   }
  105. }
上一条：【前端 · 面试 】HTTP 总结（五）—— GET 和 POST下一条：参数，作用域，匿名函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多