一步步教你用js简单实现新年倒计时
更新时间：2022年12月23日 09:55:39 作者：sherlockkid7
一转眼已经腊月了,相信小伙伴们一定想知道我们距离2023新年还有多少天,下面这篇文章主要给大家介绍了关于如何一步步教你用js简单实现新年倒计时的相关资料,需要的朋友可以参考下
前言
2022年已经接近尾声了，马上又是新的一年。每天都数着日子，期待放假，回家过年了。今天来简单实现一个倒计时功能，能够实时看到还有多少天就过年了。
具体实现
1. 画红灯笼
为了增加一些快过年的喜庆氛围，因此使用css实现了两个红灯笼展示到页面上。
灯笼分成4个部分组成，灯笼顶部、灯笼主体、灯笼底部、灯笼穗。
<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设置黄色的背景，奇数的li设置红色的背景，并设置一个左右晃动的动画。整个灯笼也需要加上这个动画，实现在风中摇曳的效果。
@keyframes wobble {
0%,
100% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
}2. 实现新年倒计时效果
a. 首先获取页面中展示倒计时天数、小时数、分钟数、秒数的各个元素。
b. 计算剩余时间
获取2023年除夕（1月21号）的时间戳、以及当前日期的时间戳，两个时间戳相减，得到剩余的时间，根据这个时间计算有多少天、多少小时、多少分钟、多少秒，再把计算出的相应数值展示到页面上。（ps: 当剩余时间为0或者小于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. 实现雪花纷飞的场景
根据上一篇文章《给南方的冬季，来一场纷纷扬扬的大雪》，实现下雪，突现瑞雪兆丰年的寓意
最终的效果展示
总结
到此这篇关于用js简单实现新年倒计时的文章就介绍到这了,更多相关js实现新年倒计时内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了JavaScript调用C语言的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了JS动态修改图片的URL（src）的方法,涉及javascript操作图片src属性的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
本文给大家汇总介绍了javascript格式化日期时间的几种常用方法，个人对最后一种个性化输出时间比较有兴趣，基本上只要项目中能用到都是使用这种，推荐给小伙伴们。2015-10-10
这篇文章主要帮助大家理解学习javascript封装，通过封装可以强制实施信息隐藏，本文为大家分析了封装的利弊，感兴趣的小伙伴们可以参考一下2016-02-02
下面小编就为大家带来一篇confirm确认对话框的实现方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
JS类中定义原型方法的两种实现的区别...2007-03-03
这篇文章主要介绍了js脚本中执行java后台代码方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
JavaScript事件的默认行为指浏览器自动执行的操作,如链接跳转或表单提交,阻止这些行为可以使用event.preventDefault()、return false或event.returnValue属性,event.stopPropagation()用于阻止事件传播,不直接阻止默认行为,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了Javascript for in的缺陷总结的相关资料,需要的朋友可以参考下2017-02-02
对前端工程师来说,跨浏览器的兼容性问题一直是最头疼的,测试一个小小的东西,就要打开N个浏览器,然后比较来比较去,记录个浏览器的数据,比较不同,实在是麻烦.2010-03-03
最新评论