将对象里的属性值写到标签里、显示赠品案例、购物车展示——JS进阶

嘻嘻哈哈二郎神

于 2023-02-28 15:13:57 发布

阅读量529

点赞数

分类专栏： javascript 练习实战练习文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_70320000/article/details/129232437

版权

javascript 同时被 3 个专栏收录

32 篇文章 1 订阅

订阅专栏

实战练习

11 篇文章 0 订阅

订阅专栏

练习

7 篇文章 0 订阅

订阅专栏

1. 将对象里的属性值写到标签里

2. 显示赠品案例

3. 购物车展示

1. 将对象里的属性值写到标签里

<body>
  <div></div>
  <script>
    const spec = { size: '40cm*40cm', color: '黑色' }
    //1. 所有的属性值回去过来  数组
    // console.log(Object.values(spec))
    // 2. 转换为字符串   数组join('/') 把数组根据分隔符转换为字符串
    // console.log(Object.values(spec).join('/'))
    document.querySelector('div').innerHTML = Object.values(spec).join('/') 
  </script>
</body>

2. 显示赠品案例

把字符串拆分为数组，然后利用 map 遍历数组，最后转换为字符串，追加到 p的innerHTML里

<body>
      <p class="name">
        <!-- <span class="tag"></span>
        <span class="tag"></span> -->
      </p>
  <script>
    const  gift = '50g茶叶,清洗球'
    // 1. 把字符串拆分为数组
    console.log(gift.split(','));
    // 根据数组进行遍历
    const str = gift.split(',').map(item => `<span class="tag">【赠品】${item}</span><br>`).join('')
    document.querySelector('.name').innerHTML = str 
  </script>
</body>

3. 购物车展示

根据后台提供的数据，渲染购物车页面

注意：在计算合计模块，reduce方法时第二个初始值要写 0 ，因为这是一个数组对象，如果不写得到的第一个 pre是对象。

结构和 js的代码：

<body>
  <div class="list">
    <!-- <div class="item">
      <img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="">
      <p class="name">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="tag">【赠品】10优惠券</span></p>
      <p class="spec">白色/10寸</p>
      <p class="price">289.90</p>
      <p class="count">x2</p>
      <p class="sub-total">579.80</p>
    </div> -->
  </div>
  <div class="total">
    <div>合计：<span class="amount">1000.00</span></div>
  </div>
  <script>
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: 289.9,
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
        count: 2,
        spec: { color: '白色' }
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: 109.8,
        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
        count: 3,
        spec: { size: '40cm*40cm', color: '黑色' }
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: 488,
        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
        count: 1,
        spec: { color: '青色', sum: '一大四小' }
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: 139,
        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
        count: 1,
        spec: { size: '小号', color: '紫色' },
        gift: '50g茶叶,清洗球'
      }
    ]
    // 1. 根据数据渲染页面
    document.querySelector('.list').innerHTML = goodsList.map( item => {
      // 对象解构
      const { name, price, picture, count, spec, gift } = item
      // 规格文字模块处理
      const text = Object.values(spec).join('/')
      // 处理赠品模块， 注意判断是否有 gift 属性，没有不需要渲染
      const str = gift ? gift.split(',').map( item => `<span class="tag">【赠品】${item}</span>`).join('') : ''
      // 计算小计模块， 单价 * 数量 保留两位小数,
      // 注意精度问题，涉及到小数计算时，经常转换为整数，得到结果然后再缩小
      const subTotal = ((price * 100 * count) / 100).toFixed(2)
      return `
      <div class="item">
        <img src="${picture}" alt="">
        <p class="name">${name}${str}</p>
        <p class="spec">${text}}</p>
        <p class="price">${price.toFixed(2)}</p>
        <p class="count">x${count}</p>
        <p class="sub-total">${subTotal}</p>
      </div>
      `
    }).join('')  //注意map 方法得到的是数组，要转换为字符串
   
    // 3.合计部分
    const total = goodsList.reduce( (pre, current) => (pre * 100 + (current.price * 100 * current.count)) / 100, 0)
    // console.log(total)
    document.querySelector('.amount').innerHTML = total.toFixed(2)
  </script>
</body>
</html>

样式的代码：

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .list {
      width: 990px;
      margin: 100px auto 0;
    }

    .item {
      padding: 15px;
      transition: all .5s;
      display: flex;
      border-top: 1px solid #e4e4e4;
    }

    .item:nth-child(4n) {
      margin-left: 0;
    }

    .item:hover {
      cursor: pointer;
      background-color: #f5f5f5;
    }

    .item img {
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }

    .item .name {
      font-size: 18px;
      margin-right: 10px;
      color: #333;
      flex: 2;
    }

    .item .name .tag {
      display: block;
      padding: 2px;
      font-size: 12px;
      color: #999;
    }

    .item .price,
    .item .sub-total {
      font-size: 18px;
      color: firebrick;
      flex: 1;
    }

    .item .price::before,
    .item .sub-total::before,
    .amount::before {
      content: "¥";
      font-size: 12px;
    }

    .item .spec {
      flex: 2;
      color: #888;
      font-size: 14px;
    }

    .item .count {
      flex: 1;
      color: #aaa;
    }

    .total {
      width: 990px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      border-top: 1px solid #e4e4e4;
      padding: 20px;
    }

    .total .amount {
      font-size: 18px;
      color: firebrick;
      font-weight: bold;
      margin-right: 50px;
    }
  </style>
</head>