【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做

原创

卓伊凡

发布于 2025-01-18 15:55:36

10200

代码可运行

文章被收录于专栏：其他相关技术其他相关技术

运行总次数：0

代码可运行

【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子

开发背景

由于看到C站有个任务是上传新年主题相关的代码可以+6分，为了这6分必须拼一下子，要知道C站挣6分是有多么难的，优雅草央千澈是要冲刺全国排名的人那必须去争取一下，ok我们废话不多说开始实战吧，本次开发技术栈采用html5+div+CSS+JavaScript，用html给写一个新年放烟花并且领取一个随机新年礼物的小代码供大家送给自己心上人礼物-为了完成C站的新年主题任务-优雅草央千澈-做一条关于新年的代码分享给你们，章节共计5篇。

本文还有个事情声明下，优雅草央千澈还是改名为优雅草卓伊凡，本身自己的笔名是卓伊凡，但是酷爱霹雳侠影中的角色央千澈，因此之前一直以央千澈为名字，但是随着目前人气的升高，不免这样会影响到偶像这个名字重名，让很多道友不小心搜到我，这样不太好，因此后续所有的文章均改名为卓伊凡。

章节

【01】完成新年倒计时页面-蛇年新年快乐倒计时

效果实时演示地址

https://happynewyear.youyacao.com/

gitee开源地址

https://gitee.com/youyacao/happynewyear

实战开发

养成好习惯，先建库-clone-本地

构思：

本代码主要想实现2个内容就可以了，我想了下，实现第一个是新年除夕夜倒计时，倒计时完成后，跳出来新年快乐（对应蛇年新年快乐的图），再然后点击新年快乐，领取我的蛇年专属礼物，这个礼物可以有好几个图标，然后做几个选项，用一个特效效果来表示这个礼物的生产过程，最终在弹出您的新年礼物，大概就是这样的构思。

功能点：

1，除夕夜新年倒计时，（大家可以自行设置） 2，倒计时到点后放烟花。 3，提示领取新年礼物。 4，一个随机的新年礼物伴随着动画出来。 5，为了防止作弊需要做个反作弊机制。

实战开发

进入vscode 建立第一个index.html

做一个倒计时先：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025年蛇年-新年倒计时-优雅草央千澈</title>
    <style>
        #countdown {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div id="countdown"></div>

    <script>
        // 设置目标日期为1月28日
        const targetDate = new Date(new Date().getFullYear(), 0, 28).getTime();

        // 更新倒计时的函数
        function updateCountdown() {
            const now = new Date().getTime();
            const distance = targetDate - now;

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

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

            // 如果倒计时结束，显示提示信息
            if (distance < 0) {
                clearInterval(countdownInterval);
                document.getElementById("countdown").innerHTML = "新年快乐！";
            }
        }

        // 每秒更新一次倒计时
        const countdownInterval = setInterval(updateCountdown, 1000);
    </script>
</body>
</html>

我们完成了新年倒计时，有点空白，优雅草央千澈决定加个背景图，AI生成一张图，

选择4：3的尺寸，暂时用可灵AI来生成一下图，

妈呀这不是太诡异了吗，重新组织了下措辞，然后再次生成，

满意，取这第四张，现在我们将这张图做成背景，养成习惯建立资源文件夹 assets\img\ ，加入背景

书写代码：

body {
            background-image: url('assets/img/bg.png');
            background-size: cover; /* 使背景图片覆盖整个页面 */
            background-position: center; /* 将背景图片居中 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            margin: 0; /* 去除默认的body边距 */
            height: 100vh; /* 使body高度占满整个视口 */
        }

不过我发现倒计时看不见了，

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025年蛇年-新年倒计时-优雅草央千澈</title>
    <style>
        body {
            background-image: url('assets/img/bg.png');
            background-size: cover; /* 使背景图片覆盖整个页面 */
            background-position: center; /* 将背景图片居中 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            margin: 0; /* 去除默认的body边距 */
            height: 100vh; /* 使body高度占满整个视口 */
            display: flex; /* 使用flex布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            font-family: 'Arial', sans-serif; /* 设置字体 */
        }

        #countdown {
            font-size: 48px; /* 增大字体 */
            font-weight: bold;
            text-align: center;
            color: #ffcc00; /* 选择一个显眼的颜色，类似时钟 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
            background-color: rgba(0, 0, 0, 0.5); /* 添加背景颜色，使文字更突出 */
            padding: 20px; /* 添加内边距 */
            border-radius: 10px; /* 添加圆角 */
        }
    </style>
</head>
<body>
    <div id="countdown"></div>

    <script>
        // 设置目标日期为1月28日
        const targetDate = new Date(new Date().getFullYear(), 0, 28).getTime();

        // 更新倒计时的函数
        function updateCountdown() {
            const now = new Date().getTime();
            const distance = targetDate - now;

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

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

            // 如果倒计时结束，显示提示信息
            if (distance < 0) {
                clearInterval(countdownInterval);
                document.getElementById("countdown").innerHTML = "新年快乐！";
            }
        }

        // 每秒更新一次倒计时
        const countdownInterval = setInterval(updateCountdown, 1000);
    </script>
</body>
</html>

这样看起来差不多了，文字我再修改下为2025年蛇年除夕夜倒计时这个主题文字加倒计时头部。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025年蛇年-新年倒计时-优雅草央千澈</title>
    <style>
        body {
            background-image: url('assets/img/bg.png');
            background-size: cover; /* 使背景图片覆盖整个页面 */
            background-position: center; /* 将背景图片居中 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            margin: 0; /* 去除默认的body边距 */
            height: 100vh; /* 使body高度占满整个视口 */
            display: flex; /* 使用flex布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            font-family: 'Arial', sans-serif; /* 设置字体 */
        }

        #countdown-container {
            text-align: center;
        }

        #countdown-title {
            font-size: 32px; /* 设置标题字体大小 */
            font-weight: bold;
            color: #ffcc00; /* 选择一个显眼的颜色，类似时钟 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
            margin-bottom: 20px; /* 添加底部外边距 */
        }

        #countdown {
            font-size: 48px; /* 增大字体 */
            font-weight: bold;
            text-align: center;
            color: #ffcc00; /* 选择一个显眼的颜色，类似时钟 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
            background-color: rgba(0, 0, 0, 0.5); /* 添加背景颜色，使文字更突出 */
            padding: 20px; /* 添加内边距 */
            border-radius: 10px; /* 添加圆角 */
        }
    </style>
</head>
<body>
    <div id="countdown-container">
        <div id="countdown-title">2025年蛇年除夕夜倒计时</div>
        <div id="countdown"></div>
    </div>

    <script>
        // 设置目标日期为1月28日
        const targetDate = new Date(new Date().getFullYear(), 0, 28).getTime();

        // 更新倒计时的函数
        function updateCountdown() {
            const now = new Date().getTime();
            const distance = targetDate - now;

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

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

            // 如果倒计时结束，显示提示信息
            if (distance < 0) {
                clearInterval(countdownInterval);
                document.getElementById("countdown").innerHTML = "新年快乐！";
            }
        }

        // 每秒更新一次倒计时
        const countdownInterval = setInterval(updateCountdown, 1000);
    </script>
</body>
</html>

稍微有点单调，我们在左下角和右下角加入小烟花吧，小烟花动态效果，这样看上去是活的。

然后我们再加入一个欢快的新年气氛音乐，至于音乐吗，因为避免版权问题，那就刚好了，卓伊凡是一位音乐人，避免版权问题，直接做一首（一位强大的程序员再加上AI魔法加上自己的乐感对音乐的理解，创作一首普普通通的新年歌还不是信手拈来），

新建sounds文件夹，加入happy new year.mp3 文件，再加入播放器代码，并且自动播放音乐。

@keyframes explode {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(2);
                opacity: 0.5;
            }
            100% {
                transform: scale(3);
                opacity: 0;
            }
        }

        #audio-player {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
            padding: 10px;
            border-radius: 10px;
            z-index: 2; /* 确保音乐播放器在烟花之上 */
        }

        #audio-player audio {
            width: 100%;
        }



          <div id="audio-player">
        <audio id="background-music" autoplay loop>
            <source src="assets/sounds/happy new year.mp3" type="audio/mpeg">
            您的浏览器不支持 audio 元素。
        </audio>
    </div>

半透明的播放器代码，html中使用 audio元素即可，非常简单，查看效果，非常棒！

发现音乐没有自动播放

自动播放音频在现代浏览器中受到严格的限制，以提升用户体验并减少不必要的干扰。通常，浏览器会阻止自动播放带有声音的音频，除非用户与页面进行了交互（例如点击页面）。为了确保音乐能够自动播放，可以采取以下几种方法：

静音自动播放：将音频设置为静音状态，这样可以绕过浏览器的自动播放限制。
用户交互触发：在用户与页面进行交互（如点击按钮）后播放音频。
使用 muted 属性：在 <audio> 标签中添加 muted 属性，允许音频静音自动播放。

因此改造下：发现加了muted 还是不得行，报错播放音乐时出错: NotAllowedError: play() failed because the user didn’t interact with the document first. {code: 0, name: ‘NotAllowedError’, message: “play() failed because the user didn’t interact with the document first.”}

既然如此我们就加上播放按钮吧，于是我们继续改造

我们把播放器放在新年倒计时的下方，并且播放器的高度限制为120px，给播放器一个宽度数值，播放器的宽度不能超过倒计时文字的宽度，并且为播放器增加播放按钮，增加上一首下一首按钮，

满意，并且可以播放音乐，本篇完成，喜欢就请关注点赞+收藏，优雅草卓伊凡-只肝干货

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度

【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做

【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做

【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子

开发背景

章节

效果实时演示地址

gitee开源地址

实战开发

构思：

功能点：

实战开发

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐