javascript實現倒計時效果
阿新 • • 發佈：2020-02-19
本文例項為大家分享了javascript實現倒計時效果的具體程式碼，供大家參考，具體內容如下
首先先寫一個佈局
<!--倒計時-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#numbers p {
position: absolute;
font-size: 100px;
left: 50%;
top: 30%;
margin-left: -29px;
display:none;
}
</style>
</head>
<body>
<div id="numbers">
<p>3</p>
<p>2</p>
<p>1</p>
</div>
</body>
</html>
用position:absolute使數字重合(display不為none時）
之後開始新增javascipt內容
<script type="text/javascript">
window.onload = function () {
var numbers = document.getElementById('numbers');
var number = numbers.getElementsByTagName('p');
var i = 0;
number[i].style.display = 'block';
i = 1;
timer = setInterval(function () {
if (i != number.length) {
number[i - 1].style.display = 'none';
number[i].style.display = 'block';
} else {
number[i - 1].style.display = 'none';
clearInterval(timer);
}
i++;
},1000)
}
</script>倒計時主要通過setInterval()來實現，每1秒重新整理一次。那麼問題來了，在頁面載入完成後一秒，setInterval()中的內容才開始執行，倘若我們需要在開啟頁面後立馬開始倒計時的話，就應先把3這個數字即number[0]展示出來。之後每秒需要顯示相應的數字，並將前一個數字隱藏。從1開始，當i的值不為number.length的時候，都執行相同的指令。當i為number.length時，只需將number[2]即1隱藏，並且清除定時器，否則倘若找不到對應的元素，就會出現Uncaught TypeError: Cannot read property ‘style' of undefined的錯誤。
至此，倒計時功能完成。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。