javascript 实现购物车页面

最新推荐文章于 2024-06-18 11:26:21 发布

littleHiuman

最新推荐文章于 2024-06-18 11:26:21 发布

阅读量4.4k

点赞数 1

分类专栏： javascript 文章标签： JavaScript

本文链接：https://blog.csdn.net/hiumanChung/article/details/84854801

版权

（2020-09-10更新：修复发现的bug，优化代码）

跟商城有关系的网站，难免会有购物车的结账界面。

我用javascript实现了增加数量/减少数量,实时计算总金额，删除该商品，选中商品/反选商品/全选/全反选...的操作。

欢迎指点！~

图片没有提供，建议自己替换。

效果如图：

用到的素材：加号减号商品图删除图标选中的图标和没选中的图标

代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 16px;
        font-family: 'arial';
        font-weight: normal;
      }

      table {
        width: 1020px;
        margin: 0 auto;
        border: 1px solid gray;
        margin-top: 30px;
        border-collapse: collapse;
        text-align: center;
      }
      table tr {
        height: 100px;
        line-height: 100px;
      }
      table th:nth-child(1) {
        width: 72px;
      }
      table th:nth-child(2) {
        width: 357px;
      }
      table th:nth-child(3) {
        width: 133px;
      }
      table th:nth-child(4) {
        width: 153px;
      }
      table th:nth-child(5),
      table th:nth-child(6) {
        width: 152px;
      }

      thead {
        background: black;
        color: white;
      }
      thead tr,
      tfoot tr {
        height: 40px;
        line-height: 40px;
      }

      tbody tr {
        border-bottom: 1px solid black;
      }

      table img {
        float: left;
        width: 65px;
        height: 65px;
        margin-top: 18px;
      }
      table input[type='checkbox'] {
        width: 32px;
        heig