JavaScript requestAnimationFrame()関数で現在時刻をリアルタイムに表示する
環境
Google Chrome 111.0.5563.147
Windows 10 Home 64bit
書式
window.requestAnimationFrame(callback)
callback
次の再描画でアニメーションを更新する時に呼び出す関数を指定します。コールバック関数は 1 個の引数 DOMHighResTimeStamp を受け取ります。
戻り値
long の整数値で、リクエスト ID、コールバックリスト内のエントリーを一意に識別するためのリクエスト ID を返します。
let 変数名 = new Date();
「date()」関数でスクリプトが読み込まれた時刻データを取得します。
変数名.toLocaleString(“ja");
「toLocaleString()」関数で日本向けのフォーマットに変換しています。
使用例
<!DOCTYPE html>
<html>
<body>
<p id="time"></p>
<button onclick="funA()">表示</button>
<script>
function funA() {
// 要素「id="time"」の取得
const time = document.getElementById('time');
// リアルタイム時間の取得関数
function showtime(){
// 現在時刻
let td = new Date();
// 日本語形式に変換
time.innerHTML = td.toLocaleString("ja");
// コールバック関数を実行
window.requestAnimationFrame(showtime);
};
// 関数を呼び出す
showtime();
}
</script>
</body>
</html>
実行結果
「表示」ボタンを押下すると、要素「id="time"」に現在時刻をリアルタイムに表示します。