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

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

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

デモサイト
ソースコード
おわりに

デモサイト

今回のデモサイトです。

ソースコード

HTML

<section>
    <div class="date-box">
        <h2 class="date-heading">現在日時</h2>
        <p id="date" class="date-text"></p>
        <p id="time" class="date-text"></p>
    </div>
</section>

今回のHTMLです。

CSS

.date-box{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 32px 32px 32px;
}
.date-text{
  text-align: center;
  font-size: 1.2rem;
  padding: 8px;
}
.date-heading{
  font-size: 1.5rem;
  text-align: center;
}
@media screen and (max-width: 480px) {
  .date-heading{
    font-size: 1.2rem;
  }
  .date-text{
    font-size: 1rem;
  }
}

今回のCSSです。

JavaScript

const dateDisplay = ()=>{
    const weekArray = ["日","月","火","水","木","金","土"];
    let nowDate = new Date();
    let year = nowDate.getFullYear() + "年";
    let month = nowDate.getMonth() + 1 + "月";
    let day = nowDate.getDate() + "日";
    let dayofweek = "(" + weekArray[nowDate.getDay()] + "曜日)";
    let hour = nowDate.getHours() + "時";
    let minute = nowDate.getMinutes() + "分";
    let second = nowDate.getSeconds() + "秒";
    let date = year + month + day + dayofweek;
    let time = hour + minute + second;
    document.getElementById("date").textContent = date;
    document.getElementById("time").textContent = time;
    setTimeout("dateDisplay()",1000);
};
dateDisplay();

今回のスクリプトです。処理は全て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関数を繰り返し実行します。