カテゴリー: JavaScript
今回は、JavaScriptを使ってウェブページに現在時刻を表示する方法を解説します。動的な時計表示は、リアルタイム情報を表示するサイトに便利です。今回の例では、「23:01:05」のように2桁24時間表示シンプルなデジタル時計を作成します。
コードの詳細解説
1. digs関数
function digs(num) {
return ( num < 10 ) ? num = "0" + num : num = num;
}この関数では、1桁の数字を2桁に変換します。
例えば、5の場合は「05」を返します。これにより、2桁表示の時計を作成できます。
1桁のままで表示したい場合は、digs関数を削除してください。
2. Watch関数
function Watch() {
var date = new Date();
var nowHour = digs( date.getHours() );
var nowMin = digs( date.getMinutes() );
var nowSec = digs( date.getSeconds() );
var watch = nowHour + ":" + nowMin + ":" + nowSec;
document.getElementById("Watch").innerHTML = watch;
}この関数は、現在時刻を取得し、「時:分:秒」の形式にフォーマットします。
先ほど作成した、digsを使用することで2桁にフォーマットし、これらを組み合わせて時計の表示を作成します。
最後に、この文字列をIDが”Watch”のHTML要素の内容として設定します。
3. setInterval関数
setInterval('Watch()', 500);setInterval関数は、指定した時間間隔(ミリ秒単位)で指定した関数を繰り返し実行します。この例では、Watch関数を500ミリ秒（0.5秒）ごとに実行し、時計を更新しています。これにより、ほぼリアルタイムで現在の時刻が表示されます。
コード全体
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>時計アプリ</title>
</head>
<body>
<script>
function digs(num) {
return ( num < 10 )?num = "0" + num:num = num;
}
function Watch() {
var date = new Date();
var nowHour = digs( date.getHours() );
var nowMin = digs( date.getMinutes() );
var nowSec = digs( date.getSeconds() );
var msg = nowHour + ":" + nowMin + ":" + nowSec;
document.getElementById("Watch").innerHTML = msg;
}
setInterval('Watch()',500);
</script>
<div id="Watch">読み込み中</div>
</body>
</html>読み込み中
このコードをHTMLファイルに追加することで、シンプルで動的なデジタル時計をウェブページに表示できます。setInterval関数を使用することで、定期的に時刻を更新し、常に最新の時刻を表示することができます。ぜひ、試してみてください！
サンプルプログラムは、MITライセンスのもとで公開しています。
以下の利用規約を参照の上、使用してください。
ソースコードの利用に関する規約