HTML 炫酷倒計(jì)時(shí)五秒，讓網(wǎng)頁更加有趣與實(shí)用。想學(xué)習(xí)該技術(shù)就請看以下代碼：
<!DOCTYPE html>
<html>
<head>
<title>HTML 炫酷倒計(jì)時(shí)五秒代碼</title>
<style>
.counter {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 80px;
color: white;
font-weight: bold;
text-shadow: 2px 2px black;
background-image: url("background.jpg");
background-size: cover;
}
</style>
</head>
<body>
<div class="counter">5</div>
<script>
var count = 5;
setInterval(function() {
count--;
if (count == 0) {
clearInterval();
}
document.querySelector(".counter").innerHTML = count;
}, 1000);
</script>
</body>
</html>以上代碼使用 flexbox 布局進(jìn)行居中，字體色彩采用白色，加粗效果突出，背景圖片采用本地圖片，字體陰影采用黑色褐協(xié)調(diào)的顏色。倒數(shù)計(jì)時(shí)器的 JavaScript 代碼使用 setInterval() 方法來每秒更新計(jì)數(shù)器中的數(shù)字，直到倒數(shù)至零時(shí) clearInterval() 方法停止計(jì)時(shí)器。這段代碼的目的很簡單，只要用 id 或 class 名稱將 CSS 和 JavaScript 代碼存儲在同一文件中即可。
下一篇html炫酷代碼源碼