Question

我是一名很少使用Javascript的PHP程序员，所以我需要帮助找出如何使用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让我感到高兴。

Answer 1

感谢kei改进我的回答并添加了此DEMO

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
}

Answer 2

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

第一部分（格式化）更容易回答，所以我先点击那个。遗憾的是，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对象＆＃39;的时区。嘘声。（这可能会在ES6中得到解决，至少就我在es-discuss的讨论中所说的而言。）此外，你通过创建一个每隔60秒会做一次超时的事情来解决这个问题，并期望与时钟保持同步。如果用户只打开页面15分钟或者其他东西，也许这样就可以了（也许），但它只会偏离实际时间越来越远。告诉JavaScript＆＃34;在60＆＃34;做一些事情秒不能完全依赖。 JavaScript充斥着很多球，它会在60秒内完成它，但它可能是60.001秒，或59.993秒。它可能看起来不多，但它加起来。此外，如果发生灾难性事件，例如堆栈溢出或其他会使JavaScript容器发生错误的错误，它可能会超过几毫秒。

这种方法的另一个问题是，您在屏幕上看到的时钟不会在正确的时间滚动。如果页面加载半分钟，则时间不会更新，直到半分钟到达NEXT分钟。所以，你在屏幕上看到的内容可能会被关闭最多30秒。也许这对你的应用程序来说并不重要，但对我来说听起来很糟糕。

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

这里有三个广泛的选择：

使用PHP提供的时间戳加载页面（这是我之前回答的基础，我放弃了）。这种方法的问题在于它很复杂，并且可能在时间转换（夏令时转换）时失败。我想出了更好的选择。
使用PHP进行时区计算，并使用AJAX更新时间字符串。这是一个非常可靠的解决方案，但是为什么在客户端上完成工作时可以在服务器上运行？
使用为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毫秒内发生的事情会出现＆＃34;瞬间＆＃34;对人类我通常只有一半到50毫秒，这对过去20年来制造的任何计算机来说都不是一个负担。因此，您所要做的就是每50毫秒拨打updateTimeDisplays()，您就可以为用户准确显示时间。

使用JavaScript添加一分钟到hh：mm

2 个答案: