<style>
div {
width: 400px;
height: 200px;
background-color: cornsilk;
}
span {
float: left;
margin-right: 10px;
background-color: black;
width: 50px;
height: 50px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<div class="a1">
<span class="h">1</span>
<span class="m">2</span>
<span class="s">3</span>
</div>
</body>
<script>
// 擷取元素
var hour = document.querySelector(".h");
var minute = document.querySelector(".m");
var second = document.querySelector(".s");
var inputTime = +new Date("2022-4-18 18:00:00"); //傳回的是使用者輸入時間總的毫秒數
conuntDown();
// 開啟定時器
setInterval(conuntDown, 1000); //每隔一秒重新整理一次
function conuntDown() {
var nowTime = +new Date(); // 傳回的是目前時間總的毫秒數
var times = (inputTime - nowTime) / 100; //time是剩餘時間總的秒數
var h = parseInt((times / 60 / 60) % 24);
h = h < 10 ? "0" + h : h;
hour.innerHTML = h;
var m = parseInt((times / 60) % 60);
m = m < 10 ? "0" + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60);
s = s < 10 ? "0" + s : s;
second.innerHTML = s;
}
</script>
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)