实现一个vue js小算法 选择不同的时间段 不交叉

以上图片选择了时间段 现在需要判断 当前选择的时间段 不能够是 有交叉的所以现在需要循环判断

//判断时间段是否重叠交叉
export function areIntervalsNonOverlapping(intervals:any) {
  // 辅助函数:将时间字符串转换为从当天午夜开始计算的分钟数
  function convertToMinutes(timeString:any) {
    const [hours, minutes, seconds] = timeString.split(':').map(Number)
    return hours * 60 + minutes // 忽略秒数,如果需要更高精度可以加上 seconds
  }

  // 转换时间并排序
  const sortedIntervals = intervals
    .map(interval => ({
      ...interval,
      beginMinutes: convertToMinutes(interval.polishBeginTime),
      endMinutes: convertToMinutes(interval.polishEndTime),
    }))
    .sort((a, b) => a.beginMinutes - b.beginMinutes)

  // 检查重叠
  for (let i = 1; i < sortedIntervals.length; i++) {
    const current = sortedIntervals[i]
    const previous = sortedIntervals[i - 1]

    // 处理跨越午夜的情况
    if (
      current.beginMinutes < previous.endMinutes ||
      (current.beginMinutes === 0 && previous.endMinutes > 23 * 60)
    ) {
      return false // 重叠
    }
  }

  return true // 没有重叠
}

以上就是这个算法 

传入数组 就可以

我的数组格式 是 

[
{
//判断时间段是否重叠交叉
polishBeginTime:"01:00:00"
polishEndTime:"02:00:00"



}

]

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue实现点击时间获取时间段查询功能可以通过监听点击事件来实现。 首先,需要在Vue组件的data中定义一个变量,用来存储用户点击的开始时间和结束时间。例如:startTime和endTime。 然后,在模板中将时间段划分成多个小格子,可以使用v-for指令循环渲染,将每个小格子对应的时间绑定到一个点击事件上。 在点击事件的触发函数中,可以通过传入的参数获取用户点击的具体时间,将这个时间赋值给对应的变量。例如:通过点击事件获取到的时间赋值给startTime。 最后,在组件中可以使用计算属性或者方法来实现根据用户选择时间段进行查询操作。例如,在计算属性中定义一个查询结果的方法,通过传入的开始时间和结束时间作为参数进行查询,最后返回查询结果。 整个过程流程如下: 1. 在Vue组件的data中定义startTime和endTime变量。 2. 在模板中使用v-for指令循环渲染小格子,并将每个小格子对应的时间绑定到一个点击事件上。 3. 在点击事件的触发函数中,将点击的时间赋值给对应的变量。 4. 在计算属性或者方法中实现根据用户选择时间段进行查询操作,返回查询结果。 需要注意的是,根据实际需求,还需要考虑如何处理用户多次点击的情况,例如可以使用一个标志位来表示用户是否已经选择了开始时间和结束时间,以及如何处理开始时间大于结束时间的情况等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值