ジャバスクリプトの3

時間を表示しよう

時計のように時間を変えよう

時計なんだから時間を進めたい。
そんなときは次のようにします。

"aaaaa"

(枠の色はこのページのcssによるものだから気にしないで)

    <h1 id="id5">"aaaaa"</h1>
    <script>
    time1();
        
    function time1(){
        let now = new Date();
        document.getElementById("id5").innerHTML = now.toLocaleTimeString();
    }
    setInterval('time1()',1000);
    </script>  
setInterval('time1()',1000);
というのは、1000ミリ秒ということです。ミリは1000分の1といういみです。1000分の1×1000、つまり1秒に1回tome1()というインスタンスを呼び出せという命令です。
最初から見ると、まず time1 をしなさいと書いてあり、
次に time1 の内容が書いてある。
そして最後に、1秒ごとに time1 を繰り返せと書いてあるのです。 こういうのはゲームに使えそうですね

時計のように時間を変えよう 2

aaaa

このプログラムを変えて、時間で変化するようにしてみよう。

    <h1 id="id6">aaaa</h1>
    <script>
    time2();   
    function time2() {
        let now2 = new Date();      
        let year6 = now2.getFullYear();
        let month6 = now2.getMonth()+1; //1を足すこと
        let day6 = now2.getDate();
        let hour6 = now2.getHours();
        let min6 = now2.getMinutes();
        let sec6 = now2.getSeconds();
        let s = year6 + "年" + month6 + "月" + day6 + "日" + hour6 + "時" + min6 + "分" + sec6 + "秒";
        document.getElementById("id6").innerHTML = s ;
    }   
    </script>  
    

さあどうしましょう。
最後のほうのどこかに

    setInterval('time2()',1000); 
    
を加えれば良いですね。
そう、最後の</script> の直前に書くのです。
それなら、デジタル時計でなくアナル具時計のように表示したい、それはキャンバスを学習するまでお楽しみになります。

sub1.html へのリンク ←これができあがり資料
b.zip へのリンク←これを解凍すればほぼできあがり
次の問題へ進む