javascript實(shí)現(xiàn)倒計(jì)時效果
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)倒計(jì)時效果的具體代碼,供大家參考,具體內(nèi)容如下
首先先寫一個布局
<!--倒計(jì)時--> <!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使數(shù)字重合(display不為none時)
之后開始添加javascipt內(nèi)容
<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>
倒計(jì)時主要通過setInterval()來實(shí)現(xiàn),每1秒刷新一次。那么問題來了,在頁面加載完成后一秒,setInterval()中的內(nèi)容才開始執(zhí)行,倘若我們需要在打開頁面后立馬開始倒計(jì)時的話,就應(yīng)先把3這個數(shù)字即number[0]展示出來。之后每秒需要顯示相應(yīng)的數(shù)字,并將前一個數(shù)字隱藏。從1開始,當(dāng)i的值不為number.length的時候,都執(zhí)行相同的指令。當(dāng)i為number.length時,只需將number[2]即1隱藏,并且清除定時器,否則倘若找不到對應(yīng)的元素,就會出現(xiàn)Uncaught TypeError: Cannot read property ‘style' of undefined的錯誤。
至此,倒計(jì)時功能完成。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS 倒計(jì)時實(shí)現(xiàn)代碼(時、分,秒)
- JS實(shí)現(xiàn)倒計(jì)時(天數(shù)、時、分、秒)
- 簡單易用的倒計(jì)時js代碼
- 2種簡單的js倒計(jì)時方式
- js代碼實(shí)現(xiàn)點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時
- 原生JS實(shí)現(xiàn)簡單的倒計(jì)時功能示例
- js幾秒以后倒計(jì)時跳轉(zhuǎn)示例
- 一個不錯的js html頁面倒計(jì)時可精確到秒
- js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時效果
- Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(時間與服務(wù)器時間同步)
相關(guān)文章
JavaScript 保存數(shù)組到Cookie的代碼
大部分的瀏覽器一個網(wǎng)站只支持保存20個Cookie,超過20個Cookie,舊的Cookie會被最新的Cookie代替。那么如果要有超過20個Cookie要保存只能將Cookie存為數(shù)組然后保存到Cookie。2010-04-04前端面試運(yùn)行npm?run?xxx發(fā)生過程原理解析
這篇文章主要為大家介紹了前端面試運(yùn)行npm?run?xxx過程原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式
這篇文章主要介紹了Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03JavaScript使用push方法添加一個元素到數(shù)組末尾用法實(shí)例
這篇文章主要介紹了JavaScript使用push方法添加一個元素到數(shù)組末尾,實(shí)例分析了javascript中push函數(shù)的使用技巧,需要的朋友可以參考下2015-04-04JS+CSS實(shí)現(xiàn)的日本門戶網(wǎng)站經(jīng)典選項(xiàng)卡導(dǎo)航效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的日本門戶網(wǎng)站經(jīng)典選項(xiàng)卡導(dǎo)航效果,涉及JavaScript針對頁面元素的動態(tài)遍歷及樣式動態(tài)修改技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09淺談js中StringBuffer類的實(shí)現(xiàn)方法及使用
下面小編就為大家?guī)硪黄獪\談js中StringBuffer類的實(shí)現(xiàn)方法及使用。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09