使用jQuery检查当前时间是否落在时间范围（24小时）内

Question

这不是日期，而是时间。

不知道你怎么可能混淆两个

到目前为止我做了什么：

此刻，我可以确定当前时间是否在时间范围内，只要不是00:00（12AM）或更晚。

这是因为我当前的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

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

修改

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

编辑＃2： 我已经添加了一个检查开始和结束日期之间的关系来处理您在评论中提到的案例。我之前的回答是不完整的。

编辑＃3： 创建了一个比较函数。

这是您的代码段的更新版本：

＆＃13;

＆＃13;

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');
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;