Question

我已经为示例修改了此代码，因此日期和时间当前没有自行更新。基本解释是：有一个计数器跟踪当前时间并每秒刷新一次，将其推送到DOM中的元素。但是我想在一天的两个特定时间之间执行代码。这些时间在setDrwBrks函数中定义如下：

  mBrkStrt.setHours( 9, 50, 0 ); mBrkEnd.setHours( 10, 3, 0 );

  dBrkStrt.setHours( 12, 17, 0 ); dBrkEnd.setHours( 12, 30, 0 );

  eBrkStrt.setHours( 17, 50, 0 ); eBrkEnd.setHours( 18, 3, 0 );

  nBrkStrt.setHours( 22, 2, 0 ); nBrkEnd.setHours( 22, 15, 0 );

这是fndNxtDrwBrk( date )函数中的问题代码：

  for( j = 0; j < 4; j++ ) {
    if( date > strtDrwBrks[ j ] && date < endDrwBrks[ j ] ) {
      dspl.textContent += '... First statement executed';
    }
    else {   
      document.querySelector( 'footer' ).textContent = 'why is this also executed?';
    }
  }

此处的目标是在if时间介于date和strtDrwBrks[ j ]之间时执行endDrwBrks[ j ]语句。在我的代码片段中执行，因为我在pushDates()函数中手动将时间设置为9:51 AM：

  ////Control current time 
  today.setDate( 8 );
  today.setHours( 9 );
  today.setMinutes( 51 );

因此，在上午9:50到10:03之间，应该执行此代码。但是我的else语句也会执行。这就是问题。任何想法为什么会发生这种情况以及如何解决它？我一直在这工作几个小时都无济于事。

'use strict';

// ///////////////////////////// INITIAL /////////////////////////////////// //
function leading_0( num ) {
  if( num < 10 ) {
    num = '0' + num;
  }
  
  return num;
}

// ////////////////////////////// DATES //////////////////////////////////// //

function getCurrentTime( date ) {  // TIME / / / / / / / / / / / / / / / / / //
  var hours = date.getHours(),
      minutes = date.getMinutes(),
      seconds = date.getSeconds(),
      suffix = hours >= 12 ? 'PM' : 'AM',
      fullTime;

  hours = hours % 12;

  if( hours === 0 ){
    hours = 12;
  }

  minutes = leading_0( minutes );
  seconds = leading_0( seconds );
  fullTime = hours + ':' + minutes + ':' + seconds + ' ' + suffix;

  return fullTime;
}  // \\/ / / / / / / / / / / / / / / TIME / / / / / / / / / / / / / / / / / //

function getYear( date ) {  /// / / / YEAR / / / / / / / / / / / / / / / / / //
  var year = date.getFullYear();

  return year;
}  // \\/ / / / / / / / / / / / / / / YEAR / / / / / / / / / / / / / / / / / //

function getMonthDay( date ) {  /// MONTH DAY / / / / / / / / / / / / / / / ///
  var day = date.getDate();

  return day;
}  // \\/ / / / / / / / / / / / / / MONTH DAY / / / / / / / / / / / / / / / ///

function getMonth( date ) {  // / / / MONTH / / / / / / / / / / / / / / / / ///
  var months = [
    'January', 'Feburary', 'March',
    'April', 'May', 'June',
    'July', 'August', 'September',
    'October', 'November', 'December'
  ],
  month = months[ date.getMonth() ];

  return month;
}  // \\/ / / / / / / / / / / / / / / MONTH / / / / / / / / / / / / / / / / ///

function getWkDay( date ) {  /// / / WEEK DAY / / / / / / / / / / / / / / / ///
  var weekdays = [ 
    'Sunday', 'Monday', 
    'Tueday', 'Wednesday', 
    'Thursday', 'Friday', 
    'Saturday' 
  ],
  wkDay = weekdays[ date.getDay() ];

  return wkDay;
}  // \\ / / / / / / / / / / / / / / WEEK DAY / / / / / / / / / / / / / / / ///

function callBySec( func ) {
  setInterval( func, 1000 );
}

function pushDate() {  // / / / / / PUSH DATES / / / / / / / / / / / / / / / //
  var today = new Date(),
      wkDay, month, day, year, time,
      d = document;
  
  ////Control current time 
  today.setDate( 8 );
  today.setHours( 9 );
  today.setMinutes( 51 );
  
  wkDay = getWkDay( today );
  month = getMonth( today );
  day = getMonthDay( today );
  year = getYear( today );
  time = getCurrentTime( today );
  
  d.getElementById( 'wkDay' ).textContent = wkDay;
  d.getElementById( 'month' ).textContent = month;
  d.getElementById( 'day' ).textContent = day;
  d.getElementById( 'year' ).textContent = year;
  d.getElementById( 'time' ).textContent = time;
  
  return today;
}  // \\/ / / / / / / / / / / / / / PUSH DATES / / / / / / / / / / / / / / / //

function nextDate( startDate, dates ) {  // NEXT DATE / / / / / / / / / / / / /
    var startTime = + startDate,
        nearestDate, nearestDiff = Infinity,
        i, n,
        diff;
    for( i = 0, n = dates.length;  i < n; ++i ) {
        diff = + dates[ i ] - startTime;
        if( diff > 0  &&  diff < nearestDiff ) {
            nearestDiff = diff;
            nearestDate = dates[ i ];
        }
    }
  
    return nearestDate;
}  // \\ / / / / / / / / / / / / / / / / / NEXT DATE / / / / / / / / / / / / //

function setDrwBrks() {  // / / / SET DRAW BREAKS / / / / / / / / / / / / / / /
  var today = pushDate(),
      mBrkStrt = pushDate(), mBrkEnd = pushDate(),
      dBrkStrt = pushDate(), dBrkEnd = pushDate(),
      eBrkStrt = pushDate(), eBrkEnd = pushDate(),
      nBrkStrt = pushDate(), nBrkEnd = pushDate(),
      strtDrwBrks = [], endDrwBrks = [], drwBrksColl = [];
  
  mBrkStrt.setHours( 9, 50, 0 ); mBrkEnd.setHours( 10, 3, 0 );
  
  dBrkStrt.setHours( 12, 17, 0 ); dBrkEnd.setHours( 12, 30, 0 );
  
  eBrkStrt.setHours( 17, 50, 0 ); eBrkEnd.setHours( 18, 3, 0 );
  
  nBrkStrt.setHours( 22, 2, 0 ); nBrkEnd.setHours( 22, 15, 0 );
  
  strtDrwBrks.push( mBrkStrt ); endDrwBrks.push( mBrkEnd );
  strtDrwBrks.push( dBrkStrt ); endDrwBrks.push( dBrkEnd );
  strtDrwBrks.push( eBrkStrt ); endDrwBrks.push( eBrkEnd );
  strtDrwBrks.push( nBrkStrt ); endDrwBrks.push( nBrkEnd );
  
  drwBrksColl.push( strtDrwBrks ); drwBrksColl.push( endDrwBrks );
  
  return drwBrksColl;
}  // \\/ / / / / / / / / / / / / SET DRAW BREAKS / / / / / / / / / / / / / ///

function fndNxtDrwBrk( date ) { // FIND NEXT DRAW BREAK / / / / / / / / / / ///
  date = pushDate();
  
  var drwBrks = setDrwBrks(),
      nxtDrwBrk = nextDate( date, drwBrks[ 0 ] ),
      strtDrwBrks = drwBrks[ 0 ],
      endDrwBrks = drwBrks[ 1 ],
      i,
      j,
      day,
      dspl = document.getElementById( 'dspl' ),
      dspl2 = document.getElementById( 'dspl-2' );
  
  if( nxtDrwBrk === undefined ) {
    for( i = 0; i < 4; i++ ){
      drwBrks[ 0 ][ i ].setDate( date.getDate() + 1 );
    }  
    nxtDrwBrk = nextDate( date, drwBrks[ 0 ] );
  }
  
  day = nxtDrwBrk.getDay();
  
  if( day === 0 ) {
    nxtDrwBrk.setDate( nxtDrwBrk.getDate() + 1 );
    nxtDrwBrk.setHours( 9, 50, 0 );
  }
  
  for( j = 0; j < 4; j++ ) {
    if( date > strtDrwBrks[ j ] && date < endDrwBrks[ j ] ) {
      dspl.textContent += '... First statement executed';
    }
    else {   
      document.querySelector( 'footer' ).textContent = 'why is this also executed?';
    }
  }
  
  return nxtDrwBrk;
}  // \\ / / / / / / / / / / / / FIND NEXT DRAW BREAK / / / / / / / / / / / ///

// ////////////////////////////// START //////////////////////////////////// //
function start() {
  var today = pushDate();
  
  pushDate();
  callBySec( pushDate );
  fndNxtDrwBrk( today );
}
start();

.remove {
  display: none;
}

<p id="dspl">
  <span id="wkDay"></span>, 
  <span id="month"></span> <span id="day"></span>, 
  <span id="year"></span> <b>|</b> <span id="time"></span>
</p>

<p id="dspl-2" class="remove">
  Secondary Text
</p>

<footer></footer>

PS。控制台中的错误是因为我手动将时间更改为测试时间与////Control current time注释下的代码之间的范围。删除它，控制台将安静。不知道如何设置这个片段的时间而没有遇到该错误，尝试修复，但这是一个单独的问题，并不需要修复，因为代码设置它只是为了这个演示。

Answer 1

您在四个不同的时间间隔之间进行迭代。时间不能介于第一个间隔和第二个间隔之间，也不能同时介于第三个和第四个间隔之间。

例如： 12.30在10.10和13.20之间，但不在15.20和16.40之间因此，当测试它是否在第二个时间间隔之间时，它会转到else语句。当您测试4个间隔（循环4次）时，它将进入其他3次，因为只有一个间隔包含实际小时。

所以，让我们说你想知道它是否在你所拥有的四个间隔中的一个之间。

创建一个由defaut设置为false的布尔isBetweenOneInterval。然后在你的兴趣之间进行迭代。

If time is between interval

将isBetweenOneInterval设为true

在循环结束后，请检查isBetweenOneInterval是否为true。

如果isBetweenInterval为true，则在间隔期间执行您想要执行的操作。如果没有，当你不想在间隔之间做你想做的事，例如，隐藏包含倒计时的div。

放入代码意味着：

var isBetweenOneInterval = false;

 for( j = 0; j < 4; j++ ) {
    if( date > strtDrwBrks[ j ] && date < endDrwBrks[ j ] ) {
     isBetweenOneInterval = true;
    }
  }

if (isBetweenOneInterval == true)
{
 //// DO WHAT YOU WANT IF THE CURRENT TIME IS BETWEEN AN INTERVAL
}
else
{
 ///// DO WHAT YOU WANT IF THE CURRENT TIME ISN'T BETWEEN ANY INTERVAL
}

if和else语句都在一起执行

1 个答案: