HTML+CSS+JavaScript:两种方法实现商品价格筛选效果

这篇具有很好参考价值的文章主要介绍了HTML+CSS+JavaScript:两种方法实现商品价格筛选效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、需求

鼠标点击上方菜单栏中不同的价格区间,自动筛选出价格符合条件的商品,并渲染在页面中

HTML+CSS+JavaScript:两种方法实现商品价格筛选效果,html,css,javascript

 

二、代码素材

以下是缺失JS部分的代码,感兴趣的小伙伴可以先自己试着写一写

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品渲染</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .list {
      width: 990px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      width: 240px;
      margin-left: 10px;
      padding: 20px 30px;
      transition: all .5s;
      margin-bottom: 20px;
    }

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

    .item:hover {
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -4px, 0);
      cursor: pointer;
    }

    .item img {
      width: 100%;
    }

    .item .name {
      font-size: 18px;
      margin-bottom: 10px;
      color: #666;
    }

    .item .price {
      font-size: 22px;
      color: firebrick;
    }

    .item .price::before {
      content: "¥";
      font-size: 14px;
    }

    .filter {
      display: flex;
      width: 990px;
      margin: 0 auto;
      padding: 50px 30px;
    }

    .filter a {
      padding: 10px 20px;
      background: #f5f5f5;
      color: #666;
      text-decoration: none;
      margin-right: 20px;
    }

    .filter a:active,
    .filter a:focus {
      background: #05943c;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="filter">
    <a data-index="1" href="javascript:;">0-100元</a>
    <a data-index="2" href="javascript:;">100-300元</a>
    <a data-index="3" href="javascript:;">300元以上</a>
    <a href="javascript:;">全部区间</a>
  </div>
  <div class="list">
    <!-- <div class="item">
      <img src="" alt="">
      <p class="name"></p>
      <p class="price"></p>
    </div> -->
  </div>
  <script>
    // .filter a:active 是一个 CSS 选择器,用于选择处于活动状态的 <a> 元素,通常是用户正在点击或按住鼠标按钮时的状态。
    // 当用户点击或按住鼠标按钮时,a:active 选择器会应用到 <a> 元素上,从而可以通过 CSS 来改变其样式或进行其他操作。
    // 以下是一个示例:
    // <style>
    //   .filter a:active {
    //     color: red;
    //     font-weight: bold;
    //   }
    // </style>
    // <div class="filter">
    //   <a href="#">Link 1</a>
    //   <a href="#">Link 2</a>
    //   <a href="#">Link 3</a>
    // </div>
    // 在上述示例中,当用户点击这些链接时,活动状态的链接(<a> 元素)的文本颜色将变为红色,并加粗显示。
    // 2. 初始化数据
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      {
        id: '4001594',
        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
        price: '288.00',
        picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: '100.00',
        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: '488.00',
        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
      },
      {
        id: '3997185',
        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
        price: '108.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
      },
      {
        id: '3997403',
        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
        price: '99.00',
        picture: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',
      },
      {
        id: '3998274',
        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',
      },
    ]

    
  </script>
</body>

</html>

三、算法思路

1、封装渲染函数,传入的参数为数组对象,将数组中的每一个对象进行数据处理,再渲染到页面中

2、利用事件委托为上方tab栏注册点击事件,利用事件对象判断鼠标点击的是哪个价格区间,再在数组中筛选出价格在该区间内的商品,并返回一个新的数组对象

3、将新的数组对象作为参数传入渲染函数并调用文章来源地址https://www.toymoban.com/news/detail-625707.html

四、法一:数组map方法和数组join方法

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品渲染</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .list {
      width: 990px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      width: 240px;
      margin-left: 10px;
      padding: 20px 30px;
      transition: all .5s;
      margin-bottom: 20px;
    }

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

    .item:hover {
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -4px, 0);
      cursor: pointer;
    }

    .item img {
      width: 100%;
    }

    .item .name {
      font-size: 18px;
      margin-bottom: 10px;
      color: #666;
    }

    .item .price {
      font-size: 22px;
      color: firebrick;
    }

    .item .price::before {
      content: "¥";
      font-size: 14px;
    }

    .filter {
      display: flex;
      width: 990px;
      margin: 0 auto;
      padding: 50px 30px;
    }

    .filter a {
      padding: 10px 20px;
      background: #f5f5f5;
      color: #666;
      text-decoration: none;
      margin-right: 20px;
    }

    .filter a:active,
    .filter a:focus {
      background: #05943c;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="filter">
    <a data-index="1" href="javascript:;">0-100元</a>
    <a data-index="2" href="javascript:;">100-300元</a>
    <a data-index="3" href="javascript:;">300元以上</a>
    <a href="javascript:;">全部区间</a>
  </div>
  <div class="list">
    <!-- <div class="item">
      <img src="" alt="">
      <p class="name"></p>
      <p class="price"></p>
    </div> -->
  </div>
  <script>
    // .filter a:active 是一个 CSS 选择器,用于选择处于活动状态的 <a> 元素,通常是用户正在点击或按住鼠标按钮时的状态。
    // 当用户点击或按住鼠标按钮时,a:active 选择器会应用到 <a> 元素上,从而可以通过 CSS 来改变其样式或进行其他操作。
    // 以下是一个示例:
    // <style>
    //   .filter a:active {
    //     color: red;
    //     font-weight: bold;
    //   }
    // </style>
    // <div class="filter">
    //   <a href="#">Link 1</a>
    //   <a href="#">Link 2</a>
    //   <a href="#">Link 3</a>
    // </div>
    // 在上述示例中,当用户点击这些链接时,活动状态的链接(<a> 元素)的文本颜色将变为红色,并加粗显示。
    // 2. 初始化数据
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      {
        id: '4001594',
        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
        price: '288.00',
        picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: '100.00',
        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: '488.00',
        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
      },
      {
        id: '3997185',
        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
        price: '108.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
      },
      {
        id: '3997403',
        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
        price: '99.00',
        picture: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',
      },
      {
        id: '3998274',
        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',
      },
    ]

    render(goodsList)

    const filter = document.querySelector('.filter')
    filter.addEventListener('click', e => {
      const { tagName, dataset } = e.target
      let arr = goodsList
      if (tagName === 'A') {
        switch (dataset.index) {
          case '1':
            arr = arr.filter(item => item.price > 0 && item.price <= 100)
            break
          case '2':
            arr = arr.filter(item => item.price >= 100 && item.price <= 300)
            break
          case '3':
            arr = arr.filter(item => item.price >= 300)
            break
        }
        render(arr)
      }
    })

    function render(arr) {
      document.querySelector('.list').innerHTML = arr.map(item => {
        const { name, price, picture } = item
        return `
        <div class="item">
          <img src="${picture}" alt="">
          <p class="name">${name}</p>
          <p class="price">${price}</p>
        </div>
        `
      }).join('')
    }

  </script>
</body>

</html>

五、法二:数组forEach方法

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品渲染</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .list {
      width: 990px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      width: 240px;
      margin-left: 10px;
      padding: 20px 30px;
      transition: all .5s;
      margin-bottom: 20px;
    }

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

    .item:hover {
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -4px, 0);
      cursor: pointer;
    }

    .item img {
      width: 100%;
    }

    .item .name {
      font-size: 18px;
      margin-bottom: 10px;
      color: #666;
    }

    .item .price {
      font-size: 22px;
      color: firebrick;
    }

    .item .price::before {
      content: "¥";
      font-size: 14px;
    }

    .filter {
      display: flex;
      width: 990px;
      margin: 0 auto;
      padding: 50px 30px;
    }

    .filter a {
      padding: 10px 20px;
      background: #f5f5f5;
      color: #666;
      text-decoration: none;
      margin-right: 20px;
    }

    .filter a:active,
    .filter a:focus {
      background: #05943c;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="filter">
    <a data-index="1" href="javascript:;">0-100元</a>
    <a data-index="2" href="javascript:;">100-300元</a>
    <a data-index="3" href="javascript:;">300元以上</a>
    <a href="javascript:;">全部区间</a>
  </div>
  <div class="list">
    <!-- <div class="item">
      <img src="" alt="">
      <p class="name"></p>
      <p class="price"></p>
    </div> -->
  </div>
  <script>
    // .filter a:active 是一个 CSS 选择器,用于选择处于活动状态的 <a> 元素,通常是用户正在点击或按住鼠标按钮时的状态。
    // 当用户点击或按住鼠标按钮时,a:active 选择器会应用到 <a> 元素上,从而可以通过 CSS 来改变其样式或进行其他操作。
    // 以下是一个示例:
    // <style>
    //   .filter a:active {
    //     color: red;
    //     font-weight: bold;
    //   }
    // </style>
    // <div class="filter">
    //   <a href="#">Link 1</a>
    //   <a href="#">Link 2</a>
    //   <a href="#">Link 3</a>
    // </div>
    // 在上述示例中,当用户点击这些链接时,活动状态的链接(<a> 元素)的文本颜色将变为红色,并加粗显示。
    // 2. 初始化数据
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      {
        id: '4001594',
        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
        price: '288.00',
        picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: '100.00',
        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: '488.00',
        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
      },
      {
        id: '3997185',
        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
        price: '108.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
      },
      {
        id: '3997403',
        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
        price: '99.00',
        picture: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',
      },
      {
        id: '3998274',
        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',
      },
    ]

   
    render(goodsList)

    const filter = document.querySelector('.filter')
    filter.addEventListener('click', e => {
      const { tagName, dataset } = e.target
      if (tagName === 'A') {
        let arr = goodsList
        switch(dataset.index){
          case '1':
          arr = goodsList.filter(item => item.price > 0 && item.price <= 100)
          break
          case '2':
          arr = goodsList.filter(item => item.price >= 100 && item.price <= 300)
          break
          case '3':
          arr = goodsList.filter(item => item.price >= 300)
          break
        }
        render(arr)
      }
    })

    function render(arr) {
      let str = ''
      arr.forEach(item => {
        const { name, price, picture } = item
        str += `
        <div class="item">
          <img src="${picture}" alt="">
          <p class="name">${name}</p>
          <p class="price">${price}</p>
        </div>
        `
      })
      const list = document.querySelector('.list')
      list.innerHTML = str
    }

  </script>
</body>

</html>

到了这里,关于HTML+CSS+JavaScript:两种方法实现商品价格筛选效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 淘宝APP商品详情接口(商品信息,价格销量,优惠券信息,详情图等)

    淘宝APP商品详情接口(商品信息接口,价格销量接口,优惠券信息接口,详情图接口等)代码对接如下: 公共参数 名称 类型 必须 描述 key String 是 调用key(必须以GET方式拼接在URL中),点击获取请key和secret secret String 是 调用密钥 api_name String 是 API接口名称(包括在请求地址

    2024年02月12日
    浏览(47)
  • 淘宝商品API使用示例:如何通过调用外部API来获取淘宝商品价格销量主图详情数据

    淘宝上的商品信息量非常之大,商品的详情信息也很齐全。如何通过调用外部API来实现批量获取商品价格销量主图详情等信息呢?上周刚好完成了一个完整的淘宝商品采集项目,今天特来分享一下。 接口名称:item_get 请求地址:https://api-test.cn/taobao/item_get result_type:[json,jso

    2024年02月10日
    浏览(45)
  • 如何用Python爬虫持续监控商品价格

    目录 持续监控商品价格步骤 1. 选择合适的爬虫库: 2. 选择目标网站: 3. 编写爬虫代码: 4. 设定监控频率: 5. 存储和展示数据: 6. 设置报警机制: 7. 异常处理和稳定性考虑: 可能会遇到的问题 1. 网站反爬虫机制: 2. 页面结构变化: 3. 数据采集速度: 4. 数据存储和处理:

    2024年02月10日
    浏览(41)
  • PHP编程实践:实际商品价格数据采集

    在电子商务领域,对商品价格进行数据采集和对比是一项常见的需求。本文将介绍如何使用PHP编程语言实现对1688和淘宝商品价格数据的采集和对比,帮助读者了解实际的编程实践过程。 数据采集是指从互联网上获取数据的过程,其原理是通过网络请求获取网页内容,然后从

    2024年01月20日
    浏览(45)
  • 获取主流电商平台商品价格,库存信息,数据分析,SKU详情

    要接入API接口以采集电商平台上的商品数据,可以按照以下步骤进行: 1、找到可用的API接口:首先,需要找到支持查询商品信息的API接口。这些信息通常可以在电商平台的官方文档或开发者门户网站上找到。 2、注册并获取API密钥:在使用API接口之前,需要注册并获取API密钥

    2024年01月19日
    浏览(53)
  • leetcode1475. 商品折扣后的最终价格 【单调栈】

    简单题 第一次错误做法 运行结果: 错误分析:入栈的是元素,如果之后出现相等的元素,则会覆盖哈希表中的值。 正确思路: 修改入栈元素为下标之后: for遍历数组元素写法:  为什么运行时间变长了?

    2024年02月11日
    浏览(39)
  • HTML+CSS+JavaScript实现网络购物车

    1 页面布局 购物车由一个table标签和一个div标签构成。案例在Chrome浏览器运行效果,如图所示。 table标签共有5行6列,第1行是表头,第2-5行的每一行都代表一个商品,依次用td标签存放商品的勾选框、商品缩略图及名称、商品单价、商品增减操作按钮以及小计、删除按钮等。

    2024年02月05日
    浏览(45)
  • 【HTML+CSS+JavaScript】实现鼠标点击烟花效果

    本文主要讲解三种烟花效果(爆炸型、心型、圆形),文章末尾附有完整的代码和图片获取链接。 效果图(一) - 心型 : 效果图(二) - 圆型 : 效果图(三) - 爆炸型 : (1) HTML部分代码 (2) CSS部分代码 (3) 内部的JavaScript部分代码 (1) HTML部分代码 (2) CSS部分代码 (3) 内部的JavaScript部分

    2024年02月01日
    浏览(86)
  • 前端:运用HTML+CSS+JavaScript实现拼图游戏

    前一段时间突然来了一个想法,就是运用前端知识实现一个拼图游戏,但是不知道具体怎样实现。今天,想到既然实现不了现实中我们看到的那种拼块,那么就用正方形来代替吧! 效果如下: 想到就是当小的图片块放到合适的位置上时,表示拼图完成。 1. 前端布局 运用cs

    2024年02月08日
    浏览(55)
  • Leetcode算法解析——查找总价格为目标值的两个商品

    商品价格按照升序记录于数组 price 。请在购物车中找到两个商品的价格总和刚好是 target 。若存在多种情况,返回任一结果即可。 示例 1: 示例 2: 提示: 1 = price.length = 10^5 1 = price[i] = 10^6 1 = target = 2*10^6 用两层循环把所有的可能性都列举出来,然后判断是否有等目标值的两

    2024年02月07日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包