javascript - Jquery 倒计时到下周三晚上 11 点

Question

我需要编写一个函数，它将采用 UTC 时间的 javascript 日期对象。它需要找到从给定日期到下一个(或即将到来的)星期三晚上 11 点的秒数差异，然后将其放入倒计时对象中。一旦计时器达到 0，我需要它重新启动。我知道我必须以某种方式使用 getDay() 函数，但我不确定如何去做。

Answer 1

逻辑和代码

• 倒数计时器本身不需要 jQuery。日期对象是普通 JavaScript 的一部分。

• 对于 UTC，您需要使用 getUTCDay()方法。

• 假设 givenDate 是 Date对象，以下将计算到即将到来的星期三(第 3 天)还有多少天。

  var daysUntilTarget = (3 - givenDate.getUTCDay() + 7) % 7;
  

• 如果给定的日期是星期三，上​​面的代码将返回 0，您需要确定目标时间是否已经过去。你可以使用这样的东西:

  var daysUntilTarget,
      targetDay = 3,
      targetHour = 23,
      targetMinute = 0,
      targetSecond = 0;
  
  if (
      targetDay == givenDate.getUTCDay() &&
      targetHour * 3600 +
      targetMinute * 60 +
      targetSecond * 1 <
      givenDate.getUTCHours() * 3600 +
      givenDate.getUTCMinutes() * 60 +
      givenDate.getUTCSeconds() * 1 +
      givenDate.getUTCMilliseconds() / 1000
  ) {
      //given date is after target time on target day 
      daysUntilTarget = 7;
  }
  

• 使用 setUTCDate()和 setUTCHours设置目标日期和时间的方法。

  var targetDate = new Date(givenDate);
  targetDate.setUTCDate(givenDate.getUTCDate() + daysUntilTarget);
  targetDate.setUTCHours(targetHour, targetMinute, targetSecond);
  

• 使用 getTime()方法来获取给定日期和目标日期的时间戳。然后你可以计算这些之间的差异并除以 1000 得到秒数。

  var countdownSeconds = (targetDate.getTime() - givenDate.getTime()) / 1000;
  

• 下面会将总秒数转换为天、分和秒。然后，您可以将这些写入 HTML 中的元素。

  var daysLeft, hoursLeft, minutesLeft, secondsLeft;
  
  secondsLeft = parseInt(countdownSeconds);
  
  daysLeft = parseInt(secondsLeft / 86400);
  secondsLeft = secondsLeft % 86400;
  
  hoursLeft = parseInt(secondsLeft / 3600);
  secondsLeft = secondsLeft % 3600;
  
  minutesLeft = parseInt(secondsLeft / 60);
  secondsLeft = parseInt(secondsLeft % 60);
  

• 在进行进一步计算之前，请务必将 countdownSeconds 转换为整数。否则，由于浮点运算，您可能会得到不想要的结果。例如，

  0.009 / 86400 = 1.0416666666666665e-7;
  parseInt(1.0416666666666665e-7) = 1;
  parseInt(0.009 / 86400) = 1; //probably not what you were expecting
  

倒计时

要更新计时器，您可以递减计数器或使用客户端计算机的时钟来计时。

• 计数器方法不如时钟方法准确，因为前者没有考虑代码运行所花费的时间。我注意到半小时内有 3 秒的损失。调整循环间隔不会解决这个问题，因为不同的浏览器以不同的速度运行代码。并且代码可能由于其他原因(例如当机器内存不足时)运行得更慢。

• 客户端计算机的时间可能一开始就不准确。但是，最初可以将服务器时间与客户端时间进行比较以计算偏移量。然后客户端时间可以用作计数器而不是绝对值。缺点是如果客户端时间改变，会影响倒计时。请注意，时区变化和夏令时变化不会影响倒计时，因为它们不会影响时间戳。

例子

我使用上述代码创建了两个 fiddle 。

• > Countdown Timer (Using Counter)
• > Countdown Timer (Using Clock)