index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <main>
            <section>
                <h1>夏休みまで</h1><br>
                <p class="timer">あと<span id="day"></span>日<span id="hour"></span>時間<span id="min"></span>分<span id="sec"></span>秒です！</p>
            </section>
        </main>
        <footer>
            <script>
                "use strict";

                function countdown(due) {
                    const now = new Date();

                    const rest = due.getTime() - now.getTime();
                    const sec = Math.floor(rest / 1000) % 60;
                    const min = Math.floor(rest / 1000 / 60) % 60;
                    const hours = Math.floor(rest / 1000 / 60 / 60) % 24;
                    const day = Math.floor(rest / 1000 / 60 / 60 / 24);
                    const count = [day, hours, min, sec];

                    return count;
                }

                let goal = new Date(2022, 8, 3);

                function recalc() {
                    const counter = countdown(goal);
                    document.getElementById('day').textContent = counter[0];
                    document.getElementById('hour').textContent = counter[1];
                    document.getElementById('min').textContent = String(counter[2]).padStart(2, '0');
                    document.getElementById('sec').textContent = String(counter[3]).padStart(2, '0');
                    refresh();
                }

                function refresh() {
                    setTimeout(recalc, 1000);
                }

                recalc();

            </script>
        </footer> 
    </body>
</html>