リアルタイム世界時計を作ってみた

01現在の日時を表示する

javascriptで現在の日時を取得

まずは現在の日時をjavascriptで表示してみます。

var now = new Date();
console.log(now);

コンソールで確認すると下記のような表示が出ます。

ローカルのタイムゾーンの現在日時が表示されました！

協定世界時（UTC）を表示

世界各国に対応した世界時計を作るために、協定世界時（UTC）を表示してみましょう。

var now = new Date(),
    localTime = now.getTime(),
    localOffset = now.getTimezoneOffset() * 60 * 1000,
    utcTime = localTime + localOffset,
    utc = new Date(utcTime);
console.log('ローカル時刻' + localTime);
console.log('ローカルとの差：' + localOffset);
console.log('世界時（UTC）（ミリ秒単位）：' + utcTime);
console.log('世界時 (UTC) ：' + utc);

2行目のnow.getTime()はローカルの現在時刻をミリ秒単位で取得しています。（getTime()メソッドの戻り値は、1970年1月1日 00:00:00 UTC から指定した日時までの経過時間です。）
一方、3行目のnow.getTimezoneOffset()はローカルから協定世界時 (UTC) までのタイムゾーンの差を分単位で返します。ローカルの現在時刻に差分を足してあげれば、協定世界時が求められるはずですよね。そのために、まずは2つの単位を合わせてから（3行目）足し合わせます（4行目）。
5行目、new Dateの引数にutcTimeを渡すことで、世界協定時が求められました！

タイムゾーンを指定

さて、ここまで来たら一意のタイムゾーンの現在日時を取得できますね！

var tz = +0800,
    china = new Date(utcTime + tz / 100 * 60 * 60 * 1000);
console.log('中国（北京） ：' + china);

試しに中国（北京）の日時を表示してみます。北京のタイムゾーンはUTC+8:00なので、1行目でタイムゾーンを指定します。2行目で、前回求めたUTC時刻（ミリ秒単位）に+8:00の差分を足せば、北京の現在日時が求められました！なお、足すときに今回も忘れず単位をそろえましょう。

02リアルタイム時計を作る

現在日時をパーツごとに取得する

さて、次に1秒ごとに切り替わるリアルタイム時計を作りたいと思います。そのために、まずはnew Date()で取得した値を部品化する方法を確認します。

var now = new Date(),
    year = now.getFullYear(),
    month = now.getMonth() + 1,
    date = now.getDate(),
    h = ('0' + now.getHours()).slice(-2),
    m = ('0' + now.getMinutes()).slice(-2),
    s = ('0' + now.getSeconds()).slice(-2);
console.log(year + '年' + month + '月' + date + '日' + h + ':' + m + ':' + s);

年・月・日・時・分・秒でパーツ分けできました！月の取得だけ、注意が必要ですね！なお、('0' + now.getHours()).slice(-2) は、数値を2桁に揃えています。

リアルタイム時計を作成

パーツわけができたら、リアルタイム時計の作成も簡単です。1秒ごとに処理を実行するため、setInterval()を使います。

setInterval(function(){
    var now = new Date(),
    year = now.getFullYear(),
    month = now.getMonth() + 1,
    date = now.getDate(),
    h = ('0' + now.getHours()).slice(-2),
    m = ('0' + now.getMinutes()).slice(-2),
    s = ('0' + now.getSeconds()).slice(-2),
    msg = year + '年' + month + '月' + date + '日' + h + ':' + m + ':' + s;
    $('時計を表示させる要素').text(msg);
},1000);

setInterval()メソッドの引数に1000、つまり1秒を設定することで、1秒ごとに現在時刻の表示をしています。これをタイムゾーンを指定して表示させるには、

var tz = +0800;
Date.prototype.setTimezone = function(tz){
    var utc = new Date(this.getTime() + this.getTimezoneOffset() * 60 * 1000);
    return new Date(utc.getTime() + tz / 100 * 60 * 60 * 1000);
};
setInterval(function(){
    var now = new Date(),
        dst = now.setTimezone(tz),
        year = dst.getFullYear(),
        month = dst.getMonth() + 1,
        date = dst.getDate(),
        h = ('0' + dst.getHours()).slice(-2),
        m = ('0' + dst.getMinutes()).slice(-2),
        s = ('0' + dst.getSeconds()).slice(-2),
        msg = year + '年' + month + '月' + date + '日' + h + ':' + m + ':' + s;
    $('時計を表示させる要素').text(msg);
},1000);

これで中国の時計を表示できました！次回、サマータイム対応版を作ってみたいと思います！