<!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>
<link rel="stylesheet" href="../css/reset.css">
<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 id="box">
<div class="box">
<div id="box1"></div>
<div id="box2">天</div>
<div id="box3"></div>
<div id="box4">:</div>
<div id="box5"></div>
<div id="box6">:</div>
<div id="box7"></div>
</div>
</div>
<script>
// 先调用一次函数，防止刚刷新页面的时候没有时间
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>
扫一扫
697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
