本文實例為大家分享了javascript實現倒計時效果的具體代碼，供大家參考，具體內容如下

首先先寫一個布局

#numbers p {

position: absolute;

font-size: 100px;

left: 50%;

top: 30%;

margin-left: -29px;

display:none;

}

3

2

1

用position:absolute使數字重合(display不為none時)

之后開始添加javascipt內容

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)

}

倒計時主要通過setInterval()來實現，每1秒刷新一次。那么問題來了，在頁面加載完成后一秒，setInterval()中的內容才開始執行，倘若我們需要在打開頁面后立馬開始倒計時的話，就應先把3這個數字即number[0]展示出來。之后每秒需要顯示相應的數字，并將前一個數字隱藏。從1開始，當i的值不為number.length的時候，都執行相同的指令。當i為number.length時，只需將number[2]即1隱藏，并且清除定時器，否則倘若找不到對應的元素，就會出現Uncaught TypeError: Cannot read property ‘style' of undefined的錯誤。

至此，倒計時功能完成。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的js页面倒计时7天 java_javascript实现倒计时效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。