javascript - 制作带有日期时间的闹钟

Question

我正在尝试制作一个闹钟，它会在完成时播放声音。因此，例如，我将闹钟设置为 18:00:00 开始的时间，而当前时间是 17:59:00，所以基本上闹钟应该1 分钟后熄火。

我试过这样做:

var x = '18:00:00';
var t = new Date(x) - new Date();
setTimeout(function(){ alert("Hello"); }, t);

这行不通，不知道为什么。错误是 NaN。

Answer 1

您的问题是 x 的定义方式。您的代码背后的逻辑是可靠的，但是您需要使用一些相当智能的 Datetime 操作来实现这一点。例如，让我们将闹钟设置为从页面加载后的五秒钟:

x = new Date();
x.setSeconds(x.getSeconds() + 5);
var t = new Date(x) - new Date();
setTimeout(function(){ alert("Hello"); }, t);

我建议您查看 Date并找出解决问题所需的逻辑和方法。

粗略的解决方案

仅基于小时的警报逻辑应该是这样的:

• 根据闹钟时间的 HH:mm:ss 创建一个虚拟日期，使用当前的日期、月份等。
• 与 new Date() 比较以查看它是在当前日期之前还是之后。
• 如果在当前日期之前，则将 x 设置为明天和给定的 HH:mm:ss。
• 否则设置为今天和 HH:mm:ss。
• 减去日期并处理警报。

下面的代码演示了如何实现这一点:

var x = {
  hours: 18,
  minutes: 0,
  seconds: 0
};

var dtAlarm = new Date();
dtAlarm.setHours(x.hours);
dtAlarm.setMinutes(x.minutes);
dtAlarm.setSeconds(x.seconds);
var dtNow = new Date();

if (dtAlarm - dtNow > 0) {
  console.log('Later today, no changes needed!');
}
else {
  console.log('Tomorrow, changing date to tomorrow');
  dtAlarm.setDate(dtAlarm.getDate() + 1);
}

var diff = dtAlarm - new Date();
setTimeout(function(){ alert("Hello"); }, diff);

注意事项:

• HH:mm:ss 指的是小时:分钟:秒格式(有关更多信息，请参阅 here)。
• 我还使用一个对象代替您的 x 以使转换更容易。您可以轻松地从字符串构建对象。