<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京東首頁倒計時</title>
<style>
.djs {
width: 200px;
margin: 50px auto;
}
.djs>li {
width: 35px;
height: 35px;
background-color: #333;
display: inline-block;
list-style-type: none;
text-align: center;
line-height: 35px;
color: #fff;
font-size: 24px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.djs>li.point {
width: 18px;
color: crimson;
background-color: #fff;
}
</style>
</head>
<body>
<ul class="djs">
<li>01</li>
<li class="point">:</li>
<li>02</li>
<li class="point">:</li>
<li>23</li>
</ul>
<script>
let lis = document.querySelectorAll('li');
let end = new Date('2020-06-05 12:00:00');
setInterval(function () {
let now = new Date();
console.log(end - now);
let diff = end - now;
// 拿到不能進製爲分鐘的秒數
let sec = Math.round((diff / 1000)) % 60;
console.log(sec);
lis[4].innerHTML = sec.toString().padStart(2, '0');
// 不能進製爲小時的分鐘數
let mint = Math.floor((diff / 1000 / 60)) % 60;
lis[2].innerHTML = mint.toString().padStart(2, '0');
// 小時
let hour = Math.floor((diff / 1000 / 60 / 60))
lis[0].innerHTML = hour.toString().padStart(2, '0');
}, 1000);
</script>
</body>
</html>
京東首頁秒殺倒計時
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
MCU初始化流程——從上電到main()之間
說明： 以下介紹示例的MCU地址空間如下： ROM空間爲：0x0000 0000 – 0x0000 8000 RAM空間爲：0x2000 0000 – 0x2000 2000