文章
文章用户商城文档资讯沸点导航
!
也想出现在这里？ 联系我们吧
广告区块

【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例

【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例

本案例源码链接（非VIP可私聊获取）：https://download.csdn.net/download/weixin_52212950/86286910【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例https://download.csdn.net/download/weixin_52212950/86286910

文章导读：

这篇文章实现一个小案例：在购物平台选商品时我们经常会输价格区间，然后筛选出在这个区间内的商品，其实有JavaScript基础我们就已经能实现了，利用循环判断等知识。但是这篇文章是新方法 forEach，filter，some 的使用实现，可以让我们的实现更轻松。

【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例

文章目录：

一：效果展示

二：功能实现分析

2.1 页面渲染数据

2.2 根据价格区间查找

2.3 根据输入结果准确查找

三：完整代码

一：效果展示

页面基本效果

【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例

根据价格区间搜索

【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例

根据车辆名称搜索

【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例

二：功能实现分析

2.1 页面渲染数据

我们的数据存放格式为数组放对象，在写入大量数据后要将其渲染到页面的主表格中，我们可以使用 forEach 方法来实现，每次迭代都会执行一次基础的创建行，添加行的操作

实现过程：

  • 遍历开始，首先轮到的是数组第一个元素，即第一个车辆的数据，然后创建行tr，给行tr添加内容，内容中直接将车辆信息的编号id，名称name，价格price写入，然后再在tbody内加上创建好的行
  • 再轮到下一个车辆的数据，在创建行等操作，直到所有车辆信息全部添加进去结束
  1. car.forEach(function(value,index,arr){
  2.             var tr=document.createElement('tr');
  3.             tr.innerHTML=''+value.id+''+value.name+''+value.price+''
  4.             tbody.appendChild(tr)
  5.         })

2.2 根据价格区间查找

既然是筛选数据，那自然是选择我们的 filter 方法了，为了不让表格数据每次搜索完后上一次的数据还保留，所以每次点击后先清空右侧表格内的数据再去执行筛选。filter 返回的是一个新数组，所以需要一个新定义的数组去接收。筛选过后再使用 forEach 将新数组渲染到右侧的搜错结果表格即可

  1. select1.addEventListener('click',function(){
  2.             rtbody.innerHTML=''
  3.             var newcar=car.filter(function(value,index,arr){
  4.                 return value.price>=start.value&&value.pricevalue;
  5.             })
  6.             // console.log(newcar);
  7.             newcar.forEach(function(value,index,arr){
  8.                 var tr=document.createElement('tr');
  9.                 tr.innerHTML=''+value.name+'  :'+value.price+'万'+''
  10.                 rtbody.appendChild(tr)
  11.             })
  12.         })
    13. 

    

    2.3 根据输入结果准确查找
    

    

    在大批数据中要准确查找某个信息时，使用 some 方法比较合适，因为 some 一旦查找到就会停止遍历，数据量大时可以节省效率，很明显我们这个功能也要让其返回一个符合条件的新数组，但是some返回的结果是一个布尔值，所以此处我们需要自定义数组，然后去用 push 方法将复合查找要求的数据添加到新数组里，并且一旦查找到就让其 返回 ture 终止循环遍历
    

    

    1. select2.addEventListener('click',function(){
    2.         rtbody.innerHTML=''
    3.         newarr=[]
    4.         car.some(function(value,index,arr){
    5.             if(value.name==name1.value){
    6.                 newarr.push(value)
    7.                 return true;
    8.             }
    9.         })
    10.             newarr.forEach(function(value,index,arr){
    11.                 var tr=document.createElement('tr');
    12.                 tr.innerHTML=''+value.name+'  :'+value.price+'万'+''
    13.                 rtbody.appendChild(tr)
    14.             })
    15.     })
      16. 【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例
      

      

       三：完整代码
      

      1. DOCTYPE html>
      4.     
      5.     
      6.     
      7.     Document
      8.     
      9.         *{
      10.             margin: 0;
      11.             padding: 0;
      12.         }
      13.         .outbox{
      14.            position: absolute;
      15.             width: 1200px;
      16.             left: 50%;
      17.             top: 50%;
      18.             transform: translate(-50%,-50%);
      19.             border-top: 1px solid black;
      20.             border-left: 1px solid black;
      21.             border-right: 2.2px solid black;
      22.             border-bottom: 2.2px solid black;
      23.         }
      24.         .leftbox{
      25.             float: left;
      26.             width: 900px;
      27.             /* height: 600px; */
      28.             box-sizing: border-box;
      29.             border-top: 1.4px solid black;
      30.             border-left: 1.4px solid black;
      31.             border-right: 5px solid black;
      32.         }
      33.         .rightbox{
      34.             float: left;
      35.             width: 298px;
      36.             border-top: 1.5px solid black;
      37.         }
      38.         .top{
      39.             position: relative;
      40.             width: 898px;
      41.             height: 120px;
      42.             border-bottom: 1.4px solid black;
      43.             background-color: rgb(219, 219, 219);
      44.             box-sizing: border-box;
      45.         }
      46.         .bottom{
      47.             padding-top: 28px;
      48.             width: 898px;
      49.             padding-bottom: 28px;
      50.             background-color: rgb(244, 244, 244);
      51.         }
      52.         table{
      53.             margin: 0 auto;
      54.             width: 835px; 
      55.             border: 1.4px solid black;
      56.         }
      57.         thead tr{
      58.             width: 835px;
      59.             height: 40px;
      60.             border: 1.4px solid black;
      61.             background-color: rgb(208, 241, 255);
      62.         }
      63.         tbody tr{
      64.             width: 835px;
      65.             height: 50px;
      66.             border: 1.4px solid black;
      67.             background-color: rgb(255, 239, 239);
      68.         }
      69.         td{
      70.             width: 278px;
      71.             border: 1.4px solid black;
      72.             text-align: center;
      73.             font-weight: bold;
      74.             font-size: 17px;
      75.             letter-spacing: 3px;
      76.         }
      77.         .price{
      78.             position: absolute;
      79.             top: 22px;
      80.             left: 37px;
      81.             letter-spacing: 2px;
      82.             font-size: 18px;
      83.             font-weight: 500;
      84.         }
      85.         .start,.end{
      86.             padding-left: 6px;
      87.             width: 100px;
      88.             height: 30px;
      89.             outline: none;
      90.             font-size: 20px;
      91.         }
      92.         .pricebox{
      93.             position: absolute;
      94.             top: 19px;
      95.             left: 325px;
      96.             letter-spacing: 2px;
      97.             font-size: 18px;
      98.             font-weight: 800;
      99.         }
      100.         .select1{
      101.             position: absolute;
      102.             width: 170px;
      103.             height: 37px;
      104.             top: 17px;
      105.             right: 115px;
      106.             font-size: 14.5px;
      107.             letter-spacing: 2px;
      108.             background-color: rgb(255, 226, 154);
      109.  
      110.             border: 1px solid black;
      111.         }
      112.  
      113.         .name-p{
      114.             position: absolute;
      115.             bottom: 22px;
      116.             left: 94px;
      117.             letter-spacing: 2px;
      118.             font-size: 18px;
      119.             font-weight: 500;
      120.         }
      121.         .name{
      122.             position: absolute;
      123.             bottom: 16px;
      124.             left: 325px;
      125.             letter-spacing: 2px;
      126.             font-size: 18px;
      127.             width: 235px;
      128.             height: 30px;
      129.             outline: none;
      130.             padding-left: 6px;
      131.         }
      132.         .select2{
      133.             position: absolute;
      134.             width: 170px;
      135.             height: 37px;
      136.             bottom: 15px;
      137.             right: 115px;
      138.             font-size: 14.5px;
      139.             letter-spacing: 2px;
      140.             background-color: rgb(255, 226, 154);
      141.  
      142.             border: 1px solid black;
      143.         }
      144.         .select1:hover{
      145.             background-color: rgb(255, 210, 95);
      146.         }
      147.         .select2:hover{
      148.             background-color: rgb(255, 214, 110);
      149.         }
      150.         .rtable{
      151.             margin: 0 auto;
      152.             width: 240px;
      153.             margin-top: 40px;
      154.             margin-bottom: 40px;
      155.         }
      156.         .rthead .rtr{
      157.             width: 240px;
      158.             height: 40px;
      159.             border: 1.4px solid black;
      160.             background-color: rgb(208, 241, 255);
      161.         }
      162.         .rtbody .rtr{
      163.             width: 240px;
      164.             height: 40px;
      165.             border: 1.4px solid black;
      166.             background-color: rgb(255, 201, 114);
      167.         }
      168.         .rtd{
      169.             width: 240px;
      170.             border: 1.4px solid black;
      171.             text-align: center;
      172.             font-weight: bold;
      173.             font-size: 17px;
      174.             letter-spacing: 3px;
      175.         }
      176.         .righttd{
      177.             width: 240px;
      178.             border: 1.4px solid black;
      179.             text-align: center;
      180.             font-weight: bold;
      181.             font-size: 17px;
      182.             letter-spacing: 3px;
      183.             background-color: rgb(255, 234, 206);
      184.         }
      185.         .clear{
      186.             width: 85px;
      187.             height: 85px;
      188.             position: absolute;
      189.             top: 16px;
      190.             right: 13px;
      191.             border: 1px solid black;
      192.             font-weight: 400;
      193.             font-size: 15px;
      194.             background-color: #fff;
      195.         }
      196.         .clear:hover{
      197.             background-color: rgb(247, 247, 247);
      198.         }
      199.     
      202.     
      203.         
      204.             
      205.                 
      206.                
        您要查询的价格区间为(万元):
      207.                
      208.                     ~ 
      209.

  • 您要查询的车辆名称为:

    • 汽车编号汽车名称汽车售价(万元)
    • 查询结果
  • var car=[
  • {
  • 'id':1000001,
  • 'name':'奥迪A6 Avent',
  • 'price':46
  • },
  • {
  • 'id':1000002,
  • 'name':'奥迪A6 allroad',
  • 'price':52
  • },
  • {
  • 'id':1000003,
  • 'name':'奥迪RS6',
  • 'price':145
  • },{
  • 'id':1000004,
  • 'name':'奥迪RS7',
  • 'price':154
  • },
  • {
  • 'id':1000005,
  • 'name':'奥迪A7L',
  • 'price':82
  • },
  • {
  • 'id':1000006,
  • 'name':'GTR R32',
  • 'price':140
  • },
  • {
  • 'id':1000007,
  • 'name':'GTR R33',
  • 'price':101
  • },
  • {
  • 'id':1000008,
  • 'name':'GTR R34',
  • 'price':180
  • },
  • {
  • 'id':1000009,
  • 'name':'GTR R35',
  • 'price':160
  • }
  • ]
  • var tbody=document.querySelector('tbody');
  • var rtbody=document.querySelector('.rtbody');
  • var start=document.querySelector('.start');
  • var end=document.querySelector('.end');
  • var select1=document.querySelector('.select1');
  • var clear=document.querySelector('.clear');
  • var select2=document.querySelector('.select2');
  • var name1=document.querySelector('.name');
  • clear.addEventListener('click',function(){
  • window.location.reload()
  • })
  • car.forEach(function(value,index,arr){
  • var tr=document.createElement('tr');
  • tr.innerHTML=''+value.id+''+value.name+''+value.price+''
  • tbody.appendChild(tr)
  • })
  • select1.addEventListener('click',function(){
  • rtbody.innerHTML=''
  • var newcar=car.filter(function(value,index,arr){
  • return value.price>=start.value&&value.price
  • })
  • // console.log(newcar);
  • newcar.forEach(function(value,index,arr){
  • var tr=document.createElement('tr');
  • tr.innerHTML=''+value.name+' :'+value.price+'万'+''
  • rtbody.appendChild(tr)
  • })
  • })
  • select2.addEventListener('click',function(){
  • rtbody.innerHTML=''
  • newarr=[]
  • car.some(function(value,index,arr){
  • if(value.name==name1.value){
  • newarr.push(value)
  • return true;
  • }
  • })
  • newarr.forEach(function(value,index,arr){
  • var tr=document.createElement('tr');
  • tr.innerHTML=''+value.name+' :'+value.price+'万'+''
  • rtbody.appendChild(tr)
  • })
  • })
    • 【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例
    版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
    本文链接：https://blog.csdn.net/weixin_52212950/article/details/126139222
    声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
    0 条回复 A文章作者 M管理员
      暂无讨论，说说你的看法吧
    ❯
    个人中心
    购物车
    优惠劵
    有新私信 私信列表
    搜索

    • 扫码打开当前页

    返回顶部
    幸运之星正在降临...
    点击领取今天的签到奖励！
    恭喜！您今天获得了{{mission.data.mission.credit}}积分