【JavaScript】(初心者向け)画面に現在日時を表示する

2021年8月3日 2021年8月5日

こんにちは！CODE CLUB965のKです！

今回は、初心者の方に向けてJavaScriptの雰囲気を知ってもらうためにサンプルのコードを書いていこうと思います。

HTML、CSS、JavaScriptが何か分かっていれば十分理解できるかと思います。

現在日時を表示する

それでは早速画面に時刻を表示するソースコードを見ていきましょう。

<!DOCTYPE html>
<html>
<head>
  <title>現在日時を表示します</title>
</head>
<body>
<script>
  dd = new Date();
  document.write(dd.toLocaleString());
</script>
</body>
</html>

これだけで以下のように現在日時を表示することができます。

現在日時を表示します

ただし、これは画面を表示した時の時刻になります。

これだけだと正直微妙ですよね。笑
毎回画面をリロードしないといけません。

次の例のように書けば、現在進行形で日時を表示でき、デジタル時計のようにできます。

<!DOCTYPE html>
<html>
<head>
  <title>現在日時を表示します</title>
<script>
  window.onload = function() {
    setInterval(function() {
      var dd = new Date();
      document.getElementById("sample").innerHTML = dd.toLocaleString();
    }, 1000);
  }
</script>
</head>
<body>
  <div id="sample"></div>
</body>
</html>

■出力結果

現在日時を表示します

このように1秒ごとに変化するものを表示することができます。

このような感じで、JavaScriptを使えば画面に動きを動きを付けることができます。

サンプルコードのようなものは調べればたくさんあるので、面白いと思ったらぜひ色々と試してみて下さい！

それでは、また！

Follow me!