使用h5 css3制作倒計時功能
倒計時是網頁設計中常用的實用功能之一，它可以幫助用戶精確計算時間，完成具體的任務。HTML5和CSS3為我們提供了豐富多彩的控件和效果，我們可以使用它們來輕松實現倒計時的需求。下面將介紹一種簡單的倒計時實現方式：
<!DOCTYPE html>
<html>
<head>
<style>
#count-down {
font-size: 40px;
color: #ff0000;
text-align: center;
margin-top: 50px;
}
.circle {
display: inline-block;
position: relative;
width: 100px;
height: 100px;
margin: 0 20px;
}
.circle div {
position: absolute;
border: 4px solid #95a5a6;
opacity: 1;
border-radius: 50%;
animation: timer 1s linear infinite;
}
.circle div:nth-child(1) {
animation-delay: -0.5s;
}
.circle div:nth-child(2) {
animation-delay: -0.4s;
}
.circle div:nth-child(3) {
animation-delay: -0.3s;
}
.circle div:nth-child(4) {
animation-delay: -0.2s;
}
.circle div:nth-child(5) {
animation-delay: -0.1s;
}
@keyframes timer {
0% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="count-down"></div>
<script>
var countDownDate = new Date("Aug 31, 2023 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("count-down").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance< 0) {
clearInterval(x);
document.getElementById("count-down").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>上述代碼中，我們使用了h5的時間API，通過將位置定為relative，然后把每個div的位置定位absolute，就可以做出一個圓形的進度條動畫。加上鍵幀動畫，我們就獲得了一個可愛、美觀的倒計時效果。
這種方式雖然簡單，但對于實現簡單的倒計時，已經完全夠用了。如果需要更復雜的效果，還可以借助JavaScript或者其他框架庫進行實現。希望本文能夠給您帶來借鑒和幫助。