如何用JavaScript创建自定义时间选择控件，并实现小方块点击选择功能？

<code class="vue"><template>
  <div class="time-box">
    <div v-for="item in timeList" :key="item.time">
      <div>{{ item.time }}</div>
      <div v-for="option in item.options" :key="option.name"
           :class="{ selected: option.isSelected }"
           @click="select(item.time, 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></code>