首页分享 HTML+CSS+JS新年倒计时(实时更新)

HTML+CSS+JS新年倒计时(实时更新)

来源：花匠小妙招时间：2024-11-15 13:59

大家好，今天给大家分享一篇用html+css+js实现新年倒计时的代码。
改编于https://www.bilibili.com/video/BV1EJ411471A?from=search&seid=18367221548830118604&spm_id_from=333.337.0.0
如有侵权还请速速联系。
效果图：

1，html结构，

<body><div class="container"><h2><span>Countdown to New Year</span><i id="year">NA</i></h2><div class="Countdown"><div id="day">NA</div><div id="hour">NA</div><div id="minute">NA</div><div id="second">NA</div></div></div></body> 123456789101112

2，css部分，这里主要用到了flex布局(可参考：https://www.runoob.com/w3cnote/flex-grammar.html)，一些定位和伪元素等等，图片素材下载于元气壁纸。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118

3，js部分，这里主要用到了JavaScript Date对象(可参考https://www.runoob.com/jsref/jsref-obj-date.html)，和一些时间的格式化。

123456789101112131415161718192021222324252627282930313233343536

其实还可以通过这些方法做很多事情记录时间等等，下面是我自己写的一个记录时间的小例子。
当然也可以加一些自己喜欢的东西在上面。
效果图：
记录时光

1，html结构

<div id="firstPage" class="bigbox"><div class="box"><div class="text">我们已经一起走过了</div><div class="time"><span id="day"></span><i>天</i><span id="hour"></span><i>小时</i><span id="minute"></span><i>分钟</i><span id="second"></span><i>秒</i></div></div></div> 123456789101112

2，css部分

.bigbox {width: 100%;height: 100vh;background-image: url(../img/bg1.jpg);background-size: cover;position: relative; } #firstPage .box {width: 800px;height: 320px;position: absolute;top: 50%;left: 50%;margin-top: -160px;margin-left: -400px;border: 10px solid white;color: #FFFFFF;font-size: 24px;text-align: center;font-weight: bold; } #firstPage .text {width: 800px;height: 100px;line-height: 100px;margin-top: 60px;font-size: 50px; } #firstPage .time {width: 800px;height: 100px;line-height: 100px;font-size: 50px; }

12345678910111213141516171819202122232425262728293031323334353637

3，js部分

//时间var countDate= new Date('Mar 23,2021 00:00:00').getTime();function newYear(){//new Date()为当前时间var now =new Date().getTime();gap = now-countDate;var second =1000;var minute = second*60;var hour = minute*60;var day= hour*24;//Math.floor(x)返回小于x的最大整数var d =Math.floor(gap/(day));var h=Math.floor((gap%(day))/(hour));var m=Math.floor((gap%(hour))/(minute));var s=Math.floor((gap%(minute))/second);//innerHTML返回的是标签内的 html内容，包含html标签。//innerText返回的是标签内的文本值，不包含html标签。document.getElementById("day").innerText=d;document.getElementById("hour").innerText=h;document.getElementById("minute").innerText=m;document.getElementById("second").innerText=s;}setInterval(function(){newYear()},1000)

1234567891011121314151617181920212223242526

感谢大家的浏览和支持！！！！！