使用javascript构建自定义时间选择器，并实现方块点击选择功能
本文介绍如何用JavaScript创建一个自定义时间选择器，用户可以通过点击小方块来选择时间。以下示例使用Vue 3框架，但核心概念同样适用于原生JavaScript。
实现步骤：
创建容器元素: 首先，创建一个容器元素来容纳时间选择器。
立即学习“Java免费学习笔记（深入）”；
循环渲染时间段: 使用循环（例如Vue的v-for指令）动态生成代表不同时间段的元素（例如，“08:00”、“09:00”等）。
嵌套元素显示上/下选择: 为每个时间段创建一个嵌套容器，并在其中使用循环显示“上”和“下”两个选择项。
ViiTor实时翻译
AI实时多语言翻译专家！强大的语音识别、AR翻译功能。
116 查看详情
添加点击事件: 为每个“上”和“下”选择项添加点击事件监听器。
处理点击事件: 在点击事件处理程序中，更新选择状态（例如，改变背景颜色或添加选中类名），并可选地执行其他操作，例如更新数据模型。 确保选择是互斥的，即同一时间段只能选择“上”或“下”其中一个。
示例代码 (Vue 3):
{{ item.time }} {{ option.name }} 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 }; },};.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;}效果图: (此处应插入与代码匹配的效果图，与原文效果图类似)
这个例子展示了如何使用Vue 3构建时间选择器。 你可以根据需要调整样式和功能。 核心思想是使用循环创建元素，并使用事件处理程序来管理选择状态。 原生JavaScript实现方式类似，只是需要手动操作DOM元素。 记得替换/uploads/20250224/174036416967bbd989b0c86.jpg 为实际图片链接。
以上就是如何用JavaScript创建自定义时间选择控件，并实现小方块点击选择功能？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/283543.html
微信扫一扫 
支付宝扫一扫 
