Javascriptでホームページに日付と時刻を表示する

(2023-10-18 初稿 - )

pythonで簡易なWeb Serverを立ち上げた。

• PythonでWeb Serverを立ち上げる - ひゃまだのblog

その際に、ホームページに日付と時刻を表示し、時刻をリアルタイムで変化させようと思ったが、結構難しかったので、自分用のメモ。

なお、筆者は、Webページの作成やjavascriptはまったくの素人なのであしからず…

日付の表示

まずは、今日の日付を表示する。

こちらは、日付が変わる頃に閲覧していなければ、変更する必要がないので、動的な変化は考えていない。

コメント化してあるけど、document.write(text);ならば、ページの流れで実行後に書き込む。

一方、document.getElementById("view_date").innerHTML = text; だと、id(view_date)のspan内に書き込む。

表示の日本語化は、week_jaのコメントを外して、textに年、月、日などを書き加えれば変更することができる。

<!-- 日付 javascript  -->
<p align="right"><span id="view_date"></span></p>
<script type="text/javascript">
    //今日の日付データを変数に格納
    //変数は"today"とする
    var today=new Date(); 

    //年・月・日・曜日を取得
    var year = today.getFullYear();
    var month = today.getMonth()+1;
    var week = today.getDay();
    var day = today.getDate();

    <!-- var week_ja= new Array("日","月","火","水","木","金","土"); -->
    var week_en= new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sut");
    var text = year + "-" + month + "-" + day + " (" + week_en[week] +")";
    //年・月・日・曜日を書き出す
    <!-- document.write(text); -->
    document.getElementById("view_date").innerHTML = text;
</script>

時刻の表示

続いて、時刻の表示。こちらは、1秒ごとに変化させるので、ちょっと難しい。

Time()関数を作って、setIntervalで1000ミリ秒、つまり1秒おきに更新する。

書き込む場所は、idで指定したspan内に書き込む。以下の例では、id="real-time"のspan。

<!-- <p>現在時刻は<span id="real-time"></span>です</p> -->
<script type="text/javascript">
    function Time() {
    var realTime = new Date();
    var hour = ('0' + realTime.getHours()).slice(-2);
    var minutes  = ('0' + realTime.getMinutes()).slice(-2);
    var seconds  = ('0' + realTime.getSeconds()).slice(-2);
    var text = hour + ":" + minutes + ":" + seconds;
        document.getElementById("real-time").innerHTML = text;
    }
    setInterval('Time()',1000);
</script>

なお、hour、minutes、secondsは、最初に0を加えて、ゼロパディングしている。

日付も時刻も、様々なサイトに例があるので、困ることはないと思う。

筆者は、javascriptに疎いので、どんな関数があるのかもわからず、作るのに結構苦労したよ。

皆さんの楽しいホームページ作りの一助になれば…

関連ページ

• ひゃまだのblogインデックス - ひゃまだのblog