JavaScript用20行代碼實(shí)現(xiàn)虎年春節(jié)倒計(jì)時(shí)
春節(jié)將至,小夢(mèng)相信大家跟小朦夢(mèng)一樣很激動(dòng)呀。為了迎接虎年春節(jié)到來(lái),小夢(mèng)擼了一個(gè)虎年春節(jié)倒計(jì)時(shí),僅20行代碼用js就實(shí)現(xiàn)啦,是不是很簡(jiǎn)單呢?我們用這20行代碼不僅能做個(gè)虎年春節(jié)倒計(jì)時(shí),還能從中學(xué)到JS相關(guān)知識(shí),一舉兩得!話不多說(shuō),接下來(lái)小伙伴們跟著小夢(mèng)一起也動(dòng)手試試吧!
虎年春節(jié)倒計(jì)時(shí)局部效果圖
虎年春節(jié)倒計(jì)時(shí)全局效果圖,灰常可愛(ài)的小老虎呀~
JS關(guān)鍵代碼實(shí)現(xiàn)
window.onload=function starttime(){ // 2022年春節(jié)時(shí)間 time(h1,'2022/2/1'); // 計(jì)時(shí)器 timer = setTimeout(starttime,1000); } function time(obj,springtime){ // 獲取當(dāng)前時(shí)間 var nowtime = new Date().getTime(); // 獲取未來(lái)時(shí)間 var futruetime = new Date(springtime).getTime(); // 獲取當(dāng)前時(shí)間到未來(lái)時(shí)間之差 var mtime = futruetime-nowtime; // 毫秒/1000 var time = (mtime/1000); // 天 var day = parseInt(time/(24*60*60)); // 小時(shí) var hour = parseInt(time/(60*60))-24*day; // 分 var minute = parseInt(time%3600/60); var second = parseInt(time%60); obj.innerHTML="<br> 虎年春節(jié)倒計(jì)時(shí):<br> "+day+"天"+hour+"小時(shí)"+minute+"分"+second+"秒"+"<br><span><br>龍騰虎躍,虎虎虎虎!</span>"; return true; }
上述代碼中實(shí)現(xiàn)倒計(jì)時(shí)的關(guān)鍵點(diǎn)在于setTimeout()函數(shù),setTimeout()函數(shù)是一個(gè)起到定時(shí)器的作用,接下來(lái)為小伙伴們簡(jiǎn)單講解一下該知識(shí)點(diǎn),在后面大家制作虎年春節(jié)倒計(jì)時(shí)的同時(shí),也能學(xué)習(xí)與復(fù)習(xí)相關(guān)知識(shí)點(diǎn)。
setTimeout()函數(shù)
setTimeout函數(shù)用來(lái)指定某個(gè)函數(shù)或某段代碼,在多少毫秒之后執(zhí)行。它返回一個(gè)整數(shù),表示定時(shí)器的編號(hào),以后可以用來(lái)取消這個(gè)定時(shí)器。
var timerId = setTimeout(func, delay)
在上面代碼中,setTimeout函數(shù)中有兩個(gè)參數(shù),第一個(gè)參數(shù)func是將要延遲執(zhí)行的函數(shù)或一段延遲執(zhí)行的代碼,第二個(gè)參數(shù)delay是延遲執(zhí)行的毫秒數(shù)。
timer = setTimeout(starttime,1000);
在我們的虎年春節(jié)倒計(jì)時(shí)代碼中,starttime是要延遲執(zhí)行的函數(shù),1000是延遲1s,也就是每隔1秒執(zhí)行一次starttime函數(shù)來(lái)實(shí)現(xiàn)倒計(jì)時(shí)邏輯。
CSS樣式相關(guān)代碼
<style> h1{ position: fixed; top: 25%; left: 20; width: 100%; transform:translateY(-50%); font-family:'Courier New', Courier, monospace; font-size: 60px; color: #2c0712; padding: 0 20px; } h1 span{ position: fixed; left: 0; width: 100%; text-align: center; margin-top:250px; font-size:40px; } body{ background-image: url("C:\\Users\\Administrator\\Desktop\\博客圖片\\虎虎.jpg"); background-size: cover; background-repeat: no-repeat; background-position: top center; display: flex; flex-direction: column; align-items: center; min-height: 100vm; margin: 0; </style>
CSS樣式用于控制我們的頁(yè)面規(guī)整美觀,與JS強(qiáng)強(qiáng)結(jié)合,在這里小夢(mèng)就不細(xì)說(shuō)CSS啦,后期肝一篇CSS相關(guān)內(nèi)容再分享給大家。
完整代碼貼附,復(fù)制到THML文件中就可以直接運(yùn)行啦!小伙伴們可以嘗試一下哦~,圖片資料有需要的話大家可以留言,小夢(mèng)看到會(huì)發(fā)給你滴~
<!doctype html> <html> <head> <meta charset="utf-8"> <title>虎年倒計(jì)時(shí)</title> <style> h1{ position: fixed; top: 25%; left: 20; width: 100%; transform:translateY(-50%); font-family:'Courier New', Courier, monospace; font-size: 60px; color: #2c0712; padding: 0 20px; } h1 span{ position: fixed; left: 0; width: 100%; text-align: center; margin-top:250px; font-size:40px; } body{ background-image: url("C:\\Users\\Administrator\\Desktop\\博客圖片\\虎虎.jpg"); background-size: cover; background-repeat: no-repeat; background-position: top center; display: flex; flex-direction: column; align-items: center; min-height: 100vm; margin: 0; </style> </head> <body bgcolor="red"> <h1 id="h1"></h1> <script> window.onload=function starttime(){ // 2022年春節(jié)時(shí)間 time(h1,'2022/2/1'); // 計(jì)時(shí)器 timer = setTimeout(starttime,1000); } function time(obj,springtime){ // 獲取當(dāng)前時(shí)間 var nowtime = new Date().getTime(); // 獲取未來(lái)時(shí)間 var futruetime = new Date(springtime).getTime(); // 獲取當(dāng)前時(shí)間到未來(lái)時(shí)間之差 var mtime = futruetime-nowtime; // 毫秒/1000 var time = (mtime/1000); // 天 var day = parseInt(time/(24*60*60)); // 小時(shí) var hour = parseInt(time/(60*60))-24*day; // 分 var minute = parseInt(time%3600/60); var second = parseInt(time%60); obj.innerHTML="<br> 虎年春節(jié)倒計(jì)時(shí):<br> "+day+"天"+hour+"小時(shí)"+minute+"分"+second+"秒"+"<br><span><br>龍騰虎躍,虎虎虎虎!</span>"; return true; } </script> </body> </html>
到此這篇關(guān)于JavaScript用20行代碼實(shí)現(xiàn)虎年春節(jié)倒計(jì)時(shí)的文章就介紹到這了,更多相關(guān)JavaScript倒計(jì)時(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)數(shù)組扁平化的方法總結(jié)
數(shù)組扁平化相信不少朋友在一些面試中被問(wèn)到過(guò),這在我們?nèi)粘>幊讨幸彩且粋€(gè)常規(guī)操作,它需要我們將一個(gè)多維數(shù)組轉(zhuǎn)化成一個(gè)一維數(shù)組,所以,借著這篇文章,我們今天就一起來(lái)匯總一下幾種數(shù)組扁平化的方式,需要的朋友可以參考下2024-02-02js實(shí)現(xiàn)按鈕開(kāi)關(guān)單機(jī)下拉菜單效果
這篇文章主要介紹了js實(shí)現(xiàn)按鈕開(kāi)關(guān)單機(jī)下拉菜單效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11微信小程序?qū)崿F(xiàn)側(cè)邊欄分類(lèi)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)側(cè)邊欄分類(lèi),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10用JS實(shí)現(xiàn)網(wǎng)頁(yè)元素陰影效果的研究總結(jié)
用JS實(shí)現(xiàn)網(wǎng)頁(yè)元素陰影效果的研究總結(jié)...2007-08-08JavaScript繼承的特性與實(shí)踐應(yīng)用深入詳解
這篇文章主要介紹了JavaScript繼承的特性與實(shí)踐應(yīng)用,結(jié)合實(shí)例形式較為深入的分析了javascript繼承相關(guān)概念、特性、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2018-12-12編寫(xiě)高質(zhì)量JavaScript代碼的基本要點(diǎn)
編寫(xiě)高質(zhì)量JavaScript代碼的基本要點(diǎn)分享給大家,感興趣的小伙伴們可以參考一下2016-03-03深入解析微信小程序開(kāi)發(fā)中遇到的幾個(gè)小問(wèn)題
這篇文章主要介紹了微信小程序開(kāi)發(fā)中遇到的幾個(gè)小問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07JavaScript清除所有(多個(gè))定時(shí)器的方法實(shí)戰(zhàn)案例
定時(shí)器就是由JS提供了一些原生方法來(lái)實(shí)現(xiàn)延時(shí)去執(zhí)行某一段代碼,下面這篇文章主要給大家介紹了關(guān)于JavaScript清除所有(多個(gè))定時(shí)器的方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01