javascript - js怎么实现这种时间控件?

Question

有哪位大佬做过这种的时间控件吗，点击小方块进行时间的选择。js怎么实现

Answer 1

<template>    <div class="view-data">当前已选时间: <span>{{ selected }}</span></div>    <div class="scene--container">        <template v-for="item in table">            <button class="tap-button" @click.stop="onSetTime(item.value)">{{ item.label }}</button>        </template>    </div></template>

<script setup>    import { ref, reactive, computed } from 'vue'    const selected = ref('')    const state = reactive({ start: 8, end: 24 })    const table = computed(() => {        const cxt = []        for (let index = state.start; index < state.end; index += 1) {            const minute = index * 60 * 60            cxt.push({ label: `${index}:00`, value: minute })            cxt.push({ label: `${index}:30`, value: minute + 30 * 60 })        }        return cxt    })    function onSetTime(value) {        const currentZero = new Date(new Date().toLocaleDateString()).getTime() + value * 1000        const timeDate = new Date(currentZero)        console.log('currentZero', currentZero, value)        console.log('dt.getHours()', timeDate.getHours(), timeDate.getMinutes())        selected.value = timeDate.getHours() + ':' + timeDate.getMinutes()    }</script>

.scene--container {    width: 600px;    line-height: 0;    font-size: 0;}.tap-button {    width: 60px;    height: 60px; font-size: 18px;}

Answer 2

Vue3手写了一个, 目前是互斥的:

<template>  <div class="time-box">    <div      v-for="item in timeList"      :key="item.time"    >      <div>        <div>{{ item.time }}</div>        <div          class="item-sele"          v-for="val in item.sselect"          @click="select(item.time, val.name)"          :style="            val.isSelected              ? 'background-color: red;'              : 'background-color: aqua;'          "        >          {{ val.name }}        </div>      </div>    </div>  </div></template><script setup lang="ts">import { reactive } from 'vue';const timeList = reactive([  {    time: '08:00',    sselect: [      { name: '上', isSelected: false },      { name: '下', isSelected: false },    ],  },  {    time: '09:00',    sselect: [      { name: '上', isSelected: false },      { name: '下', isSelected: false },    ],  },  {    time: '10:00',    sselect: [      { name: '上', isSelected: false },      { name: '下', isSelected: false },    ],  },  {    time: '11:00',    sselect: [      { name: '上', isSelected: false },      { name: '下', isSelected: false },    ],  },]);function select(time: string, name: string) {  // 重置状态, 互斥用  timeList.forEach(element => {    element.sselect.forEach(val => {      val.isSelected = false    });  });  timeList.forEach(element => {    if (element.time === time) {      element.sselect.forEach(val => {        if (val.name === name) val.isSelected = !val.isSelected;      });    }  });}</script><style scoped>.time-box {  text-align: center;  display: flex;  & > div {    margin-right: 10px;  }  .item-sele {    width: 50px;    height: 50px;    background-color: aqua;    margin-top: 10px;    line-height: 50px;    cursor: pointer;  }}</style>