Javascriptでサーバーの時間を取得

Javascriptで簡単なタイマーをセットしたいという要望があったので、シンプルに作りました。

内容：
セットした時間になったら画像が差し替わるようにしたい。
ただし、phpを使えないのでJavascriptで正確な時間を取得する必要がある。

一般的にphpではサーバー時間（正確な時間）を取得することができ、Javascriptで取得できるのはローカル（PCや携帯端末で設定している）時間だと言われています。

ただ、少し調べればJavascriptでもほぼ正確な時間を取得する方法が出てきます。

それがXMLHttpRequestで、ajaxのような非同期通信を実現するためのAPIです。
つまり「便利」ってことですね！！

var request = new XMLHttpRequest;
request.open('HEAD', '#', false);
request.send(null);

var req_t = new Date(request.getResponseHeader('Date'));

これで、変数req_tには「通信時のDateオブジェクト」が定義されています。
つまりサーバーの時間を取得できているということになります。

通信からクライアント側のPC表示までのタイムラグがありますから、秒単位での正確さは保証できません。
しかし分単位、一時間単位なら問題なく使用できるでしょう。

というわけで、今回用意したJavascriptがこちら。

var set_y = 2016; //イベントの年
var set_m = 1; //イベントの月
var set_d = 1; //イベントの日
var set_h = 1; //イベントの時間

var request = new XMLHttpRequest;
request.open('HEAD', '#', false);
request.send(null);

var req_t = new Date(request.getResponseHeader('Date'));

var now_t = req_t.getYear() * 8928 + req_t.getMonth() * 744 + (req_t.getDate() - 1) * 24 + req_t.getHours();
var set_e = (set_y - 1900) * 8928 + (set_m - 1) * 744 + (set_d - 1) * 24 + set_h;

window.onload = function () {
        var before = document.getElementById("set_before");
        var after = document.getElementById("set_after");
        if (set_e > now_t) {
              before.style.display = "block";
              after.style.display = "none";
        } else {
              before.style.display = "none";
              after.style.display = "block";
        }
}

表示を切り替えたい部分のHTMLはこちら。

<img id="set_before" src="img1.jpg" alt="">
<img id="set_after" src="img2.jpg" alt="">

Javascript上部の変数に表示を切り替えたい日時を入力し、HTML側で”set_before”、”set_after”というidを設定すると{display:none}と{display:block}をその時間で入れ替えるという簡単なものです。

しかしこの後、「idじゃなくてclassで使えるようにして欲しい」と言われたのは、また次のお話ということで…