css代码

    * {
      margin: 0;
      padding: 0;
    }

    button,
    input {
      /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
      font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
      /* 默认有灰色边框我们需要手动去掉 */
      /* border: 0; */
      /* 边框点击 蓝色外框效果去掉 */
      outline: none;
    }

    a {
      text-decoration: none;
      color: black;
    }

    tr,
    td,
    th {
      border-bottom: 1px dashed #666;
    }

    .container {
      width: 1200px;
      margin: 100px auto;
    }

    .container table {
      width: 100%;
      text-align: center;
    }

    .container tr {
      line-height: 40px;
    }

    .container tr .inp>input:nth-child(even) {
      width: 50px;
      text-align: center;
    }

    .container tr .inp>input:nth-child(odd) {
      width: 20px;
    }

    .container .total-price {
      text-align: right;
      padding-right: 40px;
    }

    .container .total-price span {
      color: red;
      font-size: 18px;
    }

html部分

<div class="container">
    <img src="image/dd_logo.jpg" alt="">
    <table>
      <tr>
        <th width='150px'>商品图片</th>
        <th width='150px'>商品信息</th>
        <th width='100px'>单价</th>
        <th width='100px'>数量</th>
        <th width='100px'>总价</th> <!-- 限定宽度 防止价格变化抖动 -->
        <th width='100px'>操作</th>
      </tr>

      <tr>
        <td>
          <img src='image/shoppingBg_03.jpg'>
        </td>
        <td>我和狗狗活下来了</td>
        <td>￥28.90</td>
        <td class="inp">
          <input type="button" value="-" name="minus" disabled /><input type="text" value="0" name="amount" /><input
            type="button" value="+" name="plus" />
        </td>
        <td class="all-price">￥0</td>
        <td>
          <a href="#">移入收藏</a> <br>
          <a class="delete" href="#">删除</a>
        </td>
      </tr>

      <tr>
        <td>
          <img src='image/shoppingBg_06.jpg'>
        </td>
        <td>灰霾来了怎么办</td>
        <td>￥16.69</td>
        <td class="inp">
          <input type="button" value="-" name="minus" disabled /><input type="text" value="0" name="amount" /><input
            type="button" value="+" name="plus" />
        </td>
        <td class="all-price">￥0</td>
        <td>
          <a href="#">移入收藏</a> <br>
          <a class="delete" href="#">删除</a>
        </td>
      </tr>
    </table>
    <div class="total-price">
      商品总价:<span>￥0</span>

js部分

    /*
        有加减button和数量输入框,
           点击减号按钮，对应数量输入框值减一，
           点击加号按钮，对应数量输入框值加一，
              1. 获取所有加按钮，循环给每个加按钮绑定点击事件
        */
    // 设置加号事件

    function onPlus() {
      var plusEles = document.querySelectorAll('input[name="plus"]')
      for (var i = 0; i < plusEles.length; i++) {
        //  点击加号的绑定事件
        plusEles[i].onclick = function () {
          //设置上一个兄弟元素节点的属性
          var amountEles = this.previousElementSibling //获取数量元素
          amountEles.value++
          //给加号消除禁用
          var minus = amountEles.previousElementSibling
          minus.removeAttribute('disabled')

          //计算价格

          // 1 获取单价
          var priceEle = this.parentElement.previousElementSibling //获取单价元素
          var price = priceEle.innerHTML //获取 单价元素里面的￥28.90 
          price = price.substring(1) //对索引为1的字符串开始进行截取，截取后仍然是字符串类型
          price = Number(price) //字符串转数值
          // console.log(price);

          //2. 获取数量
          //  var  amountEles = this.previousElementSibling  //       这句话可以不用写了，上面写了，如果上面没写 要写这句话、
          var num = amountEles.value //获取num=数量值
          // 3.计算总价
          var totalPrice = price * num
          totalPrice = totalPrice.toFixed(2)
          // console.log(totalPrice);  //调试用
          // 4.显示总价到对应位置 
          var totalPices = this.parentElement.nextElementSibling //获取单价栏元素 名字设为totalPices
          // totalPices.innerHTML = '￥'+totalPrice  // 字符串拼接 法一
          totalPices.innerHTML = `￥${totalPrice}` // 模板字符串拼接 法二

          // 计算商品总价

          var goodsTotalPrice = getSum() // 调用回调函数
          var goodsTotal = document.querySelector('.total-price span') //获取span价格模块

          goodsTotal.innerHTML = `￥${goodsTotalPrice}` //向span模块添加内容：调用函数的sum


        }

      }

    }

    onPlus()

    // 设置减号事件
    function onMinus() {
      var minusEles = document.querySelectorAll('input[name="minus"]')
      for (var i = 0; i < minusEles.length; i++) {
        //  点击减号的绑定事件
        minusEles[i].onclick = function () {
          //设置下一个兄弟元素节点的属性
          var amountEles = this.nextElementSibling
          amountEles.value--
          if (amountEles.value == 0) {
            this.setAttribute('disabled', true) //设置禁用
          }

          //计算价格

          // 1 获取单价
          var priceEle = this.parentElement.previousElementSibling //获取单价元素
          var price = priceEle.innerHTML //获取 单价元素里面的￥28.90 
          price = price.substring(1) //对索引为1的字符串开始进行截取，截取后仍然是字符串类型
          price = Number(price) //字符串转数值

          //2. 获取数量
          //  var  amountEles = this.nextElementSibling  //       这句话可以不用写了，上面写了，如果上面没写 要写这句话、
          var num = amountEles.value //获取num=数量值
          // 3.计算总价
          var totalPrice = price * num
          totalPrice = totalPrice.toFixed(2)
          // console.log(totalPrice);  //调试用
          // 4.显示总价到对应位置 
          var totalPices = this.parentElement.nextElementSibling //获取单价栏元素 名字设为totalPices
          // totalPices.innerHTML = '￥'+totalPrice  // 字符串拼接 法一
          totalPices.innerHTML = `￥${totalPrice}` // 模板字符串拼接 法二

          // 计算商品总价

          var goodsTotalPrice = getSum() // 调用回调函数
          var goodsTotal = document.querySelector('.total-price span') //获取span价格模块

          goodsTotal.innerHTML = `￥${goodsTotalPrice}` //向span模块添加内容：调用函数的sum
        }
      }

    }

    onMinus()


    /**
     * 计算所有商品总价
     */

    function getSum() {

      var sum = 0
      var goodsTotalPriceEle = document.querySelectorAll('.all-price') //获取每个商品的总价格 定义名字为goodsTotalPriceEle
      for (var i = 0; i < goodsTotalPriceEle.length; i++) {
        var price = goodsTotalPriceEle[i].innerHTML
        price = price.substring(1) //截取价格，截取后仍是字符串
        // price = Number(price) //字符串转数值
        sum += Number(price) //累加
      }
      return sum.toFixed(2) //回调函数
    }

    //删除
    var deleteEles = document.querySelectorAll('.delete') //获取deleteEles
    for (var i = 0; i < deleteEles.length; i++) {
      deleteEles[i].onclick = function () {
        this.parentElement.parentElement.remove() //删除tr  节点.remove()
      }
    }

 实现效果：

•  简介：当当网购物车1.0版本，实现简单的增减数量功能，计算单个商品总价和所有商品总价
• 使用的关键知识点：js部分：DOM节点，DOM动态操作节点，获取元素，操作元素绑定事件，this关键字