JS自定义时间选择控件：方块点击

本文将详细介绍如何使用JavaScript创建自定义时间选择控件，并实现点击小方块选择时间的功能。 教程基于Vue 3框架，但核心原理同样适用于原生JavaScript开发。 通过循环渲染时间段，并为每个时间段创建“上”和“下”两个选择项，用户可以点击小方块进行选择。 文中提供完整的代码示例及样式，并详细讲解了点击事件的处理逻辑，确保同一时间段只能选择一个选项。 学习本教程，您可以轻松掌握自定义时间选择器的开发技巧，提升用户交互体验。 (关键词：JavaScript, 自定义时间选择器, 时间控件, Vue 3, 小方块选择, 前端开发)

使用JavaScript构建自定义时间选择器，并实现方块点击选择功能

本文介绍如何用JavaScript创建一个自定义时间选择器，用户可以通过点击小方块来选择时间。以下示例使用Vue 3框架，但核心概念同样适用于原生JavaScript。

实现步骤：

1. 创建容器元素: 首先，创建一个容器元素来容纳时间选择器。

2. 循环渲染时间段: 使用循环（例如Vue的v-for指令）动态生成代表不同时间段的元素（例如，“08:00”、“09:00”等）。

3. 嵌套元素显示上/下选择: 为每个时间段创建一个嵌套容器，并在其中使用循环显示“上”和“下”两个选择项。

4. 添加点击事件: 为每个“上”和“下”选择项添加点击事件监听器。

5. 处理点击事件: 在点击事件处理程序中，更新选择状态（例如，改变背景颜色或添加选中类名），并可选地执行其他操作，例如更新数据模型。 确保选择是互斥的，即同一时间段只能选择“上”或“下”其中一个。

示例代码 (Vue 3):

      <div>{{ item.time }}</div>
      <div v-for="option in item.options" :key="option.name" :class="{ selected: option.isSelected }" option.name>
        {{ option.name }}
      </div>
    </div>
  </div>
</template><script>
import { ref } from 'vue';

export default {
  setup() {
    const timeList = ref([
      { time: '08:00', options: [{ name: '上', isSelected: false }, { name: '下', isSelected: false }] },
      { time: '09:00', options: [{ name: '上', isSelected: false }, { name: '下', isSelected: false }] },
      { time: '10:00', options: [{ name: '上', isSelected: false }, { name: '下', isSelected: false }] },
      { time: '11:00', options: [{ name: '上', isSelected: false }, { name: '下', isSelected: false }] },
    ]);

    const select = (time, name) => {
      // 重置所有选择
      timeList.value.forEach(item => {
        item.options.forEach(option => option.isSelected = false);
      });
      // 设置新的选择
      const item = timeList.value.find(item => item.time === time);
      item.options.find(option => option.name === name).isSelected = true;
    };

    return { timeList, select };
  },
};
</script><style scoped>
.time-box {
  display: flex;
  text-align: center;
}
.time-box > div {
  margin-right: 10px;
}
.time-box div div {
  width: 50px;
  height: 50px;
  background-color: aqua;
  margin-top: 10px;
  line-height: 50px;
  cursor: pointer;
  border: 1px solid #ccc; /* Added border for better visual clarity */
}
.time-box div.selected {
  background-color: red;
}
</style>

效果图: (此处应插入与代码匹配的效果图，与原文效果图类似)

这个例子展示了如何使用Vue 3构建时间选择器。 你可以根据需要调整样式和功能。 核心思想是使用循环创建元素，并使用事件处理程序来管理选择状态。 原生JavaScript实现方式类似，只是需要手动操作DOM元素。 记得替换/uploads/20250224/174036416967bbd989b0c86.jpg 为实际图片链接。

本篇关于《JS自定义时间选择控件：方块点击》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！