htmlファイル内の日付テキストを、一週間単位で自動更新したい

Question

ただいま以下のようなプログラムを実装するにあたり、作業が行き詰っております。

/**
要望：html上にある日付テキストを自動で更新したい。

例： 11/15と表示されていた場合、11/16の0:00になった時点で、その日付テキストを11/22に更新 この更新をループする

条件----------
・取得する日付は１週間後の日付
・取得するタイミングは現在日時が表示している日付を超えた時

**/

moment.jsというライブラリを見つけて日付の取得部分は解決できたように思えるのですが、これを現在日時と照らし合わせてアクションさせるところがいまいち要領を得ず、先に進まなくなっております。

当方webデザイナー。javascriptは、jqueryを使用できる程度の知識です。
もしなにかいい方法があれば、ご教授お願い致します。

現在使用しているツール
・gulp

Comments

[kei344]

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

[ttaison]

ご指摘ありがとうございます。再度投稿する際は掲載させていただきます＾＾

Answer 1

javascriptにおける時間は当然クライアントPC側のローカル時間です
ですのでクライアント側の時計が狂っていれば正しい更新になりません
その上で、以下２方式のいずれかを選択する必要があります

• 間違っていてもクライアントPCの時間で処理する
• クライアントPCの時間は無視し、サーバー側の時間で処理する

ただしその場合サーバーのlocaleに引っ張られて他の標準時をつかっている
ユーザーは中途半端な時間で更新される可能性がある

いずれにしてもページが読み込まれたときに更新タイミングまでの
時間を計算して、setTimeoutで予約をいれておけば済みます。

Comments

[ttaison]

ありがとうございます。なかなか知識が追いつきませんが、ひとつずつ試していきたいと思います＾＾

[mukkun]

そうですね。
確かに逆算した値を突っ込めば論理的には「setTimeout」でできますが、
長時間の場合、結構ずれた記憶がありましたが今はそんなことないんでしょうか。

[yambejp]

たしかにsetTimeoutはPCのタイマー処理ですから一発勝負は怪しいかなぁ
ご提示のようにsetIntervalの方が確実なような気もします

Answer 2

動くかわかりませんが、こういうロジックでどうでしょうか。

###追記
度々すみません。。ぼけぼけです。
flagを追加しました。

var gMoment = moment()._d, // 初回でmoment日付を取得
    gFlag = true; // フラグ

// 1秒毎に処理
setInterval(function () {
  var _hour = gMoment.format('H'); // gMomentから時間を取得

  // 時間が0になったら
  if (_hour == 0 && gFlag) {
    // 翌日になったらの処理
    gMoment = gMoment.add(6, 'day'); // 日を6日進める
    $('.header').text(gMoment.format('YYYY年M月D日')); // moment日付の付与とテキストの変更
    gFlag = false;
  } else {
    gMoment = moment()._d;

    if (_hour == 1 && !gFlag) {
      gFlag = true;
    }    
  }
}, 1000);

Comments

[ttaison]

ありがとうございます！追記までいただき、感謝です＾＾
一度日付を調整して確認してみます！

[ttaison]

すみません、動きませんでした　汗
ひとつ確認なのですが、
上記の .header　という部分は、表示させたい場所（要素）のクラス名という解釈でよかったでしょうか？

[mukkun]

はい。相違ございません。
動かしてないのとmomentに関してはdocを見ながら書いたので、
おそらくmomentあたりの使い方が間違っているのだと思います。。
(変数gMomentにmomentオブジェクトがはいってないのかな。。)

moment()._d
を
moment()
に変更すれば動くかも。。　※変更するところは2個なので注意！

http://momentjs.com/docs/

[ttaison]

ありがとうございます。少しずつ調整していきながら確認してみます＾＾