JavaScript购物车案例

关注

原创最新推荐文章于 2026-09-17 18:49:52 发布 446 阅读 AI 写同款· GEO 优化 ›

javascript购物车详解实现购物车完整功能(附效果图，完整代码) 我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。阅读详情

一、实现效果

效果实现

二、实现步骤

1、静态页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
      }
      body {
        background: #ea4335;
      }
      .main {
        width: 800px;
        margin: auto;
        margin-top: 20px;
      }
      .top {
        background: #fff;
        padding: 10px;
      }
      .ipt {
        width: 230px;
        height: 32px;
        line-height: 32px;
        border: 1px solid #ccc;
      }
      .btn {
        height: 34px;
        width: 120px;
        border: none;
      }

      .cart {
        background: #fff;
        margin-top: 20px;
        padding: 10px;
      }
      .cart .tr {
        height: 35px;
      }
      .cart .tr div {
        float: left;
        line-height: 35px;
      }
      .cart .tr {
        padding: 5px 0px;
        border-bottom: 1px solid #ccc;
      }
      .cart .tr {
        clear: both;
      }
      .cart .tr div:nth-child(1) {
        width: 20%;
      }
      .cart .tr div:nth-child(2) {
        width: 20%;
      }
      .cart .tr div:nth-child(3) {
        width: 20%;
      }
      .cart .tr div:nth-child(4) {
        width: 30%;
      }
      .cart .tr div:nth-child(5) {
        width: 10%;
      }
      .cart .tr input {
        width: 50px;
      }

      .footer {
        background: #fff;
        margin-top: 20px;
        padding: 10px;
      }
      #amount {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="top">
        商品名称：<input type="text" name="" value="" id="title" class="ipt" /> 商品价格：<input type="text" name="" value="" id="price" class="ipt" />
        <input type="button" value="加入购物车" class="btn" id="addcart" />
      </div>
      <div class="cart">
        <div class="tr">
          <div><input type="checkbox" name="" value="" id="selectAll" /> 全选按钮</div>
          <div>商品名称</div>
          <div>商品价格</div>
          <div>数量</div>
          <div>操作</div>
        </div>
        <div id="goods">
          <div class="tr" id="1655771835688">
            <div><input type="checkbox" name="ckboxs" value="1655771835688" /></div>
            <div>鼠标</div>
            <div>100元</div>
            <div>
              <a href="javascript:;" name="-">-</a>
              <input type="text" value="1" readonly="" />
              <a href="javascript:;" name="+">+</a>
            </div>
            <div><a href="javascript:;" name="del">删除</a></div>
          </div>
        </div>
      </div>
      <div class="footer">
        总共<span id="count">0</span>件商品,共计 <span id="amount">0</span> 元
        <a href="javascript:;" class="r" id="delall">清空购物车</a>
      </div>
    </div>
  </body>
</html>

2、模拟数据、渲染数据

class Cart {
  // 1、模拟数据
  goods = [
    { id: 1, title: "电脑", price: 100, num: 1, checked: true },
    { id: 2, title: "鼠标", price: 50, num: 1, checked: false },
    { id: 3, title: "键盘", price: 80, num: 1, checked: true },
  ];
  //获取goods节点
  goodsNode = document.getElementById("goods");

  //渲染数据
  render(h) {
    var str = "";
    for (var i = 0; i < this.goods.length; i++) {//循环拼接结构
      str += ` <div class="tr" id="${this.goods[i].id}">
        <div><input type="checkbox" name="ckboxs" value="1655771835688" ${this.goods[i].checked?'checked':''} /></div>
        <div>${this.goods[i].title}</div>
        <div>${this.goods[i].price}元</div>
        <div>
        <a href="javascript:;" name="-">-</a>
        <input type="text" value="${this.goods[i].num}" readonly="" />
        <a href="javascript:;" name="+">+</a>
        </div>
        <div><a href="javascript:;" name="del">删除</a></div>
    </div>`;
    }
    this.goodsNode.innerHTML = str;
  }
}
var mycart = new Cart();
mycart.render();

3、点击添加按钮，添加商品

class Cart {
  
  //constructor 初始化执行
  constructor() {
    this.render();
    this.addevent();
  }
 
  //3.1 获取添加购物车按钮节点
  addcartNode = document.getElementById("addcart");
  // 3.4 获取商品名，商品价格输入框节点
  titleNode = document.getElementById("title");
  priceNode = document.getElementById("price");

  //所有监听事件的函数
  addevent() {
    // 3.3 保存当前实例的this
    var _this = this;
    // 3.2 addcart添加购物车按钮的点击事件
    this.addcartNode.addEventListener("click", function () {
      // console.log(this); //注意，此时的this是addcart按钮
      //3.5获取用户输入的商品名以及价格，传递给保存数据函数,注意一个函数只做一件事
      var title = _this.titleNode.value;
      var price = _this.priceNode.value;
      //3.9、如果用户输入为空，则返回
      if (title == "" || price == "") return;
      //   console.log(title,price);
      _this.saveData(title, price);
      //3.8 添加完数据后，将输入框内容变为空
      _this.titleNode.value = "";
      _this.priceNode.value = "";
    });
  }
  //3.6 saveData
  saveData(title, price) {
    var obj = {
      id: Date.now(),
      title: title,
      price: price,
      num: 1,
      checked: true,
    };
    this.goods.unshift(obj);
    // 3.7 数据准备好后，重新渲染函数
    // console.log(this.goods);
    this.render();
  }

  //2、渲染数据
  render(h) {
    ······
  }
}
var mycart = new Cart();
mycart.render();

4、修改复选框状态

class Cart {
  // 1、模拟数据
  goods = [
    { id: 1, title: "电脑", price: 100, num: 1, checked: true },
    { id: 2, title: "鼠标", price: 50, num: 1, checked: false },
    { id: 3, title: "键盘", price: 80, num: 1, checked: true },
  ];

  //constructor 初始化执行
  constructor() {
    this.render();
    this.addevent();
  }
  //获取goods节点
  goodsNode = document.getElementById("goods");
  ·····

  //所有监听事件的函数
  addevent() {
    ·····
    // 4、监听复选框状态，采用事件委托，监听goodsNode
    this.goodsNode.addEventListener("click", function (e) {
      //4.1 e.target.name 获取目标对象身上的name属性，用来标识点击对象的不同，从而有不同的处理逻辑
      if (e.target.name == "ckboxs") {
        // 4.2 获取点击按钮的id，以及状态，传递给修改函数，进行数据的修改
        var id = e.target.parentNode.parentNode.id;
        var checked = e.target.checked;
        // console.log(id, checked);
        _this.editDate(id, "checked", checked);
      }
    });
  }
  //  4.3 、修改数据函数,修改哪个id，哪个属性，哪个值
  editDate(id, key, value) {
    // 4.4遍历数据，筛选出，要修改哪条数据，然后把对应属性以及属性值修改了
    for (let index = 0; index < this.goods.length; index++) {
      if (this.goods[index].id == id) {
        this.goods[index][key] = value;
      }
    }
    // 4.4 修改后，需要重新渲染
    this.render();
    // console.log(this.goods);
  }
  ······

5、通过点击 “ + ” 和 “ - ” 修改商品数量

  //所有监听事件的函数
  addevent() {
        ·····
      //   5.1 、监听+ -
      if (e.target.name == "+" || e.target.name == "-") {
        // 5.2 拿到修改值的id，以及num的值
        var id = e.target.parentNode.parentNode.id;
        var num;
        for (let index = 0; index < _this.goods.length; index++) {
          if (_this.goods[index].id == id) {
            num = _this.goods[index].num;
          }
        }
        // 5.3判断点击的是+，还是-，进行数字的改变
        if (e.target.name == "+") {
          num++;
        } else {
          num--;
        }
        if (num <= 0) {
          num = 1;
        }
        // 5.4  将准备的ID，num传递该修改数据函数
        _this.editDate(id, "num", num);
      }
    });
  }

6、点击删除，删除数据

  //所有监听事件的函数
  addevent() {
    ····
      //6、1删除商品
      if ((e.target.name = "del")) {
        //6.2 获取点击删除按钮的id
        var id = e.target.parentNode.parentNode.id;
        //6.3 将准备好的id传递给删除函数
        _this.delData(id);
      }
    });
  }
  //6、删除数据函数  id，删除哪个数据
  delData(id) {
    // 方法一：
    // var newData = [];
    // for (let index = 0; index < this.goods.length; index++) {
    //   if (id != this.goods[index].id) {
    //     newData.push(this.goods[index]);
    //   }
    // }
    // this.goods = newData;
    // this.render();
    // 方法二：
    this.goods = this.goods.filter(function (item) {
      return item.id != id;
    });
    this.render();
  }

7、实现全选和反选

// 4、监听复选框状态，采用事件委托，监听goodsNode
 this.goodsNode.addEventListener("click", function (e) {
        ·····
    // 7、全选按钮
    this.selectAllNode.addEventListener("click", function (e) {
      //7.2 获取全选按钮的状态，全选按钮的状态跟每个商品的状态一直
      var isAllChecked = e.target.checked;
      //7.3 传递全选状态给处理函数
      _this.selectAll(isAllChecked);
    });
  }
  
  //7.4、全选与反全选
  selectAll(isAllChecked) {
    for (let index = 0; index < this.goods.length; index++) {
      this.goods[index].checked = isAllChecked;
    }
    this.render();
  }

8、选中全部的单选，全选

 //所有监听事件的函数
  addevent() {
    ·····
    // 4、监听复选框状态，采用事件委托，监听goodsNode
    this.goodsNode.addEventListener("click", function (e) {
     ······
        // 8.1、监听复选框状态，如果全部为true，则全选按钮为true
        _this.editSelectAll();
      }
    });
    ·····
    
  // 8.2、处理单选与全选交互
  editSelectAll() {
    // 第一种写法
    // var checked = true; //默认checed状态为true
    // for (let index = 0; index < this.goods.length; index++) {
    //   // 只要商品的单选框没有有没有被选中，则将checked变为false
    //   if (!this.goods[index].checked) {
    //     checked = false;
    //   }
    // }
    // //改变selectAllNode的状态
    // this.selectAllNode.checked = checked;
    // 第二种写法：
    var goodCheck = 0;
    for (let index = 0; index < this.goods.length; index++) {
      if (this.goods[index].checked) {
        goodCheck += 1;
      }
    }
    if (this.goods.length == goodCheck) {
      this.selectAllNode.checked = true;
    } else {
      this.selectAllNode.checked = false;
    }
  }

9、清空购物车

 // 9.1 获取清空购物车按钮
  delallNode = document.getElementById("delall");

  //所有监听事件的函数
  addevent() {
    ·····
    // 9、清空购物车
    this.delallNode.addEventListener("click", function () {
        _this.goods=[]
        _this.render()
    });
}

10、计算商品总价和数量

 //10.1 获取商品件数，商品总价节点
  countNode = document.getElementById("count");
  amountNode = document.getElementById("amount");
····
  //10、计算底部数据,在初次渲染函数render中，进行渲染，后面，随着用户的操作，也会随着冲洗渲染
  changeFooter() {
    // 计算底部商品件数
    var count = 0;
    var amount = 0;
    for (let index = 0; index < this.goods.length; index++) {
      if (this.goods[index].checked) {
        count += this.goods[index].num;
        amount += this.goods[index].num * this.goods[index].price;
      }
    }
    this.countNode.innerHTML = count;
    this.amountNode.innerHTML = amount;
  }

11、实现本地存储

  //constructor 初始化执行
  constructor() {
    // 初始化时，从本地拿去数据
    this.goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];
    this.render();
    this.addevent();
    // 全选按钮，也需要初始化时
    this.editSelectAll()
  }
  ````
  //2、渲染数据
  render() {
    var str = "";
    for (var i = 0; i < this.goods.length; i++) {
      str += ` 
      <div class="tr" id="${this.goods[i].id}">
        <div><input type="checkbox" name="ckboxs" value="1655771835688"  ${this.goods[i].checked ? "checked" : ""} /></div>
        <div>${this.goods[i].title}</div>
        <div>${this.goods[i].price}元</div>
        <div>
            <a href="javascript:;" name="-">-</a>
            <input type="text" value="${this.goods[i].num}" readonly="" />
            <a href="javascript:;" name="+">+</a>
        </div>
        <div><a href="javascript:;" name="del">删除</a></div>
    </div>`;
    }
    this.goodsNode.innerHTML = str;
    // 调用商品总数量，以及总价格
    this.changeFooter();
    // 保存数据到本地
    localStorage.setItem("goods", JSON.stringify(this.goods));
  }

下面是完整的JS部分代码（采用ES6写法）

// es6结构
let _this;
class ShoppingCart{
  //静态数据
  goodsList=[]
  // 获取good节点
  goodsNode=document.getElementById('goods');
  //获取加入购物车的节点
  addcartNode=document.getElementById('addcart');
  //获取title节点
  titleNode=document.getElementById('title');
  //获取价格节点
  priceNode=document.getElementById('price');
  //获取全选节点
  selectAllNode=document.getElementById('selectAll');
  //清空数据节点
  delallNode=document.getElementById('delall');
  //获取总数量节点
  countNode=document.getElementById('count');
  //获取总价格节点
  amountNode=document.getElementById('amount');
  //初始化数据
  constructor(){
    _this=this;
    this.goodsList=localStorage.getItem("goods")?JSON.parse(localStorage.getItem("goods")):[];
    this.render();
    this.addEvent();

  }
  //监听事件
  addEvent(){
    _this.addcartNode.addEventListener('click',this.addcartFun);
    //监听商品
    _this.goodsNode.addEventListener('click',this.goodsFun);
    //监听全选按钮
    _this.selectAllNode.addEventListener('click',this.selectAllFun);
    //监听清空按钮
    _this.delallNode.addEventListener('click',this.clearFun);
  }
  //渲染函数
  render(){
    let str="";
    for (let i = 0; i < _this.goodsList.length; i++) {
      str+=`
            <div class="tr" id="${_this.goodsList[i].id}" >
            <div><input type="checkbox" name="ckboxs" value="1655771835688" ${_this.goodsList[i].checked?"checked":''}/></div>
            <div>${_this.goodsList[i].title}</div>
            <div>${_this.goodsList[i].price}元</div>
            <div>
              <a href="javascript:;" name="-">-</a>
              <input type="text" value="${_this.goodsList[i].num}" readonly="" />
              <a href="javascript:;" name="+">+</a>
            </div>
            <div><a href="javascript:;" name="del">删除</a></div>
          </div>
            `
    }
    _this.goodsNode.innerHTML=str;
    //保存数据到本地
    localStorage.setItem("goods",JSON.stringify(_this.goodsList))   
    _this.getCountAndPrice()
    this.reversecheckFun();

  }
  //添加商品到购物车
  addcartFun(){
    let goodsTitle=_this.titleNode.value;
    let goodsPrice=_this.priceNode.value;
    let obj={
      id:+new Date(),
      title:goodsTitle,
      price:goodsPrice,
      num:1,
      checked:true
    }
    //判断是否为空，为空就给加入购物车
    if(_this.titleNode.value==""||_this.priceNode.value==""||isNaN(_this.priceNode.value)) return;
    _this.goodsList.push(obj)
    _this.render()
    _this.titleNode.value=""
    _this.priceNode.value=""

  }
  //操作商品
  goodsFun(e){
    console.log(e.target);
    let id=e.target.parentNode.parentNode.id;
    //修改复选框的状态
    if(e.target.name=='ckboxs'){
      // console.log(id);
      _this.goodsList.forEach(function(item) {
        if(item.id==id){
          item.checked=!item.checked
        }
          });
            _this.reversecheckFun()
        }
        //修改商品数量
        if(e.target.name=='+'){
            _this.goodsList.forEach(function(item) {
                if(item.id==id){
                    item.num++
                }
            });
        }
        if(e.target.name=='-'){
            _this.goodsList.forEach(function(item) {
                if(item.id==id){
                    if(item.num>1){
                        item.num--
                    }else{
                        return
                    }
                }
            });
        }
        //删除商品
        if(e.target.name=='del'){
            _this.goodsList.forEach(function(item,index){
                if(item.id==id){
                    _this.goodsList.splice(index,1)
                }
            })
        }
        _this.render()
        // console.log( _this.goodsList,' _this.goodsList'); 
    }
    //反选
    reversecheckFun(){
        let isAllChecked=true;
        if( _this.goodsList.length==0){
            isAllChecked=false;
        }else{
            _this.goodsList.forEach(function(item){
                if(!item.checked){
                    isAllChecked=false;
                }
            })
        }
       
        _this.selectAllNode.checked=isAllChecked

    }
    //全选
    selectAllFun(){
        // console.log(_this.selectAllNode.checked,'_this.selectAllNode.checked');
        let isCheked=_this.selectAllNode.checked;
        _this.goodsList.forEach(function(item){
            item.checked=isCheked
        })
        _this.render()
    }
    //清空数据
    clearFun(){
        _this.goodsList=[];
        _this.selectAllNode.checked=false;
        _this.render()
    }
    //计算商品数量和总价
    getCountAndPrice(){
        let count=0;
        let price=0;
        _this.goodsList.forEach(function(item){
            if(item.checked){
                count+=item.num;
                price+=item.num*item.price
            }
        })
        _this.countNode.innerHTML=count;
        _this.amountNode.innerHTML=price;
    }
    
}
new ShoppingCart();