javascript倒計(jì)時(shí)效果實(shí)現(xiàn)
本文分析不同倒計(jì)時(shí)效果的計(jì)算思路及方法,掌握日期對(duì)象Date,獲取時(shí)間的方法,計(jì)算時(shí)差的方法,實(shí)現(xiàn)不同的倒時(shí)計(jì)效果。
1、簡(jiǎn)單時(shí)間顯示
講解日期對(duì)象Date,并通過(guò)該對(duì)象獲取時(shí)、分、秒等,讓你自由提取所需時(shí)間內(nèi)容。
<!DOCTYPE html> <html> <head> <title>獲取時(shí)間</title> <script type="text/javascript"> window.onload = function(){ showTime(); } function showTime(){ var myDate = new Date(); var year = myDate.getFullYear(); var month = myDate.getMonth() + 1; var date = myDate.getDate(); var dateArr = ["日","一",'二','三','四','五','六']; var day = myDate.getDay(); var hours = myDate.getHours(); var minutes = formatTime(myDate.getMinutes()); var seconds = formatTime(myDate.getSeconds()); var systemTime = document.getElementById("time"); systemTime.innerHTML = " " + year + "年" + month +"月" + date + "日" + " 星期" + dateArr[day] + " " + hours + ":" + minutes + ":" + seconds; setTimeout("showTime()",500); } //格式化時(shí)間:分秒。 function formatTime (i){ if(i < 10){ i = "0" + i; } return i; } </script> </head> <body> <div id ='time'></div> </body> </html>
顯示結(jié)果:
2、倒計(jì)時(shí)時(shí)差
講解gettime()等方法,及計(jì)算時(shí)間的方法,學(xué)會(huì)時(shí)間相差的天數(shù)。
<!DOCTYPE html> <html> <head> <title>獲取時(shí)間</title> <script type="text/javascript"> window.onload = function(){ deadTime(); } function deadTime(){ var nowTime = new Date(); var finalTime = new Date("2015-11-11"); var lefttime = (finalTime.getTime() - nowTime.getTime())/(1000*24*60*60); var date = Math.ceil(lefttime); document.getElementById("time").innerHTML = date; } </script> </head> <body> <div >距離雙十一還有:<span id ='time'></span>天</div> </body> </html>
顯示效果:
3、限時(shí)搶購(gòu)
如何運(yùn)用日期對(duì)象及方法,計(jì)算相差的天、時(shí)、分、秒的方法。
<!DOCTYPE html> <html> <head> <title>團(tuán)購(gòu)——限時(shí)搶</title> </head> <body> <div class="time"> <span id="LeftTime"></span></div> </div> <script> function FreshTime() { var endtime=new Date("2015/11/11,12:20:12");//結(jié)束時(shí)間 var nowtime = new Date();//當(dāng)前時(shí)間 var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); d=parseInt(lefttime/3600/24); h=parseInt((lefttime/3600)%24); m=parseInt((lefttime/60)%60); s=parseInt(lefttime%60); document.getElementById("LeftTime").innerHTML="距離活動(dòng)結(jié)束還剩" + d+"天"+h+"小時(shí)"+m+"分"+s+"秒"; if(lefttime<=0){ document.getElementById("LeftTime").innerHTML="團(tuán)購(gòu)已結(jié)束"; clearInterval(sh); } } FreshTime(); var sh; sh=setInterval(FreshTime,1000); </script> </body> </html>
顯示效果:
知識(shí)點(diǎn):
1.學(xué)會(huì)使用日期對(duì)象Date和方法。
2.學(xué)會(huì)不同時(shí)間內(nèi)容的獲取。
3.學(xué)會(huì)計(jì)算時(shí)差的方法。
本文介紹了常見(jiàn)的幾種倒計(jì)時(shí)效果,特別適合用于現(xiàn)今團(tuán)購(gòu)網(wǎng)、電商網(wǎng)、門(mén)戶網(wǎng)等倒計(jì)時(shí)搶購(gòu)活動(dòng),希望本文能幫助大家熟練掌握javascript倒計(jì)時(shí)效果的實(shí)現(xiàn)方法。
- 基于Javascript實(shí)現(xiàn)倒計(jì)時(shí)功能
- JavaScript電子時(shí)鐘倒計(jì)時(shí)
- 多個(gè)js毫秒倒計(jì)時(shí)同時(shí)進(jìn)行效果
- js倒計(jì)時(shí)搶購(gòu)實(shí)例
- js代碼實(shí)現(xiàn)點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)
- js實(shí)現(xiàn)n秒倒計(jì)時(shí)后才可以點(diǎn)擊的效果
- js倒計(jì)時(shí)簡(jiǎn)單實(shí)現(xiàn)方法
- js實(shí)現(xiàn)新年倒計(jì)時(shí)效果
- javascript電商網(wǎng)站搶購(gòu)倒計(jì)時(shí)效果實(shí)現(xiàn)
- 最全面的JS倒計(jì)時(shí)代碼
相關(guān)文章
動(dòng)態(tài)的綁定事件addEventListener方法的使用
本文為大家介紹下動(dòng)態(tài)的綁定事件的方法addEventListener的使用示例,不了解的朋友可以參考下2014-01-01javascript數(shù)組按屬性分組實(shí)現(xiàn)方法
在開(kāi)發(fā)過(guò)程中,前端有時(shí)需要對(duì)后端返回的數(shù)據(jù)進(jìn)行一些處理,當(dāng)后端返回給我們json對(duì)象數(shù)組時(shí),我們可能會(huì)需要按照對(duì)象中的某一個(gè)屬性來(lái)進(jìn)行分組,下面這篇文章主要給大家介紹了關(guān)于javascript數(shù)組按屬性分組的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-05-05JS圖片根據(jù)鼠標(biāo)滾動(dòng)延時(shí)加載的實(shí)例代碼
這篇文章介紹了,JS圖片根據(jù)鼠標(biāo)滾動(dòng)延時(shí)加載的實(shí)例代碼,有需要的朋友可以參考一下2013-07-07JavaScript iframe數(shù)據(jù)共享接口實(shí)現(xiàn)方法
在iframe與父窗口或者與子窗口傳遞數(shù)據(jù)是一個(gè)麻煩的事情,如果我們能夠?qū)懸粋€(gè)一勞永逸的接口那就再方便不過(guò)了,下面就來(lái)簡(jiǎn)答介紹一下如何實(shí)現(xiàn)此功能,對(duì)js iframe相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01JS實(shí)現(xiàn)手寫(xiě) forEach算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)手寫(xiě) forEach算法,結(jié)合實(shí)例形式分析了JS實(shí)現(xiàn)手寫(xiě) forEach算法實(shí)現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下2020-04-04能在網(wǎng)頁(yè)中寫(xiě)字和能擦寫(xiě)的js程序
從經(jīng)典論壇發(fā)現(xiàn)的一個(gè)可以在網(wǎng)頁(yè)中寫(xiě)字和有擦除功能的javascript代碼2008-04-04js簡(jiǎn)單實(shí)現(xiàn)根據(jù)身份證號(hào)碼識(shí)別性別年齡生日
根據(jù)身份證號(hào)碼識(shí)別性別年齡生日,目前就有一個(gè)這樣的需求,那么接下來(lái)為大家介紹下使用js是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過(guò)2013-11-11JavaScript實(shí)現(xiàn)復(fù)制粘貼剪切功能三種方法
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)復(fù)制粘貼剪切功能的相關(guān)資料,在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的開(kāi)發(fā)需求,文中通過(guò)代碼將三種方法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01Javascript快速實(shí)現(xiàn)瀏覽器系統(tǒng)通知
這篇文章給大家介紹了Javascript快速實(shí)現(xiàn)瀏覽器系統(tǒng)通知的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-08-08