JavaScript入門講座|デジタル文字時計を作ってみよう

JavaScript
アイキャッチ
うさタブ
うさタブ

今回はプログラミングで文字時計をつくってみるッピ!

ユウキ
ユウキ

時計??

そんなことできるのかよ

うさタブ
うさタブ

もちろんッピ!

JavaScriptを使えばそんなことお茶の子さいさいッピ!

さっそく勉強してみるッピよ~

この記事で学べること
  • 日付の取得
  • 時刻の表示
  • リアルタイム時計の作り方
  • 関数でのプログラムセットの作り方

見本のプログラム

只今の時間:

見本のコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
  function Day() {
    let Now = new Date();
    let Year = Now.getFullYear();
    let Month = Now.getMonth()+1;
    let Day = Now.getDate();
    document.getElementById("Day").innerHTML =Year+"年"+Month+"月"+Day+"日";
   }

  function Time() {
    let Now = new Date();
    let Hour = Now.getHours();
    let Min = Now.getMinutes();
    let Sec = Now.getSeconds();
    let Clock = Hour + ":" + Min + ":" + Sec;

    document.getElementById("Time").innerHTML =Clock;
   }

setInterval('Time()',1000);
</script>
<!-- ここからHTMLのタグを入れよう! -->

<body onload="Day();Time();">
只今の時間:
   <span id="Day"></span><span id="Time"></span>
<!-- ここまで! -->
</body>
</html>
うさタブ
うさタブ

今回はこのコードを詳しく解説していくッピよ~

デジタル文字時計を作ってみよう

必要なもの

うさタブ
うさタブ
メモ帳
  • メモ帳
  • ブラウザ

が必要ッピ!

元になるコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>



</script>
<!-- ここからHTMLのタグを入れよう! -->
<body onload="">



<!-- ここまで! -->
</body>
</html>
うさタブ
うさタブ

↑のコードをコピーして勉強していくッピよ~

うさタブ
うさタブ

まずは、時計を表示する場所をHTMLでつくるッピ!

<body onload="Day();Time();">
只今の時間:
   <span id="Day"></span><span id="Time"></span>

とHTMLの部分に入力するッピよ~

うさタブ
うさタブ

これは

<bodyHTMLが onload表示されたら=”Day()このプログラムを;Time()実行してください;”>
只今の時刻:
<span文字グループ作成 id 住所(id)は=”DayDayです“></span文字グループを終わります>
<span
id住所(id)は=”TimeTimeです“></span>

という意味ッピ!

ユウキ
ユウキ

お こんな感じかな?

ユウキ
ユウキ

<span>タグは表示されないんだな!

うさタブ
うさタブ

そうッピね!

あとからこの<span>タグに、
プログラムで日にち時刻が追加していくッピ!

今はまだ何も表示できないんダッピよ~

ここまでのコード
<html>
<head></head>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>

</script>
<!-- ここからHTMLのタグを入れよう! -->

<body onload="Day();Time();">
只今の時間:
   <span id="Day"></span><span id="Time"></span>
<!-- ここまで! -->
</body>
</html>

日付を取得する

うさタブ
うさタブ

つぎは日付を取得するッピ!

うさタブ
うさタブ

<script></script>のあいだに

  function Day() {
    let Now = new Date();
    let Year = Now.getFullYear();
    let Month = Now.getMonth()+1;
    let Day = Now.getDate();
    document.getElementById("Day").innerHTML =Year+"年"+Month+"月"+Day+"日";
   }

と入力するッピ!

うさタブ
うさタブ

これは

functionプログラムセット Day 名前はDay() {です
let変数 NowNowです = 中身に  new Date今の日付と時間を(); 取得します
let Year = Now.getFullYear今年の西暦の年を(); 取得します
let Month = Now.getMonth今月が何月か()取得します+1; // 0はじまりなのでプラス1
let Day = Now.getDate今日の日付を(); 取得します
documentページの中にある.getElement指定したByIdid(住所)(“Day”(id=”Day”)).innerHTML を書き換えてください=Year何年+”年”+Month何月+”月”+Day何日+”日”;
}

という意味になるッピよ~

ユウキ
ユウキ

.getMonth+1

なんだな~

うさタブ
うさタブ

そのとおりッピ!

なぜか月だけが-1表示だっッピ・・・

これがうさタブもわからないッピネ!

ユウキ
ユウキ

お! 日付が表示されたぞ

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
  function Day() {
    let Now = new Date();
    let Year = Now.getFullYear();
    let Month = Now.getMonth()+1;
    let Day = Now.getDate();
    document.getElementById("Day").innerHTML =Year+"年"+Month+"月"+Day+"日";
   }
</script>
<!-- ここからHTMLのタグを入れよう! -->

<body onload="Day();Time();">
只今の時間:
   <span id="Day"></span><span id="Time"></span>
<!-- ここまで! -->
</body>
</html>

時刻を取得する

うさタブ
うさタブ

次は時間を取得してみるッピ!

うさタブ
うさタブ

<script></script>のあいだに


  function Time() {
    let Now = new Date();
    let Hour = Now.getHours();
    let Min = Now.getMinutes();
    let Sec = Now.getSeconds();
    let Clock = Hour + ":" + Min + ":" + Sec;

    document.getElementById("Time").innerHTML =Clock;
   }

と入力してみるッピ!

うさタブ
うさタブ

これは

functionプログラムセット Time() timeです{
let変数 Nownow を作成 = 中身に  new Date今日の日付を(); 取得します
let Hour = Now.getHours今の時刻を(); 取得します
let Min = Now.getMinutes今の分数を ();取得します
let Sec = Now.getSeconds今の秒数を (); 取得します
let Clock = Hour時刻 + “:” + Min分数 + “:” + Sec秒数;
document.getElement指定した場所ByIdid=住所(“Time”).innerHTML書き換えてください =Clock現在の時刻へ;
}

という意味ッピよ~

ユウキ
ユウキ

おおおお! 時間が出てきた!!

うさタブ
うさタブ

ムフフ!

これがプログラミングのちからッピ!

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
  function Day() {
    let Now = new Date();
    let Year = Now.getFullYear();
    let Month = Now.getMonth()+1;
    let Day = Now.getDate();
    document.getElementById("Day").innerHTML =Year+"年"+Month+"月"+Day+"日";
   }

  function Time() {
    let Now = new Date();
    let Hour = Now.getHours();
    let Min = Now.getMinutes();
    let Sec = Now.getSeconds();
    let Clock = Hour + ":" + Min + ":" + Sec;

    document.getElementById("Time").innerHTML =Clock;
   }


</script>
<!-- ここからHTMLのタグを入れよう! -->

<body onload="Day();Time();">
只今の時間:
   <span id="Day"></span><span id="Time"></span>
<!-- ここまで! -->
</body>
</html>

時計をリアルタイムに設定する

ユウキ
ユウキ

なあうさタブ

時計をずっと更新し続けるにはどうすればいいんだ??

ユウキ
ユウキ

さっきのプログラムだと時計が止まったままでさ~

こんなんじゃ、ゼンゼン時計にならないよ・・・

うさタブ
うさタブ

それなら

setInterval();

関数を使うッピ!

ユウキ
ユウキ

setInterval関数??

うさタブ
うさタブ

この関数をセッティングすることで、

決まった秒数後にプログラムを読み出す

ことができるッピよ~

うさタブ
うさタブ

<script></script>のあいだの最後に

setInterval('Time()',1000);

と入力してみるッピ♪

うさタブ
うさタブ

これは

setIntervalプログラムを呼び出して(‘Time()このプログラムを‘,10001秒数に);

という意味になるッピネ!

ユウキ
ユウキ

できた~!

全体のコードの確認

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
  function Day() {
    let Now = new Date();
    let Year = Now.getFullYear();
    let Month = Now.getMonth()+1;
    let Day = Now.getDate();
    document.getElementById("Day").innerHTML =Year+"年"+Month+"月"+Day+"日";
   }

  function Time() {
    let Now = new Date();
    let Hour = Now.getHours();
    let Min = Now.getMinutes();
    let Sec = Now.getSeconds();
    let Clock = Hour + ":" + Min + ":" + Sec;

    document.getElementById("Time").innerHTML =Clock;
   }

setInterval('Time()',1000);
</script>
<!-- ここからHTMLのタグを入れよう! -->

<body onload="Day();Time();">
只今の時間:
   <span id="Day"></span><span id="Time"></span>
<!-- ここまで! -->
</body>
</html>
学習のまとめ
  • new Date();で日付の取得する
  • .getFullYear()で年を取得する
  • .getMonth()+1で月を取得する
  • .getDate()で日付を取得
  • .getHours()で時刻を取得
  • .getMinutes()で分数を取得
  • .getSeconds()で秒数を取得

うさタブ
うさタブ

上手くできたッピか?

これからも色んなゲーム作りやプログラムの解説をしていくッピ!

次回も楽しみにしているッピよ~~!

タイトルとURLをコピーしました