javascript倒計(jì)時效果實(shí)現(xiàn)
本文分析不同倒計(jì)時效果的計(jì)算思路及方法,掌握日期對象Date,獲取時間的方法,計(jì)算時差的方法,實(shí)現(xiàn)不同的倒時計(jì)效果。
1、簡單時間顯示
講解日期對象Date,并通過該對象獲取時、分、秒等,讓你自由提取所需時間內(nèi)容。
<!DOCTYPE html> <html> <head> <title>獲取時間</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); } //格式化時間:分秒。 function formatTime (i){ if(i < 10){ i = "0" + i; } return i; } </script> </head> <body> <div id ='time'></div> </body> </html>
顯示結(jié)果:
2、倒計(jì)時時差
講解gettime()等方法,及計(jì)算時間的方法,學(xué)會時間相差的天數(shù)。
<!DOCTYPE html> <html> <head> <title>獲取時間</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、限時搶購
如何運(yùn)用日期對象及方法,計(jì)算相差的天、時、分、秒的方法。
<!DOCTYPE html> <html> <head> <title>團(tuán)購——限時搶</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é)束時間 var nowtime = new Date();//當(dāng)前時間 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="距離活動結(jié)束還剩" + d+"天"+h+"小時"+m+"分"+s+"秒"; if(lefttime<=0){ document.getElementById("LeftTime").innerHTML="團(tuán)購已結(jié)束"; clearInterval(sh); } } FreshTime(); var sh; sh=setInterval(FreshTime,1000); </script> </body> </html>
顯示效果:
知識點(diǎn):
1.學(xué)會使用日期對象Date和方法。
2.學(xué)會不同時間內(nèi)容的獲取。
3.學(xué)會計(jì)算時差的方法。
本文介紹了常見的幾種倒計(jì)時效果,特別適合用于現(xiàn)今團(tuán)購網(wǎng)、電商網(wǎng)、門戶網(wǎng)等倒計(jì)時搶購活動,希望本文能幫助大家熟練掌握javascript倒計(jì)時效果的實(shí)現(xiàn)方法。
相關(guān)文章
動態(tài)的綁定事件addEventListener方法的使用
本文為大家介紹下動態(tài)的綁定事件的方法addEventListener的使用示例,不了解的朋友可以參考下2014-01-01javascript數(shù)組按屬性分組實(shí)現(xiàn)方法
在開發(fā)過程中,前端有時需要對后端返回的數(shù)據(jù)進(jìn)行一些處理,當(dāng)后端返回給我們json對象數(shù)組時,我們可能會需要按照對象中的某一個屬性來進(jìn)行分組,下面這篇文章主要給大家介紹了關(guān)于javascript數(shù)組按屬性分組的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-05-05JS圖片根據(jù)鼠標(biāo)滾動延時加載的實(shí)例代碼
這篇文章介紹了,JS圖片根據(jù)鼠標(biāo)滾動延時加載的實(shí)例代碼,有需要的朋友可以參考一下2013-07-07JavaScript iframe數(shù)據(jù)共享接口實(shí)現(xiàn)方法
在iframe與父窗口或者與子窗口傳遞數(shù)據(jù)是一個麻煩的事情,如果我們能夠?qū)懸粋€一勞永逸的接口那就再方便不過了,下面就來簡答介紹一下如何實(shí)現(xiàn)此功能,對js iframe相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01js簡單實(shí)現(xiàn)根據(jù)身份證號碼識別性別年齡生日
根據(jù)身份證號碼識別性別年齡生日,目前就有一個這樣的需求,那么接下來為大家介紹下使用js是如何實(shí)現(xiàn)的,感興趣的朋友不要錯過2013-11-11JavaScript實(shí)現(xiàn)復(fù)制粘貼剪切功能三種方法
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)復(fù)制粘貼剪切功能的相關(guān)資料,在實(shí)際案例的操作過程中,不少人都會遇到這樣的開發(fā)需求,文中通過代碼將三種方法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01Javascript快速實(shí)現(xiàn)瀏覽器系統(tǒng)通知
這篇文章給大家介紹了Javascript快速實(shí)現(xiàn)瀏覽器系統(tǒng)通知的方法,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-08-08