現在時刻をリアルタイムで時計表示するJavaScript（jQueryで簡単）のメモ

JavaScriptではDate関数で現在時刻を取得して時間表示できますが、時間表示の形に整形するのがjQueryだとシンプルに記述できるのでメモ。

現在時刻をリアルタイム表示するJavaScript

とりあえずコピペで使えるように、以下がソース（jQueryは別途読み込んでね）

<script>
function showtime(){
  var today = new Date();
  $weekday = ['日','月','火','水','木','金','土'];
  month = today.getMonth() + 1 ;
  $('#datetime').html(month + "月"+ today.getDate() + "日（" + $weekday[today.getDay()] +"） " +today.getHours() + ":" + ('0'+today.getMinutes()).slice(-2) + ":" + ('0' +today.getSeconds()).slice(-2));
}
setInterval(showtime,1000);
</script>
<div id="datetime"></div>

結果はこちら

解説

var today = new Date();
today変数にDate()で現在時刻をオブジェクトとして代入、jQueryで扱うことが出来るようになります。

today.getMonth() で月を返します。（0～11なので、表示使用時は1プラス）

today.getDate()で曜日を返します。0～7までの数字で日～月に対応するので、$weekday = ['日','月','火','水','木','金','土']という配列を定義し、そこから曜日を取り出します。

today.getDay() , today.getHours() , today.getMinutes() , today.getSeconds()　はそれぞれ日時分秒を返します。ただし、1桁の数値は前にゼロは付きませんので、2桁に揃える処理をします。それが

('0'+today.getMinutes()).slice(-2)
文字列"0"と取り出した数値を連結して先頭が0になる文字列にし、そこから下二桁を取り出して2桁にします。

<div id="datetime"></div>を、$('#datetime').html() で中のhtmlを書き換える処理をします。today.***で取り出す各数値を連結して時計表示に。

以上の処理を showtimeという関数で定義し、
setInterval(showtime,1000);
で、一秒毎に再実行してリアルタイムに時刻表示します。

まあざっくりと解説しましたが、

仕組みはよくわからなくても使えますし、いろいろ書き換えてみたりして実行結果を見てみると仕組みはわかりやすいと思います。
言うまでも無いかもしれませんが、JavaScriptはクライアントサイドのプログラムなので参照する時刻はサーバーの時刻ではなくデバイスの時計になりますので、デバイスの時計が狂ってたら正確な時刻表示にはならないので。

月額480円からの高性能クラウドレンタルサーバー

Minagawa

この記事を書いた人 Minagawa

2011年に自殺願望や希死念慮にとらわれうつ病と診断され、休職後、うつ病の再発を繰り返しながら転職を4回。
うつ病との闘病とうつ病の改善のために取り組んだ事実や、心理学など学んだことをこのブログで発信。
2019年よりフリーランスWebデザイナーとして活動中。