一转眼，现在已经是金秋九月，时间过得可真快呀！相信小伙伴们一定想知道我们距离2023年还有多少天，那么今天我就与大家分享一下用js代码编写一个新年倒计时的效果吧。
（ 运行出的效果在最后一张图 ）
主要代码截图：
完整代码：
<!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>
body{
width: 100vw;
height: 100vh;
background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.51tietu.net%2F2019%2Fweimeitpian%2F20190714%2F20f3e674b7714c018d071b5dc559a434.jpg&refer=http%3A%2F%2Fimg2.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663913504&t=6aa7864c9cd176075613f65b5c35fe35');
（背景图片需要自己找呦，url放置图片路径）
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
main{
width: 500px;
height: 270px;
box-shadow: 0px 0px 10px white;
}
main h1{
text-align: center;
font-size: 45px;
color: white;
}
main div{
display: flex;
font-size: 25px;
width: 60%;
margin: 0 auto;
justify-content: space-between;
color: white;
}
</style>
</head>
<body>
<main>
<h1>新年倒计时</h1>
<div>
<p id="day">149</p><p>天</p>
<p id="hour">20</p><p>小时</p>
<p id="min">35</p><p>分钟</p>
<p id="sec">20</p><p>秒</p>
</div>
</main>
</body>
<script>
//1.获取元素
var d=document.querySelector('#day')
var h=document.querySelector('#hour')
var m=document.querySelector('#min')
var s=document.querySelector('#sec')
setInterval(function(){
//获取当前时间
var now=new Date()
//获取过年的时间
var yearDate=new Date('2023-1-21 00:00:00')
//获取当前距离1970 1.1的毫秒数
var nowS=now.getTime()
//获取过年距离1970 1.1的毫秒数
var yearS=yearDate.getTime()
// console.log(nowS,yearS);
//计算过年和当前相差的秒数
var numS=(yearS-nowS)/1000
//计算相差的天数
var day=Math.floor(numS/(24*60*60))
console.log(day);
//计算相差的小时
var hour=Math.floor(numS%(24*60*60)/(60*60))
console.log(hour);
//计算相差的分钟
var min=Math.floor(numS%(24*60*60)%(60*60)/60)
console.log(min);
//计算相差的秒
var sec=Math.floor(numS%(24*60*60)%(60*60)%60)
console.log(sec);
d.innerHTML=day
h.innerHTML=hour
m.innerHTML=min
s.innerHTML=sec
},1000)
</script>
</html>
2197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
