僕とコード書いてWebページに時計やタイムスタンプを設置してよ!
今回は日付入りの1秒毎に更新される時計や最後に編集した日時を自動的に記録・表示するタイムスタンプを作ります．
本ページでは，有料サービスやライブラリ，CMS等のプログラム群は使用せず，
自作できるHTML, JavaScript, CSSのみを使用し，基本的な文法だけで構成することで，初心者に優しいページを目指しました．
  • 目次
現在日時
yyyy/MM/dd ( Ddd )
HH:mm:ss
まずは表示領域を記述します．bodyタグの中に上記コードを記述します．
div要素の中身(yyyy/...等)は記述してもしなくても動作に影響ありませんが， 初期状態で何も表示されない(div要素の大きさが0になり見えなくなる)ため，更新が反映されているかわかりづらいので入れています．
JavaScriptを記述します．body要素の終了タグ直前にscriptタグを書き，その中に記述します．
1行目: 画面が更新された時すぐに時計を表示したいため，関数を呼び出す
2行目: 1000ms毎に関数を呼び出し，時刻を更新
6行目: DATE変数に現在日時を代入
8行目: 現在日時表示領域を取得
13〜51行目: フォーマットを整える
53, 54行目: 各表示領域に日時を表示する
ここまでで1秒毎に日時が更新される時計が完成です．
時計の見た目をカスタマイズします．
上から順に，中央揃え，文字サイズ，文字色を指定しています．
色は「red」などのカラーネームでも指定できます．
以上，HTML, JavaScript, CSSのみで作る時計でした．
最終更新
yyyy/MM/dd ( Ddd )
HH:mm:ss
ファイルが最後に更新された日時を表示する領域を記述します．
bodyタグの中に上記コードを記述します．
div要素の中身(yyyy/...等)は記述してもしなくても動作に影響ありませんが， 初期状態で何も表示されない(div要素の大きさが0になり見えなくなる)ため，更新が反映されているかわかりづらいので入れています．
最終更新日時を取得・表示するコードです．
4行目で「document.lastModified」を指定することで，現在日時ではなく最後にファイルが編集された日時になります．
時計の見た目をカスタマイズします．
上から順に，中央揃え，文字サイズ，文字色を指定しています．
色は「red」などのカラーネームでも指定できます．
以上，HTML, JavaScript, CSSのみで作る最終更新日時のタイムスタンプでした．