こんにちは!セミマサです。
今回は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関数を繰り返し実行します。
おわりに
無事動くものが作れました。