前端 javaScript 新年倒计时

实现思路：

利用当前时间的毫秒数与新年时间的毫秒数对比实现倒计时

封装了3个相对独立的过滤器配合使用

更换时间可以直接改

平安夜倒计时：const ms2023 = new Date(2023,11,24,0,0,0);
圣诞节倒计时：const ms2023 = new Date(2023,11,25,0,0,0);
元旦倒计时：const ms2023 = new Date(2023,0,1,0,0,0);

源码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div {width: 500px;height: 300px;background-color: pink;margin: 100px auto 0;text-align: center;line-height: 100px;border-radius: 100px;display: flex;justify-content: center;align-items: center;font-size: 28px;color: #fff;font-family: '黑体';}</style>
</head><body><div></div><script>const N = num => parseInt(num); // 转化为数字const D = num => num < 10 ? '0' + num : num; // 小于10在前面补0const DN = num => D(N(num)); // 两个过滤器叠加const ms2023 = new Date(2023, 0, 22, 0, 0, 0).getTime(); // 新年时间， getTime()获取毫秒数var divEle = document.querySelector('div');const Time = () => {const date = new Date().getTime(); // 当前时间的毫秒数let time = N(ms2023 - date) / 1000; // 时间差let day = N(time / (60 * 60 * 24)); // 天数time = N(time % (60 * 60 * 24));let hour = N(time / (60 * 60)); // 小时time = N(time % (60 * 60));let min = N(time / 60); // 分钟let sec = N(time % 60); // 秒数divEle.innerText = `新年倒计时：${DN(day)}天${DN(hour)}时${DN(min)}分${DN(sec)}秒`; // 利用模板字符串生成setInterval(Time,1000);}Time()</script>
</body></html>

前端 javaScript 新年倒计时相关推荐

用 JavaScript 写一个新年倒计时
目录前言: 主题: 运行结果: 对应素材: 代码实现思路: 运行代码: 春节的由来: 总结: 前言: 在春节即将到来,钟声即将响起,焰火即将燃起的日子里,本篇文章带着祝福先送去给你.愿你在新的一年里 ...
HTML5七夕情人节表白网页制作【新年倒计时-红色雪花】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML+CSS+JavaScript计时器实现新年倒计时
今天我们距离2021年春节还有多久呢?是不是很想知道~那我们用代码来写一写,看看到底是多久! HTML <!DOCTYPE html> <html lang="en&quo ...
html广告倒计时代码,javascript实现倒计时关闭广告
用Javascript实现倒计时关闭广告案例正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教在很多app与网页中,我们可以看到这样的广告:进入某个网站后,会弹出一个广告,然后广 ...
在C#后端处理一些结果然传给前端Javascript或是jQuery
在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
判断字符串正则_(重学前端 - JavaScript(模块一)) 14、引用类型之 RegExp (正则)(详述)...
上一篇文章介绍了 JavaScript 中的 Date 类型,从地理方面的原理知识开始入手,如果大家认真看过上一篇文章,相信 JavaScript 中的 Date 类型已经难不住大家了!!! 但是今天 ...
前端---JavaScript基础4
文章目录前端---JavaScript基础3 call&apply 原型链原型链操作例子:按钮组件封装:(类似于Bootstrsp里的按钮组件封装) 前端-JavaScript基础3 c ...
前端---JavaScript基础3
文章目录前端---JavaScript基础3 普通对象与函数对象原型及属性判断构造函数继承原型继承组合继承寄生组合式继承前端-JavaScript基础3 普通对象与函数对象原型及属性判 ...

前端 javaScript 新年倒计时

前端 javaScript 新年倒计时相关推荐

最新文章

热门文章