JS中根据日期搜索相应数据

首先把页面布局写好

<h1>学生成绩管理</h1>
  <p>
    选择日期：<select id="spaceTime" onchange="queryData(this, 'select')">
      <option value="">请选择</option>
      <option value="day">查询一天内数据</option>
      <option value="week">查询一周内数据</option>
      <option value="month">查询一月内数据</option>
    </select>
  </p>

  <p>
    起始日期：<input id="startDate" type="date"> 结束日期：<input id="endDate" type="date"> <button id="searchBtn"
      onclick="spaceSearch()">查询</button>
  </p>

  <table border="1" cellspacing="0" cellpadding="5" width="550">
    <thead>
      <tr>
        <th width="100">学号</th>
        <th>姓名</th>
        <th>得分</th>
        <th width="150">日期</th>
      </tr>
    </thead>
    <tbody id="tbody"></tbody>
  </table>

页面样式

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

    body {
      margin: 20px;
      font-size: 14px;
    }

    input,
    select,
    button {
      padding: 0;
      font-family: inherit;
      font-size: inherit;
      height: 28px;
      padding: 0 8px;
    }

    select,
    input {
      width: 160px;
    }

    table {
      border-collapse: collapse;
    }

    table th,
    table td {
      padding: 10px;
      border: 1px solid #999;
    }
  </style>

定义好数据源

	// 数据源
    var data = [
      { id: 1, name: '烧烤', score: 76, date: '2022-2-14' },
      { id: 2, name: '李四', score: 86, date: '2022-2-11' },
      { id: 3, name: '王五', score: 66, date: '2022-1-22' },
      { id: 4, name: '芜湖', score: 96, date: '2022-5-6' },
      { id: 5, name: '三口一头猪', score: 86, date: '2022-6-4' },
      { id: 6, name: '彭于晏', score: 56, date: '2022-7-5' },
      { id: 7, name: '胡歌', score: 86, date: '2022-9-10' },
      { id: 8, name: '泡芙', score: 66, date: '2022-7-28' },
      { id: 9, name: '火锅', score: 96, date: '2022-8-15' },
      { id: 10, name: '奶油', score: 86, date: '2022-8-26' },
    ]

下拉框选择日期查询函数

// 得到下拉列表框
    var selectBtn = document.querySelector('#spaceTime');
    // 一刷新页面就显示数据
    queryData();
    // 查询函数
    function queryData(select, searchType) {
      // 一天的毫秒数
      var dayTime = 1000 * 60 * 60 * 24;
      // 一周的毫秒数
      var weekTime = dayTime * 7;
      // 一个月的毫秒数
      var monthTime = dayTime * 30;
      // 得到下拉框选中的值，没有则为空
      var selectVal = select ? select.value : '';
      // 得到起始日期框
      var startDate = document.querySelector('#startDate');
      // 根据起始日期框，得到起始时间的时间戳（毫秒）
      // 减dayTime（一天的毫秒数）是因为包含当天
      var startDateTime = Date.parse(startDate.value) - dayTime;
      // 得到结束日期框
      var endDate = document.querySelector('#endDate');
      // 根据结束日期框，得到起始时间的时间戳（毫秒）
      var endDateTime = Date.parse(endDate.value);
      // 如果此次搜索是下拉列表框搜索，则初始化起始和结束日期框选中值为空
      if (searchType === 'select') {
        startDate.value = '';
        endDate.value = '';
      }
      // 使用数组filter筛选方法，过滤掉不想要的结果，得出想搜索的结果
      var result = data.filter((item) => {
        // 得到当前时间
        var now = Date.now();
        // 得到每个数据的时间戳
        var itemTime = Date.parse(item.date);
        // 得到当前时间与数据时间戳的间隔
        var timeSpace = now - itemTime;
        if (selectVal === 'day') {  // 一天内的数据
          return timeSpace > 0 && timeSpace < dayTime;
        } else if (selectVal === 'week') {  // 一周内的数据
          return timeSpace > 0 && timeSpace < weekTime;
        } else if (selectVal === 'month') {  // 一个月内的数据
          return timeSpace > 0 && timeSpace < monthTime;
        } else if (startDateTime > 0 && endDateTime > 0) {  // 根据起始与结束日期搜索数据
          return itemTime >= startDateTime && itemTime <= endDateTime;
        } else {  // 返回全部数据（页面刷新）
          return true;
        }
      })
      // 根据筛选的结构累加模板字符串
      var temp = result.reduce((t, d) => {
        return t + `
          <tr align="center">
            <td>${d.id}</td>
            <td>${d.name}</td>
            <td>${d.score}</td>
            <td>${d.date}</td>
          </tr>
        `;
      }, '') || `<tr align="center"><td colspan="4=999">暂无数据！</td></tr>`;
      // 将模板字符串渲染到页面中
      document.querySelector('#tbody').innerHTML = temp;
    }

根据起始和结束日期查询函数

// 点击查询按钮，调用对应查询方法
    function spaceSearch() {
      // 首先让下拉列表框选中第一个
      selectBtn.selectedIndex = 0;
      // 进行查询
      queryData();
    }