【JavaScript】日時をリアルタイム表示してみる

スポンサーリンク
日時リアルタイム表示アイキャッチ プログラミング

こんにちは!セミマサです。

今回はJavaScriptを使って現在の日時をリアルタイムに表示してみました。

デモサイト

今回のデモサイトです。

ソースコード

HTML

今回のHTMLです。

CSS

今回のCSSです。

JavaScript

今回のスクリプトです。処理は全てdateDisplay関数に押し込みました。

①:変数nowDateに現在の時刻を代入します。

②:getFullYearメソッドを用いて現在の年を取得し変数yearに代入します。

③:getMonthメソッドを用いて現在の月を取得して変数monthに代入します。1を加算しているのはgetMonthメソッドで取得する値が0から始まるからです (1月なら0、12月なら11が返ってくる) 。

④:getDateメソッドで現在の日を取得し変数dayに代入します。

⑤:getDayメソッドで曜日を取得します (日曜なら0、土曜なら6といったように数字で返ってきます) 。配列weekArrayに取得した数字を渡し、結果を変数dayofweekに代入します。

⑥:getHoursメソッドで現在の時を変数hourに代入します。

⑦:getMinutesメソッドで現在の分を変数minuteに代入します。

⑧:getSecondsメソッドで現在の秒を変数secondに代入します。

⑨:各変数を連結して表示します。

⑩:setTimeoutメソッドを使ってdateDisplay関数を繰り返し実行します。

おわりに

無事動くものが作れました。

タイトルとURLをコピーしました