0

私は Javascript をめったに使用しない PHP プログラマーなので、JS または JQuery (現在 jquery-1.7.min.js を持っています) でこれを達成する方法を理解するのに助けが必要です。PHP で異なるタイムゾーンの時刻を示す 3 つの時計を作成しました。JS を使用して 1 分ごとに時刻を増やしたいと考えています。

時計の HTML は次のようになります。

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

1 分追加すると、次のようになります。

<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

私の答えを改善し、このDEMOを追加してくれた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
}
于 2013-11-04T20:49:44.597 に答える
0

あなたの質問には実際には 2 つの部分があります。数値を希望どおりにフォーマットする方法 (先頭にゼロを付けるなど) と、時間表示を更新する最善の方法です。

最初の部分（整形）の方が答えやすいので、そちらを先に叩きます。残念ながら、JavaScript には数値を文字列に変換する際に先行ゼロを追加する組み込みの方法がありません。したがって、2 つのオプションがあります。1 つは、ライブラリを使用して、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 (ES5) にはタイム ゾーンを構築する実際の方法がないため、JavaScript でタイム ゾーンを操作することは適切な PITA になる可能性があります。Dateブラウザのタイムゾーン以外のタイムゾーンを持つオブジェクト。そのためにブー。(これは、少なくとも es-discuss での話からわかる限り、ES6 で対処される可能性があります。) また、そのような 60 秒ごとに何かを行うタイムアウトを作成することで火遊びをしていて、時計との同期を保つためです。ユーザーが 15 分程度しかページを開かない場合は、それで問題ないかもしれませんが (たぶん)、実際の時間からどんどん離れていきます。JavaScript に「60 秒で何かを実行する」ように指示することは、完全に信頼することはできません。JavaScript は多くのボールをジャグリングしており、60 秒で到達するために最善を尽くしますが、60.001 秒または 59.993 秒になる可能性があります。それほど多くないように見えるかもしれませんが、合計します。また、もしあれば」

このアプローチのもう 1 つの問題は、画面に表示される時計が正しい時刻にロールオーバーしないことです。ページが 30 分後に読み込まれた場合、時刻は NEXT の 30 分が経過するまで更新されません。実際、画面に表示されているものは最大 30 秒ずれている可能性があります。あなたのアプリケーションにとっては大したことではないかもしれませんが、私にはひどく聞こえます。

それで、それを行うためのより良い方法は何ですか？理想的には、画面を更新するたびに (その頻度については後で説明します)、Dateブラウザーからオブジェクトを取得し、それを適切なタイム ゾーンに変換してから、時刻を更新します。それらのオブジェクト。問題は、JavaScript でこれを行う (別のタイム ゾーンで何かを表示する) 実際の方法がないことです。

ここには 3 つの幅広いオプションがあります。

  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 秒ごとの更新には問題があります。1 分が最大 30 秒ずれることがあります。おそらくこれはあなたの実装の問題ではありませんが、修正するのは簡単なことなので、正しく修正しないのはなぜですか?

ほとんどの UX 研究は、100 ミリ秒以内に発生することが人間にとって「瞬間的」に見えることを示しています。私は通常、その半分の 50 ミリ秒にしています。これは、過去 20 年間に製造されたどのコンピュータにもほとんど負担にはなりません。したがってupdateTimeDisplays()、50 ミリ秒ごとに呼び出すだけで、ユーザーに正確な時刻が表示されます。

于 2013-11-04T21:26:14.017 に答える