![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回はプログラミングで文字時計をつくってみるッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
時計??
そんなことできるのかよ
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
もちろんッピ!
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>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回はこのコードを詳しく解説していくッピよ~
デジタル文字時計を作ってみよう
必要なもの
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
![メモ帳](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-01_611.jpg)
- メモ帳
- ブラウザ
が必要ッピ!
元になるコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
</script>
<!-- ここからHTMLのタグを入れよう! -->
<body onload="">
<!-- ここまで! -->
</body>
</html>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
↑のコードをコピーして勉強していくッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずは、時計を表示する場所をHTMLでつくるッピ!
<body onload="Day();Time();">
只今の時間:
<span id="Day"></span><span id="Time"></span>
とHTMLの部分に入力するッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
<body onload=”Day();Time();”>
只今の時刻:
<span id=”Day“></span>
<span id=”Time“></span>
という意味ッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/02/2022-02-24_tokei1.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
お こんな感じかな?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
<span>タグは表示されないんだな!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そうッピね!
あとからこの<span>タグに、
プログラムで日にちや時刻が追加していくッピ!
今はまだ何も表示できないんダッピよ~
<html>
<head></head>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
</script>
<!-- ここからHTMLのタグを入れよう! -->
<body onload="Day();Time();">
只今の時間:
<span id="Day"></span><span id="Time"></span>
<!-- ここまで! -->
</body>
</html>
日付を取得する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
つぎは日付を取得するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<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+"日";
}
と入力するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
function Day() {
let Now = new Date();
let Year = Now.getFullYear();
let Month = Now.getMonth()+1; // 0はじまりなのでプラス1
let Day = Now.getDate();
document.getElementById(“Day”).innerHTML =Year+”年”+Month+”月”+Day+”日”;
}
という意味になるッピよ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
【.getMonth】 +1
なんだな~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そのとおりッピ!
なぜか月だけが-1表示だっッピ・・・
これがうさタブもわからないッピネ!
![](https://janken.asotetu.work/wp-content/uploads/2022/02/2022-02-24_tokei2.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
お! 日付が表示されたぞ
<!-- 見えない部分 -->
<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>
時刻を取得する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次は時間を取得してみるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<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;
}
と入力してみるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
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;
}
という意味ッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2022/02/2022-02-24_tokei3.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
おおおお! 時間が出てきた!!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ムフフ!
これがプログラミングのちからッピ!
<!-- 見えない部分 -->
<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>
時計をリアルタイムに設定する
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
なあうさタブ
時計をずっと更新し続けるにはどうすればいいんだ??
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_困.png)
さっきのプログラムだと時計が止まったままでさ~
こんなんじゃ、ゼンゼン時計にならないよ・・・
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
それなら
setInterval();
関数を使うッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
setInterval関数??
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
この関数をセッティングすることで、
決まった秒数後にプログラムを読み出す
ことができるッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<script></script>のあいだの最後に
setInterval('Time()',1000);
と入力してみるッピ♪
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
setInterval(‘Time()‘,1000);
という意味になるッピネ!
![](https://janken.asotetu.work/wp-content/uploads/2022/02/2022-02-24_tokei3.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
できた~!
全体のコードの確認
<!-- 見えない部分 -->
<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()で秒数を取得
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
上手くできたッピか?
これからも色んなゲーム作りやプログラムの解説をしていくッピ!
次回も楽しみにしているッピよ~~!