#プログラミング勉強日記
2021年1月9日
以前、こちらの記事でJavaScriptでの日付と時刻を取得する方法をまとめた。今回は、現在時刻をリアルタイムで表示し続ける方法を紹介する。
#方法
- 現在時刻を格納するDateオブジェクトを作成する
- 作成したDateオブジェクトから時間・分数・秒数を取り出す
- 時計として表示する文字列を作成する
- 文字列を時間に書きかえる
- 1秒ごとに特定の処理を実行する
##1. 現在時刻を格納するDateオブジェクトを作成する方法
以下のようにnew Date()で現在の日付・時刻する。
var nowDate = new Date();
console.log(nowDate);
コンソール結果
Sun Sep 27 2020 09:22:20 GMT+0900 (日本標準時)
##2. 作成したDateオブジェクトから時間・分数・秒数を取り出す方法
let nowTime = new Date(); // 現在日時を得る
let nowHour = nowTime.getHours(); // 時間を抜き出す
let nowMin = nowTime.getMinutes(); // 分数を抜き出す
let nowSec = nowTime.getSeconds(); // 秒数を抜き出す
##3. 時計として表示する文字列を作成する方法
let msg = "現在時刻：" + nowHour + ":" + nowMin + ":" + nowSec;
##4. 文字列を時間に書きかえる方法
document.getElementById("id名").innerHTML = msg;
##5. 1秒ごとに特定の処理を実行する方法
etIntervalメソッドを使う。(詳しくは後日Qiitaに乗せようと思う)
// 第1引数は指定時間後に自動実行される関数
// 第2引数はミリ秒で指定時間を設定する(1000=1秒)
setInterval('関数名',1000);
#サンプルコード
以上を踏まえてできたコードがこちら。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sample</title>
<style>
</style>
<script>
function showClock() {
let nowTime = new Date();
let nowHour = nowTime.getHours();
let nowMin = nowTime.getMinutes();
let nowSec = nowTime.getSeconds();
let msg = "現在時刻：" + nowHour + ":" + nowMin + ":" + nowSec;
document.getElementById("realtime").innerHTML = msg;
}
setInterval('showClock()',1000);
</script>
</head>
<body>
<p id="realtime"></p>
</body>
</html>
実行結果
23:7:35よりは23:07:35の方が見やすく、デジタル時計としては常に2桁で表示させたい。そのコードを紹介する。
常に2桁で表示するコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sample</title>
<style>
</style>
<script>
function twoDigit(num) {
let ret;
if( num < 10 )
ret = "0" + num;
else
ret = num;
return ret;
}
function showClock() {
let nowTime = new Date();
let nowHour = twoDigit( nowTime.getHours() );
let nowMin = twoDigit( nowTime.getMinutes() );
let nowSec = twoDigit( nowTime.getSeconds() );
let msg = "現在時刻：" + nowHour + ":" + nowMin + ":" + nowSec;
document.getElementById("realtime").innerHTML = msg;
}
setInterval('showClock()',1000);
</script>
</head>
<body>
<p id="realtime"></p>
</body>
</html>
実行結果
