JavaScript アロー関数で現在時刻をリアルタイムに表示する
環境
Google Chrome 111.0.5563.147
Windows 10 Home 64bit
書式
1.指定idの要素の取得
document.getElementById('要素Id名’);
2.現在時刻の取得
let 変数名 = new Date();
3.アロー関数の定義
let アロー関数名 = () => {
処理コード
}
アロー関数名();
使用例
<!DOCTYPE html>
<html>
<body>
<p id="time"></p>
<button onclick="funA()">表示</button>
<script>
function funA() {
// 要素「id="time"」の取得
const time = document.getElementById('time');
// アロー関数
let showtime = () => {
// 現在時刻の取得
let today = new Date();
// 日本語形式に変換
time.innerHTML = today.toLocaleString("ja");
// call関数を実行
window.requestAnimationFrame(showtime);
}
// 関数を呼び出す
showtime();
}
</script>
</body>
</html>
実行結果
「表示」ボタンを押すと、要素「id="time"」に現在時刻をリアルタイムに表示します。