简易当当购物车

最新推荐文章于 2023-07-08 13:27:44 发布

原创最新推荐文章于 2023-07-08 13:27:44 发布 · 576 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #servlet #前端

该文章展示了一个简单的购物车页面的实现，包括HTML结构定义商品列表，CSS样式设置页面布局和细节样式，以及JavaScript处理商品数量的加减、总价计算和删除功能。

一、页面效果

二、代码部分

<body>
    <div class="container">
      <div class="header">
        <img src="./images/dd_logo.jpg" alt="" />
        <button class="closeBtn">关闭</button>
      </div>
      <br />
      <hr />
      <table border="0" cellspacing="0" cellpadding="10" width="100%">
        <thead>
          <tr>
            <th>
              <input type="checkbox" id="all" />
              <label for="all">全选</label>
            </th>
            <th>商品图片</th>
            <th>商品信息</th>
            <th>单价</th>
            <th>数量</th>
            <th>总价</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox" /></td>
            <td><img src="./images/dog.jpg" alt="" /></td>
            <td>我和狗狗活下来了</td>
            <td>¥ <span>21.9</span></td>
            <td>
              <button class="cal">-</button>
              <input type="text" value="1" />
              <button class="cal">+</button>
            </td>
            <td>¥<span>21.9</span></td>
            <td>
              <a href="#">移入收藏</a>
              <a href="#" class="del">删除</a>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td><img src="./images/mai.jpg" alt="" /></td>
            <td>灰霾来了怎么办</td>
            <td>¥ <span>24.00</span></td>
            <td>
              <button class="cal">-</button>
              <input type="text" value="1" />
              <button class="cal">+</button>
            </td>
            <td>¥<span>24.00</span></td>
            <td>
              <a href="#">移入收藏</a>
              <a href="#" class="del">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="footer">
        <div class="total"><span>商品总计：¥</span><span>45.9</span></div>
        <button class="settleBtn">结算</button>
      </div>
    </div>
  </body>

三、CSS部分

<style>
      .container {
        width: 900px;
        border: 2px solid #bbb;
        margin: 0 auto;
        text-align: center;
      }
      .header {
        display: flex;
        justify-content: space-between;
        align-items: end;
      }
      .header .closeBtn {
        width: 70px;
        height: 30px;
        border-radius: 10px;
        border: none;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        background-color: #ff0000;
        margin-right: 10px;
      }
      .container tbody img {
        width: 100px;
      }
      .container .footer {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        text-align: center;
        border-top: 1px solid #000;
      }
      .container .footer .total {
        font-size: 17px;
        flex: 1;
      }
      .container .footer .settleBtn {
        width: 80px;
        height: 40px;
        border: none;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        background-color: #ff0000;
        margin-right: 10px;
      }
      .container span {
        color: red;
      }
    </style>

四、JavaScript部分

<script>
    // 获取加减按钮
    let _cals = document.querySelectorAll(".cal");
    // 计算加减
    _cals.forEach((_cal) => {
      _cal.onclick = function () {
        // 获取操作符
        let opera = this.innerHTML;
        // 获取数量
        let _input = this.parentNode.children[1];
        // 减一
        if (_input.value * 1 <= 1 && opera == "-") {
          return;
        }
        // 执行加减
        let num = eval(_input.value * 1 + opera + 1);
        _input.value = num;
        // 计算小计
        // 单价
        // console.log(num);
        let price =
          this.parentElement.previousElementSibling.querySelector("span")
            .innerText * 1;
        let total = price * num; // 小计
        this.parentNode.nextElementSibling.querySelector("span").innerText =
          total.toFixed(2);
        // 重新计算总计
        sumTotal();
      };
    });

    // 全选
    let _all = document.querySelector("#all");
    // 获取所有反选框
    let _ckes = document.querySelectorAll("input[type=checkbox]:not(#all)");
    _all.onchange = function () {
      _ckes.forEach((_ck) => {
        _ck.checked = this.checked;
      });
      // 重新计算总计
      sumTotal();
    };

    // 反选
    _ckes.forEach((_ckbox) => {
      _ckbox.onchange = function () {
        // 获取带checked属性的所有input框
        let _checkedboxes = document.querySelectorAll(
          "input:checked:not(#all)"
        );
        _all.checked = _checkedboxes.length == _ckes.length;
        sumTotal();
      };
    });

    // 计算总计
    let _sumTotal = document.querySelector(".total");
    function sumTotal() {
      // 获取带有checked属性的小计
      let _checkedboxes = document.querySelectorAll("input:checked:not(#all)");
      let sumTotal = 0; //总计
      _checkedboxes.forEach((_ck) => {
        sumTotal +=
          _ck.parentNode.parentNode.children[5].querySelector("span")
            .innerText * 1;
        // 存放总计
        _sumTotal.children[1].innerText = sumTotal;
      });
    }

    // 删除
    let _dels = document.querySelectorAll(".del");
    _dels.forEach((_del) => {
      _del.onclick = function () {
        if (confirm("确认要删除吗？")) {
          _del.parentNode.parentNode.remove();
          // 重新计算总计
          sumTotal();
        }
      };
    });
  </script>

以上便是当当购物车的整体代码