プログラムで現在の時刻を表示する

dongfan243


この間子供と風呂に入っていた時
体が温まったので上がろうと思い
同時に二人を拭くのは面倒なのでまず先に一番上の娘（リコ３歳）が先に浴槽からシャワーゾーンに上げ、タオルで拭いていた。
下の息子（ガク１歳半）には浴槽で顔を赤くして待っている。
人間が一度に処理できることは限られているんだ、わかってくれ
という意思を込めた目で息子を見守りながら娘を拭いていると

嫁が浴槽のお湯抜いといてとのこと

俺が浴槽の栓を抜いた。
ゴボゴボと音を立てて水量が減っていく。

気づくと娘が何やら慌てている。
「たいへん！！たいへん！ガクちゃんがいなくなっちゃう、ガクちゃんたいへんになっちゃう！！」
娘は泣きそうな顔で何かを俺に求めている。
おぉそうか
俺は娘に説明した
「ガクちゃんはいなくならないよ。この穴には（浴槽の栓）ガクちゃんは入れないからね」
娘はこの穴に息子が吸い込まれてしまうと思っているらしい

しかし説明も全く通じず
息子の手を握って助けようとしている
さながらタイタニックだ

純粋無垢だなと思うと同時に
人間の一番大事な
助けたいという機能は
初期から搭載されているんだなと理解した

大事なものは一番最初から持っている。
しかし大人になるにつれ知識と経験がつくと大事な気持ちの部分が覆い隠されてだんだんと無機質になる。
子供からは本当に学べるから面白い。


さて本題
プログラムで現在の時刻を表示する



プログラミングが最近面白いので色々作っているんだけど
友達の勧めにより学んだことをさらに自分で整理してみようと思った。

クリエイターは作ってなんぼだ。文章を書くのも平たく言ってしまえば作るに分類されると思う。
このページの対象は
HTMLとCSSとJavaScriptが少し書ける人です


コード

<!DOCTYPT html>
<html>
    <head>
        <meta charset="utf-8">
        <title>世界時計</title>
        <script>
            //時計の表示
            function clock(){
                //現在の日時
                var now = new Date();
                
                
                //時間の取得
                var hour = now.getHours();
                var minute = now.getMinutes();
                var secound = now.getSeconds();

                
                console.log(secound);
                
                //時間表示用の要素の取得
                var timeElement = document.getElementById("time");
                //時間をセット
                timeElement.innerHTML = hour+":"+minute+":"+secound;
            }
        </script>
        <style>
            #clock {
                font-family: "Courier New";
                background-color: #cccccc ;
                border: solid #999999 ;
                color: #000000 ;
                width:300px;
                padding: 10px;
            }
            #time {
                font-size: 42px;
            }
        </style>
    </head>
    <body onload="clock()">
        <div id="clock">
           <img src="src/worldmap.jpg">
           <div id="time">--:--:--</div>
        </div>
    </body>
</html>


これね。
俺はとにかく短い時間で作れるもんが好きだし。スキルもないので（制作期間が長いとモチベが続かない）

参考は


これを図書館で借りてきたのね。それを作っただけね

HTMLとCSS

<!DOCTYPT html>
<html>
    <head>
        <meta charset="utf-8">
        <title>世界時計</title>
        <style>
            #clock {
                font-family: "Courier New";
                background-color: #cccccc ;
                border: solid #999999 ;
                color: #000000 ;
                width:300px;
                padding: 10px;
            }
            #time {
                font-size: 42px;
            }
        </style>
    </head>
    <body onload="clock()">
        <div id="clock">
           <img src="src/worldmap.jpg">
           <div id="time">--:--:--</div>
        </div>
    </body>
</html>

imgタグの画像はなくても大丈夫
headタグの中にstyleタグを入れて書くのは
自分の頭の中でパッと思いついた時に便利。別のファイルを作るのってめんどい。


JavaScript

ジェーエスね
俺はいまだにこの言葉を公共の場で使うのを戸惑っている。

<script>
            //時計の表示
            function clock(){
                //現在の日時
                var now = new Date();
                
                
                //時間の取得
                var hour = now.getHours();
                var minute = now.getMinutes();
                var secound = now.getSeconds();

                
                console.log(secound);
                
                //時間表示用の要素の取得
                var timeElement = document.getElementById("time");
                //時間をセット
                timeElement.innerHTML = hour+":"+minute+":"+secound;
            }
        </script>


関数clock の作成

時計を表示する関数clockを作成します。引数も値も返さない関数は次のように定義

function 関数名(){
　処理
}


現在の日時を取得

現在の日時はDateオブジェクトを使って取得できるよ
JSが最初から持っている魔法みたいな

var now = new Date();

変数nowに　new Date()を代入

ちなみにこのnowをconsole.log()する
ファイア！

Mon May 15 2023 11:48:33 GMT+0900 (日本標準時)

こいつが出てくるわけね
これは俺がコンソールログ(以後コンソ)した時の時刻だから
当然あなたのPCでコンソした場合は別の値がでるよ
まぁこいつをそのまま画面表示しても良いんだけどね

よしじゃ一般の時計みたいにするには
00:00:00

時間：分：秒
だけにすれば良い

時、分、秒を取り出す

そうしたらこのDateオブジェクトから時、分、秒を取り出していく
そのメソッドはこれ

getHours()：時間を取り出すメソッド。0~23の値を返す
getMinutes()：分を取り出すメソッド。0~５9の値を返す
getSeconds()：秒を取り出すメソッド。0~59の値を返す


そのまんまえ
これをさっきのコンソで出した日時（変数now）に.(ピリオド)繋げると
現在の時、分、秒を取り出すことができる

今回は変数hour,minute,secondで定義する

                var hour = now.getHours();
                var minute = now.getMinutes();
                var secound = now.getSeconds();


例えば 変数hour をコンソすると
11が出てくる
他のは略

ID「time」のDIVタグをとりだす

HTMLで現在の時刻を表示するために記述したDIVタグをdocument.getElementByIdメソッドを使って取り出す
こいつは取り出したい要素（タグ）のIDを渡すとDOM要素として取得できるメソッド。

DOM要素 = document.getElementByID("ID")


今回はID 「time」　のDIVタグを取り出したいから
こうなる

DOM要素　 = document.getElementByID("time");


そしてこのDOM要素を変数に入れておく
名前をtimeElementとしておこう

var timeElement = document.getElementByID("time");

これでtimeElementを使って ID t「time」のDIVタグにアクセスできる


ID「time」のDIVタグに時間を書き込む

<body onload="clock()">
        <div id="clock">
           <img src="src/worldmap.jpg">
           <div id="time">--:--:--</div>
        </div>

--:--:--の部分に時刻をぶち込む

DOM要素のテキスト部分はinnerHTMLプロパティに文字列を代入すると書き換えられる。

DOM要素.innnerHTML = 書き換えたい文字列;

変数timeElementのinnerHTMLプロパティに現在の時間であるhour,min,secを『時：分：秒』形式で代入したい
「+」の演算子を使用して繋げる

timeElement.innerHTML = hour+":"+minute+":"+secound;


最後にonLoadイベントでページを読み込んだタイミングで関数clockを実行

作成した関数clockは呼び出されなければ実行されない。
そこで、ページが読み込まれた時に発生するonLoadイベントをBODYタグ内に記述することにより関数clockを呼び出す。

onLoad = "関数"
//onLoadで関数clockを呼び出し
<body onload="clock()">
        <div id="clock">
           <img src="src/worldmap.jpg">
           <div id="time">--:--:--</div>
        </div>
    </body>

別にonloadでもonLoadでも変わりなかったです。


最後に

最初はとりあえず書いてみるかと思ってましたが
圧倒的に自分の理解に役立つと思います。やってみるべし
ブログを見てもらうのは完全に副次的な産物だと思うな

この記事が気に入ったらサポートをしてみませんか？