JavaScript アロー関数で現在時刻をリアルタイムに表示する

2023年4月6日

環境
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>

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>

<!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>

<!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"」に現在時刻をリアルタイムに表示します。

JavaScript

Posted by arkgame

関連投稿: