html动态新年2021网页代码

在这个特别的新年里，让我们来制作一个动态的网页来迎接2021年的到来吧！

html动态新年2021网页代码

我们需要利用HTML来构建这个页面，其中包含了许多元素和代码，下面是我们所需要用到的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <Meta charset="UTF-8">
    <title>2021新年快乐！</title>
    <style>
        body {
            background-color: #000;
            color: #fff;
            font-family: Arial,sans-serif;
            text-align: center;
        }
        
        h1 {
            font-size: 3em;
            margin-top: 100px;
        }
        
        .countdown {
            font-size: 2em;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <h1>祝大家2021年快乐！</h1>
    <div class="countdown"></div>
    
    <script>
        var countDownDate = new Date("Jan 1,2021 00:00:00").getTime();

        var x = setInterval(function() {

        var Now = new Date().getTime();

        var distance = countDownDate - Now;

        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        document.querySelector(".countdown").innerHTML = days + "天 " + hours + "小时 "
        + minutes + "分钟 " + seconds + "秒 ";

        if (distance < 0) {
            clearInterval(x);
            document.querySelector(".countdown").innerHTML = "新年快乐！";
        }
        },1000);
    </script>
</body>
</html>

在这个网页中，我们使用了一个JavaScript的函数来实现一个倒计时的功能，计算距离2021年1月1日的时间，并且实时的更新页面上的数字。我们还设置了一些样式来美化网页，并且增加了一些元素，例如标题和倒计时的部分。

通过使用这些HTML代码和JavaScript的函数，我们成功的制作出了一个动态的网页来迎接2021年的到来！希望大家也能够通过这些代码以及自己的创意来制作出更加炫酷的网页，让我们一起迎接新的一年！

html动态新年2021网页代码

相关推荐