使用JavaScript和CSS实现新年倒计时与节日特效
本文详细介绍如何利用JavaScript和CSS实现一个简单的新年倒计时网页。通过CSS绘制红灯笼并添加摇曳动画，利用JS计算除夕剩余时间并实时更新显示，同时结合前文思路实现雪花飘落效果，营造浓厚的节日氛围。
前言
2022年已近尾声，新的一年即将到来。人们每天都在期盼假期和回家过年的时刻。本文将演示如何简单实现一个实时倒计时功能，让你直观地看到距离过年还有多少天。
具体实现
1. 绘制红灯笼
为了营造喜庆的新年氛围，我们使用CSS在页面上绘制了两个红灯笼。
灯笼由四个部分组成：顶部、主体、底部以及灯穗。
<div class="lantern">
<div class="lantern-top"></div>
<div class="lantern-inner">
福
</div>
<div class="lantern-bottom"></div>
<ul class="ribbons">
<li></li>
...
</ul>
</div>灯笼的顶部和底部采用黄色长方形设计，并通过设置不同方向的圆角，使形状更加圆润。
.lantern-top,
.lantern-bottom {
margin: 0 auto;
position: relative;
width: 25%;
height: 7%;
background-color: #ffd700;
z-index: 11;
}
.lantern-top {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}灯笼主体是一个宽高相等的正方形，利用border-radius属性设置圆角，使其看起来圆润饱满。同时，使用box-shadow属性添加阴影，模拟灯笼发光的效果。
.lantern-inner {
width: 50%;
height: 50%;
margin: 0 auto;
position: relative;
font-size: 60px;
color: #ffd700;
border-radius: 40px;
box-shadow: 0px 0px 206px 34px rgba(250, 108, 0, 1);
background-color: #f00;
display: flex;
justify-content: center;
align-items: center;
z-index: 20;
}灯穗由10个红黄相间的长条组成。偶数项的li元素设置黄色背景，奇数项设置红色背景，并应用左右摇摆的动画。整个灯笼也应用此动画，呈现出风中摇曳的效果。
@keyframes wobble {
0%,
100% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
}2. 实现新年倒计时效果
a. 首先，获取页面中用于展示天数、小时数、分钟数和秒数的各个DOM元素。
b. 计算剩余时间
获取2023年除夕（1月21日）的时间戳以及当前日期的时间戳，两者相减得到剩余时间。根据剩余时间计算出对应的天、小时、分钟和秒数，并将数值更新到页面上。（注意：当剩余时间为0或负数时，不再显示时间，而是直接显示“新年快乐”字样）。
c. 设置定时器，每秒执行一次时间计算函数，实现时间的实时更新。当剩余时间小于等于1秒时，清除定时器，停止计算。
const countText = document.querySelector('.count-down')
const d = document.querySelector('.days');
const h = document.querySelector('.hours');
const m = document.querySelector('.minutes');
const s = document.querySelector('.seconds');
function getTrueNumber(num) {
return num < 10 ? "0" + num : num;
}
function calculateRemainingTime() {
const comingYear = new Date().getFullYear() + 1;
const comingDate = new Date(`Jan 21, ${comingYear} 00:00:00`);
const now = new Date();
const remainingTime = comingDate.getTime() - now.getTime();
const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const mins = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
const secs = Math.floor((remainingTime % (1000 * 60)) / 1000);
d.innerHTML = getTrueNumber(days);
h.innerHTML = getTrueNumber(hours);
m.innerHTML = getTrueNumber(mins);
s.innerHTML = getTrueNumber(secs);
if(remainingTime <= 0){
countText.innerHTML = '新年快乐'
}
return remainingTime;
}
function initCountdown() {
const interval = setInterval(() => {
const remainingTimeInMs = calculateRemainingTime();
if (remainingTimeInMs <= 1000) {
clearInterval(interval);
}
}, 1000);
}
initCountdown();3. 实现雪花纷飞的场景
参考前文《给南方的冬季，来一场纷纷扬扬的大雪》，实现下雪效果，寓意瑞雪兆丰年。
最终的效果展示
总结
至此，关于使用JavaScript简单实现新年倒计时的介绍就到这里。更多关于JS实现新年倒计时的内容，欢迎搜索本站往期文章或继续浏览相关文章。希望大家以后多多支持本站！
js-cookie 安装与基础用法：set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目：制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式：设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件？
2026-11-05 09:37:58