【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>

</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;
  }
}

.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();