效果：

HTML编码：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>新年快乐</title>
    <style>
        canvas {
            padding: 0;
            margin: 0;
        }
        
        body {
            overflow: hidden;
            margin: 0;
            background-image: url('https://gimg2.baidu/image_search/src=http%3A%2F%2Fwww.ayla%2Fassets%2Fblt8947f26905c0f94e%2FCSDN.jpg&refer=http%3A%2F%2Fwww.ayla&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643517927&t=77c836c02ff00e1906d2c826b82c85e8');
            background-repeat: no-repeat;
            background-size: 70%;
            background-position-x: 50%;
        }
        
        h1 {
            position: fixed;
            left: 0;
            top: 50%;
            width: 100%;
            text-align: center;
            transform: translateY(-50%);
            font-family: '行楷', cursive;
            font-size: 60px;
            color: black;
            padding: 0 20px;
        }
        
        h1 span {
            position: fixed;
            left: 0;
            width: 100%;
            text-align: center;
            margin-top: 20px;
            font-size: 5rem;
            color: red;
        }
    </style>
</head>

<body>
    <h1 id="h1"></h1>
    <script>
        window.onload = function starttime() {
            time(h1, '2022/1/1');
            ptimer = setTimeout(starttime, 1000); // 添加计时器
        }

        function time(obj, futimg) {
            var nowtime = new Date().getTime(); // 现在时间转换为时间戳
            var futruetime = new Date(futimg).getTime(); // 未来时间转换为时间戳
            var msec = futruetime - nowtime; // 毫秒 未来时间-现在时间
            var time = (msec / 1000); // 毫秒/1000
            var day = parseInt(time / 86400); // 天  24*60*60*1000
            var hour = parseInt(time / 3600) - 24 * day; // 小时 60*60 总小时数-过去的小时数=现在的小时数
            var minute = parseInt(time % 3600 / 60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
            var second = parseInt(time % 60); // 以60秒为一整份 取余 剩下秒数
            obj.innerHTML = "<br>距离2022年还有：<br>" + day + "天" + hour + "小时" + minute + "分" + second + "秒" + "<br><span>新年快乐</span>"
        }
    </script>
    <audio autoplay="autoplay" src="http://music.163/song/media/outer/url?id=1851244378.mp3" id="song">
</audio>
</body>

</html>

 希望能给大家带来一定的欢乐，谢谢,新年快乐。

更多推荐

2022跨年代码(HTML·资源都是网上的可以直接使用)