Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用JavaScript编写购物车常用功能!!
Blogger Information
Blog 20
fans 1
comment 0
visits 17587
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
使用JavaScript编写购物车常用功能!!
xosing的博客
Original
804 people have browsed it

思路:

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

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

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

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

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

HTML代码

  1. <main>
  2.     <h1>购物车</h1>
  3.     <ul class="title">
  4.         <li><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全选</label></li>
  5.         <li>图片</li>
  6.         <li>品名</li>
  7.         <li>单位</li>
  8.         <li>单价/元</li>
  9.         <li>数量</li>
  10.         <li>金额/元</li>
  11.     </ul>
  12.     <ul class="commodity">
  13.         <input type="checkbox" name="item" value="SN-1020" checked />
  14.         <li class="imgs">
  15.             <a href=""><img src="images/1.jpg" alt="" /></a>
  16.         </li>
  17.         <li>i9 台式电脑</li>
  18.         <li>台</li>
  19.         <li class="price"><span class="iconfont icon-fl-renminbi"></span>9800</li>
  20.         <input type="number" min="1" value="1" />
  21.         <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
  22.     </ul>
  23.     <ul class="commodity">
  24.         <input type="checkbox" name="item" value="SN-1020" checked />
  25.         <li class="imgs">
  26.             <a href=""><img src="images/4.jpg" alt="" /></a>
  27.         </li>
  28.         <li>MacBook Pro</li>
  29.         <li>台</li>
  30.         <li class="price"><span class="iconfont icon-fl-renminbi"></span>10980</li>
  31.         <input type="number" min="1" value="1" />
  32.         <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
  33.     </ul>
  34.     <ul class="commodity">
  35.         <input type="checkbox" name="item" value="SN-1020" checked />
  36.         <li class="imgs">
  37.             <a href=""><img src="images/5.jpg" alt="" /></a>
  38.         </li>
  39.         <li>小米75电视</li>
  40.         <li>台</li>
  41.         <li class="price"><span class="iconfont icon-fl-renminbi"></span>4999</li>
  42.         <input type="number" min="1" value="1" />
  43.         <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
  44.     </ul>
  45.     <ul class="commodity">
  46.         <input type="checkbox" name="item" value="SN-1020" checked />
  47.         <li class="imgs">
  48.             <a href=""><img src="images/6.jpg" alt="" /></a>
  49.         </li>
  50.         <li>Canon D单反</li>
  51.         <li>台</li>
  52.         <li class="price"><span class="iconfont icon-fl-renminbi"></span>8999</li>
  53.         <input type="number" min="1" value="1" />
  54.         <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
  55.     </ul>
  56.     <!-- 购物车列表 start-->
  57.     <ul class="commodity">
  58.         <input type="checkbox" name="item" value="SN-1020" checked />
  59.         <li class="imgs">
  60.             <a href=""><img src="images/7.jpg" alt="" /></a>
  61.         </li>
  62.         <li>高清摄像头</li>
  63.         <li>台</li>
  64.         <li class="price"><span class="iconfont icon-fl-renminbi"></span>299</li>
  65.         <input type="number" min="1" value="2" />
  66.         <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
  67.     </ul>
  68.     <!-- 购物车列表 end-->
  70.     <ul class="total">
  71.         <li>总计:</li>
  72.         <li class="quantity"></li>
  73.         <li class="accounts"><span class="iconfont icon-fl-renminbi"></span></li>
  74.     </ul>
  75.     <ul class="settlement">
  76.         <button><span class="iconfont icon-gouwuche"></span>结算</button>
  77.     </ul>
  78.     </main>

CSS代码

  1. @import "../font_icon/iconfont.css";
  2. * {
  3.     padding: 0;
  4.     margin: 0;
  5.     box-sizing: border-box;
  6.     color: #2f2f2f;
  7. }
  9. :root {
  10.     font-size: 16px;
  11. }
  13. li {
  14.     list-style: none;
  15. }
  17. main {
  18.     display: grid;
  19.     gap: 0.2rem;
  20.     margin: 2rem 5rem;
  21.     min-width: 800px;
  22. }
  24. h1 {
  25.     text-align: center;
  26.     font-size: 1.6rem;
  27.     font-weight: 500;
  28.     height: 3rem;
  29. }
  31. .title {
  32.     background-color: #ebebeb;
  33.     display: grid;
  34.     grid-template-columns: repeat(7, 1fr);
  35.     place-items: center;
  36.     line-height: 3.5rem;
  37.     font-weight: bold;
  38.     border-bottom: 1px solid #a3a3a3;
  39. }
  41. .title label {
  42.     cursor: pointer;
  43. }
  45. .commodity {
  46.     display: grid;
  47.     grid-template-columns: repeat(7, 1fr);
  48.     place-items: center;
  49.     border-bottom: 1px solid #a3a3a3;
  50. }
  52. .commodity:hover {
  53.     background-color: #ebebeb;
  54. }
  56. .commodity input {
  57.     cursor: pointer;
  58. }
  60. .commodity input:last-of-type {
  61.     width: 5rem;
  62.     height: 2rem;
  63.     outline: none;
  64.     border: none;
  65.     text-align: center;
  66.     font-size: 1rem;
  67. }
  69. .commodity .imgs {
  70.     width: 2.5rem;
  71. }
  73. .commodity .imgs img {
  74.     width: 100%;
  75.     margin: .3rem;
  76. }
  78. .total {
  79.     background: ghostwhite;
  80.     grid-template-columns: 5fr repeat(2, 1fr);
  81.     display: grid;
  82.     text-align: center;
  83.     line-height: 3rem;
  84.     font-weight: bold;
  85. }
  87. .settlement {
  88.     place-self: end;
  89. }
  91. .settlement>button {
  92.     width: 8rem;
  93.     padding: .5rem;
  94.     font-size: 1rem;
  95.     text-align: center;
  96.     color: mintcream;
  97.     outline: none;
  98.     border: none;
  99.     cursor: pointer;
  100.     background-color: lightsteelblue;
  101. }
  103. .settlement>button:hover {
  104.     background: lightslategrey;
  105. }
  107. .settlement>button>span {
  108.     color: #da3776;
  109.     font-weight: bold;
  110.     font-size: 1.5rem;
  111.     margin-right: .5rem;
  112. }

JS代码如下

  1.     <script>
  2.         // 获取所有的数量控件
  3.         const numInput = document.querySelectorAll('[type="number"');
  4.         // 用户更新数量时触发自动计算
  5.         numInput.forEach(input => (onchange = autoCalculate));
  6.         // 购物车刚加载完成时也应该触发自动计算
  7.         window.onload = autoCalculate;
  8.         // 封装一个自动计算的函数
  9.         function autoCalculate() {
  10.             // 复选框全选
  11.             const checkAll = document.querySelector('#check-all');
  12.             // 复选框单选
  13.             const checkItems = document.querySelectorAll('.commodity> [name="item"]');
  14.             // 拿到复选框全选和单选框
  15.             checkAll.onchange = check => checkItems.forEach(item => (item.checked = check.target.checked));
  16.             // 单选框单选时全选也会取消
  17.             checkItems.forEach(item => (item.onchange = ev => (checkAll.checked = Array.from(checkItems).every(item => item.checked))));
  18.             // 获取新的单选框状态.选中1.未选中0:
  19.             const checkItemsNews = Array.from(checkItems).map((item, index) => item.checked ? item[index] = 1 : item[index] = 0);
  20.             // 获取单价组成的数组
  21.             const prices = document.querySelectorAll('.price');
  22.             // 遍历单价每个值
  23.             const priceArr = Array.from(prices).map(item => item.textContent * 1);
  24.             // 获取数量组成的数组
  25.             const numbers = document.querySelectorAll('[type="number"]');
  26.             // 遍历数量每个值
  27.             const numArr = Array.from(numbers).map(item => parseInt(item.value));
  28.             //乘以选中状态,获取新每个值
  29.             const numArrNews = numArr.map((item, index) => item * checkItemsNews[index]);
  30.             // 计算新量数的总计
  31.             const num = numArrNews.reduce((item, curr) => item + curr);
  32.             // 单选框未定义计算单价乘以数量的值
  33.             const priceOld = [priceArr, numArr].reduce((items, curr) => items.map((item, index) => item * curr[index]));
  34.             // 计算单价乘以数量的值
  35.             const priceArray = [priceArr, numArrNews].reduce((items, curr) => items.map((item, index) => item * curr[index]));
  36.             // 全部商品金额总计
  37.             const priceAll = priceArray.reduce((item, curr) => item + curr);
  38.             // 将计算结果渲染到购物车中
  39.             // 总数量
  40.             document.querySelector(".quantity").textContent = num;
  41.             // 总金额
  42.             document.querySelector(".accounts>span").textContent = priceAll;
  43.             // 每个商品的金额
  44.             document.querySelectorAll(".amount>span").forEach((item, index) => (item.textContent = priceOld[index]));
  45.         }
  46.     </script>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post