WEBデザイン スクリプト

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

2019年1月25日

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円からの高性能クラウドレンタルサーバー

-WEBデザイン, スクリプト
-,

Copyright© MDBloG , 2020 All Rights Reserved Powered by AFFINGER5.