時間の表示だけのプログラムをやってみた【javascript】

javascriptにちょっとハマったので、勉強しながらいろんなもの作っていきます。

今回は、時間を表示するだけのプログラムをつくっていきます。

ガチのド素人なので、約束事とか書くべきこととかすべて吹っ飛ばして作りまーす。

ソースコード
感想

ソースコード

HTMLとかも含めたコードです。

メモ帳に張り付けて拡張子をHTMLにして保存すれば表示されますよ。

保存の際には名前はすべて半角の英数字にしないとうまく表示されないと思います。

<!DOCTYPE html> <!--HTMLで記述しますよーって意味です。-->
<html lang="ja"><!--//日本語でおｋ？-->
<head>
 <meta charset="UTF-8">
 <title>時計の表示やで</title>
</head>
<body>
 <div id="tokei"></div><!--ここまでHTML-->
  <script>

    //このsinjikokuを実行したら～｛から｝まで処理しまっせって意味です。
    function sinjikoku() {

      // 現在の日時をGET！
      const ima = new Date(); 


      // 時、分、秒をnew Date().getHours();でいただきます。
      const ji = ima.getHours();     
      const fun = ima.getMinutes();
      const byou = ima.getSeconds();


      // 時、分、秒が1桁の場合は0を追加。1が01となる。
      const mieruji = ji.toString().padStart(2, "0");
      const mierufun = fun.toString().padStart(2, "0");
      const mierubyou = byou.toString().padStart(2, "0");

      // 時計の要素を取得します。HTMLのIDに表示させるわけですね！
      const tokeiElement = document.getElementById("tokei");

      // 時計の要素に時刻を表示させまーす。
      tokeiElement.textContent = `${mieruji}:${mierufun}:${mierubyou}`;

      // 1秒後に更新しまーす。
      setInterval(sinjikoku, 1000);

    //この｝までの処理をしますよ。
    }

    // 時計を開始しまーす。
    sinjikoku();
  </script>
</body>
</html>

感想

一応ふざけたコメントも入れておいたので、わかりやすいかと思います。

実行すると、左上の方に時間だけ表示されます。

これをなんとかかんとかCSSやらなんやらで表示すると、それなりのデジタル時計に見えるようになるので、今度はそれを頑張ってみようと思います！