运行结果：

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.maxbox {width: 640px;height: 400px;margin: 200px auto;background-image: url(./3.jpg);background-size: 640px 400px;color: yellow;position: relative;}#tian {width: 57px;height: 32px;font-size: 26px;position: absolute;left: 66px;top: 27px;background-color: black;text-align: center;line-height: 32px;border-radius: 17px;}#shi {width: 38px;height: 32px;position: absolute;left: 210px;top: 8px;font-size: 26px;background-color: black;border-radius: 50%;text-align: center;line-height: 32px;}#fen {width: 38px;height: 32px;position: absolute;left: 332px;top: 29px;font-size: 26px;background-color: black;border-radius: 50%;text-align: center;line-height: 32px;}#miao1 {width: 38px;height: 32px;position: absolute;left: 467px;top: 6px;font-size: 26px;background-color: black;border-radius: 50%;text-align: center;line-height: 32px;}</style>
</head>
<body><div class="maxbox"><div id="tian"></div><div id="shi"></div><div id="fen"></div><div id="miao1"></div></div><script>var box = document.querySelector('.maxbox');var tian = document.getElementById("tian");var shi = document.getElementById("shi");var fen = document.getElementById("fen");var maio1 = document.getElementById("maio1");function daojishi() {var nowdate = new Date(); //获取当前的时间var chunjie = new Date("2022 / 2 / 1 "); //获取春节的时间chunjie.setHours(0, 0)var num = chunjie.getTime() - nowdate.getTime(); //获取时间差//获取天数tiantime = Math.floor(num / 86400 / 1000);// 获取小时数xiaoshi = Math.floor((num % (86400 * 1000)) / 3600 / 1000)console.log(xiaoshi);xiaoshi = xiaoshi < 10 ? '0' + xiaoshi : xiaoshi;// 获取分钟数fenzhong = Math.floor((num % (86400 * 1000 * 3600)) / 60 / 1000) % 60console.log(fenzhong);fenzhong = fenzhong < 10 ? '0' + fenzhong : fenzhong;// 获取秒miao = Math.floor(num / 1000) % 60console.log(miao);miao = miao < 10 ? '0' + miao : miao;//给i为shi的sapn添加定时小时内容tian.innerHTML = `${tiantime}天`shi.innerHTML = `${xiaoshi}`fen.innerHTML = `${fenzhong}`miao1.innerHTML = `${miao}`}setInterval(daojishi, 1000)</script>
</body></html>

JavaScript实现春节倒计时相关推荐

PHP距离春节还剩多少天,2019年春节倒计时现在距离2019年春节还有多少天 - 中国万年历...
摘要 2019年春节倒计时现在距离2019年春节还有多少天2019年春节是在2月5号,农历大年三十.今天是8月30号,现在距离春节只有158天了!所以还没钱过年的朋友,这个中秋节国庆节假期就不要出去 ...
php 计算每年春节日期,动态显示2019年农历春节倒计时—2019年1月21日23时45分
动态显示2019年农历春节倒计时-2019年1月21日23时45分 2019年02月21日 20:15:24阅读数:489 实例实例 html> 春节倒计时 .HotDate{width: 1 ...
php活动倒计时代码,JavaScript实现活动倒计时效果的代码分享
这篇文章主要为大家详细介绍了基于JavaScript实现活动倒计时效果,距离活动时间还剩多少,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js倒计时效果的具体代码,供大家参考 ...
Javascript实现秒杀倒计时（时间与服务器时间同步）
转自: http://hi.baidu.com/flondon/item/04e89ece8f5ecf0d0ad93a98 Javascript实现秒杀倒计时(时间与服务器同步) 现在有很多网站都在做 ...
php2020春节倒计时,春节倒计时_2019_01_21
实例 html> Document #timer{width: 800px;height: 400px;background-color: blueviolet;margin: auto;col ...
php输出今年春节倒计时,2019年春节倒计时
实例 html> 春节倒计时 body{text-align: center} .time{ width: 800px; height: 300px; background-color: cor ...
JS中时间对象及其方法(春节倒计时练习)
目录一.春节倒计时二 .创建时间对象三.时间对象下的方法一.春节倒计时 <script>setInterval(function(){NYconunt('2023-01-21 00 ...
Html+Css+js实现春节倒计时效果
效果图 HTML部分 <!DOCTYPE html><head><meta charset="UTF-8"><meta name=&quo ...
距离2022年春节还有多少天？2022年春节倒计时天数在手机便签上设置
2022年的元旦很快就要到来了,不过大多数人期待的是下一个节日,这就是农历的春节.因为这时候上班族.学生们都要放假,回家和亲人团聚,一起共度春节,热热闹闹迎新年.那么2022年农历的春节是几月几日呢? ...

JavaScript实现春节倒计时

运行结果：

完整代码：

JavaScript实现春节倒计时相关推荐

最新文章

热门文章