HTML节日倒计时代码示例 - 如何用 JavaScript 实现倒计时功能 - 常规

下面是一个使用HTML和JavaScript制作的节日倒计时的示例：

<!DOCTYPE html>
<html>
<head>
    <title>节日倒计时</title>
    <style>
        #countdown {
            font-size: 30px;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <h1>节日倒计时</h1>
    <div id='countdown'></div>

    <script>
        // 设置目标日期
        var targetDate = new Date('2022-01-01');

        // 更新倒计时
        function updateCountdown() {
            var now = new Date();
            var difference = targetDate - now;

            // 计算天、小时、分钟和秒数
            var days = Math.floor(difference / (1000 * 60 * 60 * 24));
            var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((difference % (1000 * 60)) / 1000);

            // 更新倒计时显示
            document.getElementById('countdown').innerHTML = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒';

            // 每秒更新一次倒计时
            setTimeout(updateCountdown, 1000);
        }

        // 启动倒计时
        updateCountdown();
    </script>
</body>
</html>

这段代码会在页面上显示一个标题为'节日倒计时'的h1标签，以及一个id为'countdown'的div标签用于显示倒计时。JavaScript代码会在页面加载时启动倒计时，并每秒更新一次倒计时显示。你可以将'targetDate'变量修改为你想要的节日日期。