js的倒计时定时器_js 倒计时软件-CSDN博客

本文链接：https://blog.csdn.net/m0_66039084/article/details/123577924

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#box {

width: 280px;

height: 60px;

margin: 100px auto;

background-color: red;

}

.box{

width: 270px;

height: 40px;

padding: 10px 10px;

/* background-color: aqua; */

}

.box>div{

float: left;

}

/* 选中.box下的div的奇数个 */

.box>div:nth-child(odd){

width: 50px;

height: 40px;

text-align: center;

line-height: 40px;

background-color: black;

color: aliceblue;

font-weight: bold;

font-size: 30px;

}

/* 选中.box下的div的偶数个 */

.box>div:nth-child(even){

width: 20px;

height: 40px;

text-align: center;

line-height: 40px;

}

</style>

</head>

<body>

</div>

// 先调用一次函数，防止刚刷新页面的时候没有时间

getTimer()

function getTimer(){

// 获取当前时间

var now = new Date();

// 设置一个时间

var Love = new Date('2022-5-21 17:20:00')

// 获取时间戳差

var time = Love-now

// 获得天数

var day = parseInt(time/1000/60/60/24)

// 获得小时

var hours =parseInt(time/1000/60/60)%24

// 获得的分钟

var minutes =parseInt(time/1000/60)%60

// 获得秒

var seconds =parseInt(time/1000)%60

// 判断如果小与10的时候前面加0

if(day<10){

day = '0'+day

}

if(hours<10){

hours = '0'+hours

}

if(minutes<10){

minutes = '0'+minutes

}

if(seconds<10){

seconds = '0'+seconds

}

// 通过标签id写入内容

box1.innerHTML = day

box3.innerHTML = hours

box5.innerHTML = minutes

box7.innerHTML = seconds

// 清除定时

clearInterval(getTimer)

}

// 设置定时1秒一执行

setInterval(getTimer,1000)

</script>

</body>

</html>