溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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的錯誤。
至此，倒計時功能完成。
以上是“javascript實現倒計時效果的方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
