使用 JavaScript 给 hh:mm 添加一分钟

Add a minute to hh:mm with JavaScript

本文关键字：mm 添加 一分钟 hh JavaScript 使用      更新时间：2023-09-26

我是一个PHP程序员，很少使用Javascript，所以我需要帮助弄清楚如何使用JS或JQuery完成此操作（我目前有jquery-1.7.min.js）。我用 PHP 创建了三个时钟，显示不同时区的时间，我想使用 JS 每分钟增加一次时间。

时钟的 HTML 如下所示：

<div class="clock">
  <div class="pm"></div>
  <div class="time">11:59</div>
</div>

添加一分钟后，它应该是这样的：

<div class="clock">
  <div class="am"></div>
  <div class="time">00:00</div>
</div>

这是我到目前为止得到的：

var myVar = setInterval(function(){setClocks()},60000);
function setClocks()
{
  $(".clock").each(function() {
    var ampm = $("div:first-child");
    var time = $(".time");
    // add one minute to time and toggle am/pm if needed
    time.innerHTML = newTime;
  }
}

任何帮助将不胜感激。

更新：

我明白了，感谢Dead133和kei。这是我更新的代码：

var myVar = setInterval(function(){setClocks()}, 60000);
function setClocks()
{
  $(".clock").each(function() {
    var ampm = $("div:first-child", $(this));
    var time = $(".time", $(this));
    var parts = time.text().split(':');
    var hours = parseInt(parts[0], 10);
    var minutes = parseInt(parts[1], 10);
    ++minutes;
    if (minutes == 60)
    {
      minutes = 0;
      ++hours;
      if (hours == 12)
      {
        ampm.toggleClass('am');
        ampm.toggleClass('pm');
      }
    }
    if (hours > 12) hours -= 12;
    if (hours.toString().length < 2) hours = "0" + hours;
    if (minutes.toString().length < 2) minutes = "0" + minutes;
    time.text(hours + ':' + minutes);
  })
}

谢谢大家的帮助！我在PHP中做过这种事情，所以我知道其中的逻辑。只是JS/JQ把我挂了。

感谢 kei 改进我的答案并添加此演示

var myVar = setInterval(function(){setClocks()},60000);
function setClocks() {
    $(".clock").each(function() {
        var ampm = $("div:first-child", $(this)); // $(this) is important since you're dealing with 3 clocks
        var time = $(".time", $(this));
        var clockTime = time.text().split(':'),
            hours = clockTime[0],
            minutes = clockTime[1];
        ++minutes;
        if (minutes == 60) {
            minutes = 0;
            ++hours;
            if (hours == 12) {
                hours = 0;
                ampm.toggleClass('am')
                    .toggleClass('pm');
            }
        }
        if (hours.toString().length < 2) hours = "0"+hours;        // Added padding to the digits
        if (minutes.toString().length < 2) minutes = "0"+minutes;
        time.text(hours + ':' + minutes); 
    }); //  ); is important
}

我使用moment()库来做到这一点，这里有一个例子：

console.log(moment('12:30', 'HH:mm').add(60, 'm').format("HH:mm"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

您的问题实际上有两个部分：如何按照您想要的方式格式化数字（使用前导零等），以及如何最好地更新时间显示。

第一部分（格式）更容易回答，所以我先打那个。 不幸的是，JavaScript 没有内置的方法在将数字转换为字符串时添加前导零。 所以你有两个选择。 一种是使用库在 JavaScript 中获得更强大的数字到字符串格式。 我真的很喜欢javascript-sprintf，但是我是一个老C人。 如果你只是想完成这个，你只需要一些零填充，你可以扩展字符串类来做到这一点：

String.prototype.padLeft = function( prefix, maxLength ) { 
    var s = this; while( s.length < maxLength ) s = prefix + s; return s; 
}

现在，如果您有分钟和秒需要格式化，这很容易：

var min = 3;
var sec = 3;
var s = String(min).padLeft( '0', 2 ) + ':' + String(sec).padLeft( '0', 2 );

因为这有点笨拙，让我们把它全部汇总到一个函数中：

function formatTime( date ) {
    return String(date.getHours()).padLeft( '0', 2 ) + ':' + 
        String(date.getMinutes()).padLeft( '0', 2 );
}

现在进入更棘手的问题：如何管理实际的更新。 首先，在 JavaScript 中使用时区可能是一个正确的 PITA，因为 JavaScript （ES5） 没有任何真正的方法来构造一个时区不是浏览器时区的 Date 对象。 嘘声。 （这很可能会在 ES6 中得到解决，至少据我从 es-discuss 的演讲中可以看出。 此外，你通过创建一个超时来玩火，该超时将每 60 秒执行一次类似的事情，并期望它与时钟保持同步。 如果用户只让页面打开 15 分钟或其他什么，也许没关系（也许），但它只会与实际时间越来越远。 告诉 JavaScript"在 60 秒内做某事"不能完全依赖。 JavaScript 正在处理很多球，它会尽最大努力在 60 秒内到达它，但它可能是 60.001 秒或 59.993 秒。 这可能看起来不多，但它加起来。 此外，如果发生灾难性事件，例如堆栈溢出或其他会使 JavaScript 容器陷入困境的错误，它可能会偏离几毫秒以上。

这种方法的另一个问题是，您在屏幕上看到的时钟不会在正确的时间滚动。 如果页面加载了半分钟，则时间直到半分钟后才会更新到下一分钟。 所以实际上，你在屏幕上看到的内容可能会偏离长达 30 秒。 也许这对您的应用程序来说没什么大不了的，但对我来说听起来很糟糕。

那么，有什么更好的方法呢？ 嗯，理想情况下，每次你想刷新屏幕时（我们将在一分钟内讨论这个频率），你会从浏览器中获取一个Date对象，将其转换为适当的时区，然后从这些对象更新时间。 问题是，在 JavaScript 中没有真正的方法可以做到这一点（在不同的时区显示某些内容）。

这里有三个广泛的选项：

  1. 使用PHP提供的时间戳加载页面（这是我之前答案的基础，我已经放弃了）。 此方法的问题在于它很复杂，并且可能会在时间转换（夏令时转换）时失败。 我想出了更好的选择。

  2. 使用 PHP 进行时区计算，并使用 AJAX 更新时间字符串。 这是一个非常可靠的解决方案，但是当工作可以在客户端上完成时，为什么要在服务器上工作呢？

  3. 使用将支持时区的日期引入 JavaScript 的库。 这对我来说是理想的解决方案。 遗憾的是，支持时区的日期对象在 JavaScript 中尚不可用，而此解决方案"修复"了 JavaScript。

幸运的是，有一个可用的库，因此我们可以选择选项 #3：

https://github.com/mde/timezone-js

安装该脚本后，您可以获得所需的任何时区（我将其放在一个函数中，该函数也将更新显示）：

function updateDateDisplays() {
    var now = new Date();
    var paris = new timezoneJS.Date( now, 'Europe/Paris');
    var miami = new timezoneJS.Date( now, 'America/Miami');
    // other TZs go here....
    // update HTML here....
}

此方法的唯一缺点是它依赖于用户的计算机日期是正确的。 如果这是一个问题，您将不得不使用 AJAX，或者在页面加载时传递当前日期并取消偏移量。 但是，让我们假设我们可以信任用户的时钟。

现在我们有了获取特定时区日期的方法，我们关心的只是更新时钟。 正如我之前提到的，每 60 秒更新一次有一个问题：分钟可能会偏离长达 30 秒。 也许这不是您的实现中的问题，但这是一件很容易解决的事情，那么为什么不正确地做到这一点呢？

大多数用户体验研究表明，在100毫秒内发生的事情对人类来说似乎是"瞬间的"。 我通常将其减半到50毫秒，这对于过去20年制造的任何计算机来说几乎不是一个负担。 因此，您所要做的就是每 50 毫秒调用一次updateTimeDisplays()，您将为用户提供准确的时间显示。

相关文章：