0

我是一个很少使用 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 让我束手无策。

4

3 回答 3

2

感谢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
}
于 2013-11-04T20:49:44.597 回答
1

我使用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>

于 2021-11-04T11:07:11.987 回答
0

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

第一部分（格式）更容易回答，所以我会先打那个。不幸的是，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 秒。它可能看起来不多，但它加起来。另外，如果有'

这种方法的另一个问题是您在屏幕上看到的时钟不会在正确的时间滚动。如果页面加载半分钟，时间将不会更新，直到下一分钟的半分钟。所以说真的，你在屏幕上看到的内容最多可能会延迟 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 年制造的任何计算机来说几乎不是负担。因此，您所要做的就是updateTimeDisplays()每 50 毫秒调用一次，您就可以为您的用户提供准确的时间显示。

于 2013-11-04T21:26:14.017 回答