前端1

Emma歌小白
102 阅读4分钟

HTML 结构

HTML部分定义了页面的结构，包括按钮和下拉选择框：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按钮筛选器示例</title>
</head>
<body>

<div class="filter" id="salesFilter">
  <button id="salesAmountBtn" class="active">销额</button>
  <button id="salesVolumeBtn">销量</button>
</div>

<div class="filter" id="channelFilter" style="top: 155px;">
  <button id="onlineBtn" class="active">线上</button>
  <button id="offlineBtn">线下</button>
</div>

<div class="filter" id="dateFilter" style="top: 205px;">
  <select id="yearSelect">
    <option value="">选择年份</option>
  </select>
  <select id="periodSelect" disabled>
    <option value="">选择季度/月份/周</option>
  </select>
  <select id="dateSelect" disabled>
    <option value="">选择具体日期</option>
  </select>
</div>

</body>
</html>
  • <div class="filter" id="salesFilter">：包含两个按钮，“销额”和“销量”，用于筛选销售类型。
  • <div class="filter" id="channelFilter" style="top: 155px;">：包含两个按钮，“线上”和“线下”，用于筛选销售渠道。
  • <div class="filter" id="dateFilter" style="top: 205px;">：包含三个下拉选择框，分别用于选择年份、季度/月份/周、具体日期。

CSS 样式

CSS部分定义了按钮和下拉选择框的样式：

.filter {
  position: absolute;
  top: 105px;
  left: 128px;
  width: 263px;
  height: 40px;
  display: flex;
  justify-content: space-around; /* 修改此处 */
  align-items: center;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
}

#channelFilter {
  top: 155px; /* 设置新的按钮组的位置 */
}

#dateFilter {
  top: 205px; /* 设置日期筛选器的位置 */
  height: auto;
  flex-direction: column;
}

.filter button {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

.filter button.active {
  background-color: #007bff;
  color: white;
  border-radius: 3px;
}

.filter select {
  margin-top: 5px;
  padding: 5px;
  font-size: 14px;
}
  • .filter：定义了筛选器的基本样式，包括位置、大小、背景颜色、边框和内边距。
  • #channelFilter 和 #dateFilter：调整不同筛选器的垂直位置。
  • .filter button：定义了按钮的样式，包括内边距、字体大小、光标样式、边框和背景颜色。
  • .filter button.active：定义了选中状态下按钮的样式，包括背景颜色、文字颜色和边框半径。
  • .filter select：定义了下拉选择框的样式，包括上边距、内边距和字体大小。

JavaScript 逻辑

JavaScript部分处理按钮点击和下拉选择框变化的逻辑：

const salesAmountBtn = document.getElementById('salesAmountBtn');
const salesVolumeBtn = document.getElementById('salesVolumeBtn');
const onlineBtn = document.getElementById('onlineBtn');
const offlineBtn = document.getElementById('offlineBtn');
const yearSelect = document.getElementById('yearSelect');
const periodSelect = document.getElementById('periodSelect');
const dateSelect = document.getElementById('dateSelect');

// Initialize years
const years = [2021, 2022, 2023, 2024];
years.forEach(year => {
  const option = document.createElement('option');
  option.value = year;
  option.textContent = year;
  yearSelect.appendChild(option);
});

yearSelect.addEventListener('change', function() {
  const selectedYear = yearSelect.value;
  periodSelect.innerHTML = '<option value="">选择季度/月份/周</option>';
  dateSelect.innerHTML = '<option value="">选择具体日期</option>';
  dateSelect.disabled = true;

  if (selectedYear) {
    periodSelect.disabled = false;
    const quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
    quarters.forEach(quarter => {
      const option = document.createElement('option');
      option.value = `${selectedYear}${quarter}`;
      option.textContent = `${selectedYear}${quarter}`;
      periodSelect.appendChild(option);
    });
  } else {
    periodSelect.disabled = true;
  }
});

periodSelect.addEventListener('change', function() {
  const selectedPeriod = periodSelect.value;
  dateSelect.innerHTML = '<option value="">选择具体日期</option>';

  if (selectedPeriod) {
    dateSelect.disabled = false;
    const dates = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
    dates.forEach(date => {
      const option = document.createElement('option');
      option.value = `${selectedPeriod}-${date}`;
      option.textContent = `${selectedPeriod}-${date}`;
      dateSelect.appendChild(option);
    });
  } else {
    dateSelect.disabled = true;
  }
});

salesAmountBtn.addEventListener('click', function() {
  salesAmountBtn.classList.add('active');
  salesVolumeBtn.classList.remove('active');
  // TODO: Filter data by sales amount
  console.log('Filter by sales amount');
});

salesVolumeBtn.addEventListener('click', function() {
  salesVolumeBtn.classList.add('active');
  salesAmountBtn.classList.remove('active');
  // TODO: Filter data by sales volume
  console.log('Filter by sales volume');
});

onlineBtn.addEventListener('click', function() {
  onlineBtn.classList.add('active');
  offlineBtn.classList.remove('active');
  // TODO: Filter data by online channel
  console.log('Filter by online channel');
});

offlineBtn.addEventListener('click', function() {
  offlineBtn.classList.add('active');
  onlineBtn.classList.remove('active');
  // TODO: Filter data by offline channel
  console.log('Filter by offline channel');
});

详细解释

  1. 初始化年份选项：

    • const years = [2021, 2022, 2023, 2024];：定义了可选的年份。
    • years.forEach(year => { ... });：遍历年份数组，为每个年份创建一个选项，并将其添加到年份下拉选择框中。

  2. 年份选择框的事件监听器：

    • yearSelect.addEventListener('change', function() { ... });：当用户选择年份时触发此事件。
    • const selectedYear = yearSelect.value;：获取选中的年份。
    • periodSelect.innerHTML = '<option value="">选择季度/月份/周</option>';：重置季度/月份/周选择框的选项。
    • dateSelect.innerHTML = '<option value="">选择具体日期</option>';：重置具体日期选择框的选项。
    • if (selectedYear) { ... } else { periodSelect.disabled = true; }：根据是否选中年份，启用或禁用季度/月份/周选择框。
    • const quarters = ['Q1', 'Q2', 'Q3', 'Q4'];：定义季度选项。
    • quarters.forEach(quarter => { ... });：遍历季度数组，为每个季度创建一个选项，并将其添加到季度/月份/周选择框中。

  3. 季度/月份/周选择框的事件监听器：

    • periodSelect.addEventListener('change', function() { ... });：当用户选择季度/月份/周时触发此事件。
    • const selectedPeriod = periodSelect.value;：获取选中的季度/月份/周。
    • dateSelect.innerHTML = '<option value="">选择具体日期</option>';：重置具体日期选择框的选项。
    • if (selectedPeriod) { ... } else { dateSelect.disabled = true; }：根据是否选中季度/月份/周，启用或禁用具体日期选择框。
    • const dates = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];：定义日期选项。
    • dates.forEach(date => { ... });：遍历日期数组，为每个日期创建一个选项

，并将其添加到具体日期选择框中。

  1. 按钮点击事件监听器：
    • salesAmountBtn.addEventListener('click', function() { ... });：当用户点击“销额”按钮时触发此事件。
    • salesAmountBtn.classList.add('active');：将“销额”按钮设置为选中状态。
    • salesVolumeBtn.classList.remove('active');：将“销量”按钮设置为未选中状态。
    • console.log('Filter by sales amount');：输出“Filter by sales amount”到控制台（在实际应用中，这里会执行筛选逻辑）。
    其他按钮（“销量”、“线上”、“线下”）的事件监听器逻辑与此类似。

总结

  • HTML：定义了页面的基本结构，包括按钮和下拉选择框。
  • CSS：定义了按钮和下拉选择框的样式，使其看起来整齐美观。
  • JavaScript：处理按钮的点击事件和下拉选择框的变化事件，根据用户的选择更新界面和数据。

通过这些代码，你可以创建一个带有多个筛选条件的页面，用户可以根据不同的条件筛选数据。希望这些解释能帮助你更好地理解代码的逻辑和功能！

avatar
文章
阅读
粉丝