javascript - 使用 jQuery 检查当前时间是否在一个时间范围内(24 小时)

Question

这不是关于日期，而是关于时间。

不知道你怎么可能混淆这两者

到目前为止我做了什么:

目前，只要不是 00:00(凌晨 12 点)或更晚，我就可以判断当前时间是否在时间范围内。

这是因为我当前的 if 条件只看:

current time > startTime and current time < endTime

if (currentTime > startTime && currentTime < endTime) {
    green
} else {
    red
}

请查看我包含的代码片段以更好地理解问题。

var shiftStartWorking = '00:00',
  shiftEndWorking = '08:00',
  shiftStartNotWorking = '17:00',
  shiftEndNotWorking = '00:00';

$('#current').text(moment().format('HH:mm'));

if (moment().format("HH:mm") > shiftStartWorking && moment().format("HH:mm") < shiftEndWorking) {

  $('#working').attr('style', 'color: green');

} else {

  $('#working').attr('style', 'color: red');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

<div>Current Time: <span id="current"></span>
</div>

<br />

<div>
  <span>Working version</span> -
  <span id="working">00:00 - 08:00</span>
</div>

Answer 1

使用 moment，您可以比较 moment 对象而不是字符串。您可以使用 isBetween 检查当前时间是否在您的范围内功能。

编辑:

Moment 对象表示给定的日期(日期和时间)，无论如何解析我的代码片段中显示的字符串(仅传递时间值)会为当天创建一个 moment 对象。您可以使用这些对象进行比较，因为它们都指的是同一天(通过构造)。

编辑#2:我添加了对开始日期和结束日期之间关系的检查，以处理您在评论中提到的情况。我之前的回答不完整。

编辑#3:创建了一个函数来进行比较。

这里是您的代码段的更新版本:

function isNowBetweenTime(startTime, endTime){
  // Creating moment objects for the current day at the given time
  var startMom = moment(startTime, 'HH:mm');
  var endMom   = moment(endTime, 'HH:mm');
  
  if ( startMom.isAfter(endMom) ){
    endMom.add(1, 'd');
  }
  
  return moment().isBetween(startMom, endMom);
}

var shiftStartWorking = '16:00',
  shiftEndWorking = '23:00',
  shiftStartNotWorking = '17:00',
  shiftEndNotWorking ='00:00';

$('#current').text(moment().format('HH:mm'));

if( isNowBetweenTime(shiftStartWorking, shiftEndWorking) ) {
  $('#working').attr('style', 'color: green');
} else {
  $('#working').attr('style', 'color: red');
}

if( isNowBetweenTime(shiftStartNotWorking, shiftEndNotWorking) ){
  $('#notWorking').attr('style', 'color: green');
} else {
  $('#notWorking').attr('style', 'color: red');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

<div>Current Time: <span id="current"></span>
</div>

<br />

<div>
  <span>Working version</span> -
  <span id="working">16:00 - 23:00</span>
</div>

<br />

<div>
  <span>Non Working version</span> -
  <span id="notWorking">17:00 - 00:00</span>
</div>