欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用JavaScript编写购物车常用功能!!

程序员文章站 2022-04-28 22:32:46
...

思路:

1.全选框勾选时,单值复选框也勾选

2.单值复选框未勾选时,全选框也不勾选

3.数量变动时,自动计算数量的总和与金额总和

4.单值复选框未勾选时,不参与计算总和,且页面价格不显示为0

首先制作一个购物车HTML表单,如下图所示

使用JavaScript编写购物车常用功能!!

HTML代码

    

  1. <main>
    2. 

  2.     <h1>购物车</h1>
    3. 

  3.     <ul class="title">
    4. 

  4.         <li><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全选</label></li>
    5. 

  5.         <li>图片</li>
    6. 

  6.         <li>品名</li>
    7. 

  7.         <li>单位</li>
    8. 

  8.         <li>单价/元</li>
    9. 

  9.         <li>数量</li>
    10. 

  10.         <li>金额/元</li>
    11. 

  11.     </ul>
    12. 

  12.     <ul class="commodity">
    13. 

  13.         <input type="checkbox" name="item" value="SN-1020" checked />
    14. 

  14.         <li class="imgs">
    15. 

  15.             <a href=""><img src="images/1.jpg" alt="" /></a>
    16. 

  16.         </li>
    17. 

  17.         <li>i9 台式电脑</li>
    18. 

  18.         <li>台</li>
    19. 

  19.         <li class="price"><span class="iconfont icon-fl-renminbi"></span>9800</li>
    20. 

  20.         <input type="number" min="1" value="1" />
    21. 

  21.         <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
    22. 

  22.     </ul>
    23. 

  23.     <ul class="commodity">
    24. 

  24.         <input type="checkbox" name="item" value="SN-1020" checked />
    25. 

  25.         <li class="imgs">
    26. 

  26.             <a href=""><img src="images/4.jpg" alt="" /></a>
    27. 

  27.         </li>
    28. 

  28.         <li>MacBook Pro</li>
    29. 

  29.         <li>台</li>
    30. 

  30.         <li class="price"><span class="iconfont icon-fl-renminbi"></span>10980</li>
    31. 

  31.         <input type="number" min="1" value="1" />
    32. 

  32.         <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
    33. 

  33.     </ul>
    34. 

  34.     <ul class="commodity">
    35. 

  35.         <input type="checkbox" name="item" value="SN-1020" checked />
    36. 

  36.         <li class="imgs">
    37. 

  37.             <a href=""><img src="images/5.jpg" alt="" /></a>
    38. 

  38.         </li>
    39. 

  39.         <li>小米75电视</li>
    40. 

  40.         <li>台</li>
    41. 

  41.         <li class="price"><span class="iconfont icon-fl-renminbi"></span>4999</li>
    42. 

  42.         <input type="number" min="1" value="1" />
    43. 

  43.         <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
    44. 

  44.     </ul>
    45. 

  45.     <ul class="commodity">
    46. 

  46.         <input type="checkbox" name="item" value="SN-1020" checked />
    47. 

  47.         <li class="imgs">
    48. 

  48.             <a href=""><img src="images/6.jpg" alt="" /></a>
    49. 

  49.         </li>
    50. 

  50.         <li>Canon D单反</li>
    51. 

  51.         <li>台</li>
    52. 

  52.         <li class="price"><span class="iconfont icon-fl-renminbi"></span>8999</li>
    53. 

  53.         <input type="number" min="1" value="1" />
    54. 

  54.         <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
    55. 

  55.     </ul>
    56. 

  56.     <!-- 购物车列表 start-->
    57. 

  57.     <ul class="commodity">
    58. 

  58.         <input type="checkbox" name="item" value="SN-1020" checked />
    59. 

  59.         <li class="imgs">
    60. 

  60.             <a href=""><img src="images/7.jpg" alt="" /></a>
    61. 

  61.         </li>
    62. 

  62.         <li>高清摄像头</li>
    63. 

  63.         <li>台</li>
    64. 

  64.         <li class="price"><span class="iconfont icon-fl-renminbi"></span>299</li>
    65. 

  65.         <input type="number" min="1" value="2" />
    66. 

  66.         <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
    67. 

  67.     </ul>
    68. 

  68.     <!-- 购物车列表 end-->
    69. 

    70. 

  70.     <ul class="total">
    71. 

  71.         <li>总计:</li>
    72. 

  72.         <li class="quantity"></li>
    73. 

  73.         <li class="accounts"><span class="iconfont icon-fl-renminbi"></span></li>
    74. 

  74.     </ul>
    75. 

  75.     <ul class="settlement">
    76. 

  76.         <button><span class="iconfont icon-gouwuche"></span>结算</button>
    77. 

  77.     </ul>
    78. 

  78.     </main>
    79.

CSS代码

    

  1. @import "../font_icon/iconfont.css";
    2. 

  2. * {
    3. 

  3.     padding: 0;
    4. 

  4.     margin: 0;
    5. 

  5.     box-sizing: border-box;
    6. 

  6.     color: #2f2f2f;
    7. 

  7. }
    8. 

    9. 

  9. :root {
    10. 

  10.     font-size: 16px;
    11. 

  11. }
    12. 

    13. 

  13. li {
    14. 

  14.     list-style: none;
    15. 

  15. }
    16. 

    17. 

  17. main {
    18. 

  18.     display: grid;
    19. 

  19.     gap: 0.2rem;
    20. 

  20.     margin: 2rem 5rem;
    21. 

  21.     min-width: 800px;
    22. 

  22. }
    23. 

    24. 

  24. h1 {
    25. 

  25.     text-align: center;
    26. 

  26.     font-size: 1.6rem;
    27. 

  27.     font-weight: 500;
    28. 

  28.     height: 3rem;
    29. 

  29. }
    30. 

    31. 

  31. .title {
    32. 

  32.     background-color: #ebebeb;
    33. 

  33.     display: grid;
    34. 

  34.     grid-template-columns: repeat(7, 1fr);
    35. 

  35.     place-items: center;
    36. 

  36.     line-height: 3.5rem;
    37. 

  37.     font-weight: bold;
    38. 

  38.     border-bottom: 1px solid #a3a3a3;
    39. 

  39. }
    40. 

    41. 

  41. .title label {
    42. 

  42.     cursor: pointer;
    43. 

  43. }
    44. 

    45. 

  45. .commodity {
    46. 

  46.     display: grid;
    47. 

  47.     grid-template-columns: repeat(7, 1fr);
    48. 

  48.     place-items: center;
    49. 

  49.     border-bottom: 1px solid #a3a3a3;
    50. 

  50. }
    51. 

    52. 

  52. .commodity:hover {
    53. 

  53.     background-color: #ebebeb;
    54. 

  54. }
    55. 

    56. 

  56. .commodity input {
    57. 

  57.     cursor: pointer;
    58. 

  58. }
    59. 

    60. 

  60. .commodity input:last-of-type {
    61. 

  61.     width: 5rem;
    62. 

  62.     height: 2rem;
    63. 

  63.     outline: none;
    64. 

  64.     border: none;
    65. 

  65.     text-align: center;
    66. 

  66.     font-size: 1rem;
    67. 

  67. }
    68. 

    69. 

  69. .commodity .imgs {
    70. 

  70.     width: 2.5rem;
    71. 

  71. }
    72. 

    73. 

  73. .commodity .imgs img {
    74. 

  74.     width: 100%;
    75. 

  75.     margin: .3rem;
    76. 

  76. }
    77. 

    78. 

  78. .total {
    79. 

  79.     background: ghostwhite;
    80. 

  80.     grid-template-columns: 5fr repeat(2, 1fr);
    81. 

  81.     display: grid;
    82. 

  82.     text-align: center;
    83. 

  83.     line-height: 3rem;
    84. 

  84.     font-weight: bold;
    85. 

  85. }
    86. 

    87. 

  87. .settlement {
    88. 

  88.     place-self: end;
    89. 

  89. }
    90. 

    91. 

  91. .settlement>button {
    92. 

  92.     width: 8rem;
    93. 

  93.     padding: .5rem;
    94. 

  94.     font-size: 1rem;
    95. 

  95.     text-align: center;
    96. 

  96.     color: mintcream;
    97. 

  97.     outline: none;
    98. 

  98.     border: none;
    99. 

  99.     cursor: pointer;
    100. 

  100.     background-color: lightsteelblue;
    101. 

  101. }
    102. 

    103. 

  103. .settlement>button:hover {
    104. 

  104.     background: lightslategrey;
    105. 

  105. }
    106. 

    107. 

  107. .settlement>button>span {
    108. 

  108.     color: #da3776;
    109. 

  109.     font-weight: bold;
    110. 

  110.     font-size: 1.5rem;
    111. 

  111.     margin-right: .5rem;
    112. 

  112. }
    113.

使用JavaScript编写购物车常用功能!!

JS代码如下

    

  1.     <script>
    2. 

  2.         // 获取所有的数量控件
    3. 

  3.         const numInput = document.querySelectorAll('[type="number"');
    4. 

  4.         // 用户更新数量时触发自动计算
    5. 

  5.         numInput.forEach(input => (onchange = autoCalculate));
    6. 

  6.         // 购物车刚加载完成时也应该触发自动计算
    7. 

  7.         window.onload = autoCalculate;
    8. 

  8.         // 封装一个自动计算的函数
    9. 

  9.         function autoCalculate() {
    10. 

  10.             // 复选框全选
    11. 

  11.             const checkAll = document.querySelector('#check-all');
    12. 

  12.             // 复选框单选
    13. 

  13.             const checkItems = document.querySelectorAll('.commodity> [name="item"]');
    14. 

  14.             // 拿到复选框全选和单选框
    15. 

  15.             checkAll.onchange = check => checkItems.forEach(item => (item.checked = check.target.checked));
    16. 

  16.             // 单选框单选时全选也会取消
    17. 

  17.             checkItems.forEach(item => (item.onchange = ev => (checkAll.checked = Array.from(checkItems).every(item => item.checked))));
    18. 

  18.             // 获取新的单选框状态.选中1.未选中0:
    19. 

  19.             const checkItemsNews = Array.from(checkItems).map((item, index) => item.checked ? item[index] = 1 : item[index] = 0);
    20. 

  20.             // 获取单价组成的数组
    21. 

  21.             const prices = document.querySelectorAll('.price');
    22. 

  22.             // 遍历单价每个值
    23. 

  23.             const priceArr = Array.from(prices).map(item => item.textContent * 1);
    24. 

  24.             // 获取数量组成的数组
    25. 

  25.             const numbers = document.querySelectorAll('[type="number"]');
    26. 

  26.             // 遍历数量每个值
    27. 

  27.             const numArr = Array.from(numbers).map(item => parseInt(item.value));
    28. 

  28.             //乘以选中状态,获取新每个值
    29. 

  29.             const numArrNews = numArr.map((item, index) => item * checkItemsNews[index]);
    30. 

  30.             // 计算新量数的总计
    31. 

  31.             const num = numArrNews.reduce((item, curr) => item + curr);
    32. 

  32.             // 单选框未定义计算单价乘以数量的值
    33. 

  33.             const priceOld = [priceArr, numArr].reduce((items, curr) => items.map((item, index) => item * curr[index]));
    34. 

  34.             // 计算单价乘以数量的值
    35. 

  35.             const priceArray = [priceArr, numArrNews].reduce((items, curr) => items.map((item, index) => item * curr[index]));
    36. 

  36.             // 全部商品金额总计
    37. 

  37.             const priceAll = priceArray.reduce((item, curr) => item + curr);
    38. 

  38.             // 将计算结果渲染到购物车中
    39. 

  39.             // 总数量
    40. 

  40.             document.querySelector(".quantity").textContent = num;
    41. 

  41.             // 总金额
    42. 

  42.             document.querySelector(".accounts>span").textContent = priceAll;
    43. 

  43.             // 每个商品的金额
    44. 

  44.             document.querySelectorAll(".amount>span").forEach((item, index) => (item.textContent = priceOld[index]));
    45. 

  45.         }
    46. 

  46.     </script>
    47.

上一篇： node.js中的npm update如何使用

下一篇： 仿京东商城移动端网页

推荐阅读