夏休み3日目 - 汚染、夏、自宅にて。

去年の夏休みは半分くらいをベッドの上で天井を眺めたり、ベッドの上で壁を眺めたりして過ごしてしまった。

このことを今でも結構後悔しているので、今年は夏休みの髄までしゃぶりにしゃぶりつくしたい。

夏休みを楽しむには、とりあえず「あとどれくらい夏休みが残っているか」を常に把握できるようにしておく必要がある。

ということで、夏休みの残り時間を常に表示してくれるサイトを作った。

夏休みタイマー

サイトとはいっても雑なHTMLと雑なJSだけのシンプルなサイトで、プログラミング初心者が世界に挨拶した後に作るサイトみたいな見た目だけど。

時間ができたらオシャレにCSSでデコりたいなぁ。チョー↑盛れてるアゲアゲな見た目にしたい。

需要があるかは知らないけど、一応HTMLとJSのソースコード貼っておきます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>なつやすみタイマー</title>
</head>
<body>
    <p id="nowDate"></p>
    <p id="elapsedDate"></p>
    <p id="leftDate"></p>
    <p id="nowAndLeftPercent"></p>

    <script type="text/javascript" src="index.js"></script>
</body>
</html>

index.js

let nowDateElm = document.getElementById('nowDate');
let elapsedDateElm = document.getElementById('elapsedDate');
let leftDateElm = document.getElementById('leftDate');
let nowAndLeftPercentElm = document.getElementById('nowAndLeftPercent');

function updateTimer() {
    const nowDate = new Date();

    const nowDateString = (nowDate.getMonth()+1) + "月 "
    + nowDate.getDate() + "日 "
    + nowDate.getHours() + "時 "
    + nowDate.getMinutes() + "分 "
    + nowDate.getSeconds() + "秒";

    nowDateElm.textContent = nowDateString;

    // 今日は夏休みの何日目かを計算
    const startDate = new Date(2021, 6, 27, 0, 0, 0, 0);
    const elapsedDays = Math.floor((nowDate - startDate) / (24*60*60*1000)) + 1;
    const elapsedHours = Math.floor(((nowDate - startDate) / (60*60*1000)) % 24);
    const elapsedMinutes = Math.floor(((nowDate - startDate) / (60*1000)) % 60);
    const elapsedSeconds = Math.floor(((nowDate - startDate) / 1000) % 60);

    const elapsedDateString = "今日は夏休み "
    + elapsedDays + "日目です。"
    + "（今日は"
    + elapsedHours + ":"
    + elapsedMinutes + ":"
    + elapsedSeconds
    + "が経過しました）"

    elapsedDateElm.textContent = elapsedDateString;

    // 夏休みの残り日数を計算
    const endDate = new Date(2021, 8, 17, 0, 0, 0, 0);
    const leftDays = Math.floor((endDate - nowDate) / (24*60*60*1000)) + 1;
    const leftHours = Math.floor(((endDate - nowDate) / (60*60*1000)) % 24);
    const leftMinutes = Math.floor(((endDate - nowDate) / (60*1000)) % 60);
    const leftSeconds = Math.floor(((endDate - nowDate) / 1000) % 60);

    const leftDateString = "夏休み終了まであと "
    + leftDays + "日 "
    + leftHours + ":"
    + leftMinutes + ":"
    + leftSeconds;

    leftDateElm.textContent = leftDateString;

    // 夏休みの残りパーセントを計算
    const allDate = endDate - startDate;

    const nowPercent = ((nowDate - startDate) / allDate) * 1000000;
    const leftPercent = ((endDate - nowDate) / allDate) * 1000000;

    const percentString = "現在夏休みの "
    + Math.round(nowPercent)/10000 + "% が終了しました。\n"
    + "残りは"
    + Math.round(leftPercent)/10000 + "% です。";

    nowAndLeftPercentElm.textContent = percentString;

}

setInterval(updateTimer, 50);