本文實(shí)例為大家分享了javascript實(shí)現(xiàn)倒計(jì)時(shí)效果的具體代碼，供大家參考，具體內(nèi)容如下

首先先寫一個(gè)布局

#numbers p {

position: absolute;

font-size: 100px;

left: 50%;

top: 30%;

margin-left: -29px;

display:none;

}

3

2

1

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

之后開始添加javascipt內(nèi)容

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)

}

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

至此，倒計(jì)時(shí)功能完成。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。