<!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>
</head>
<style>
div {
height: 80px;
width: 100px;
background-color: black;
text-align: center;
line-height: 80px;
color: white;
font-size: 30px;
float: left;
margin-left: 30px;
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<script>
var a = document.querySelector('.a');
var b = document.querySelector('.b');
var c = document.querySelector('.c');
times();
setInterval(times, 1000);
function times() {
var nowTime = new Date();
var inputTime = new Date('2023-10-9 16:00:00');
// 毫秒转为秒
var res = (inputTime - nowTime) / 1000;
// 小时
var h = parseInt(res / 60 / 60 % 24);
a.innerHTML = h < 10 ? '0' + h : h;
// 转分钟
var m = parseInt(res / 60 % 60);
b.innerHTML = m < 10 ? '0' + m : m;
// 转秒
var s = parseInt(res % 60);
c.innerHTML = s < 10 ? '0' + s : s
}
</script>
</body>
