JavaScript用20行代碼實現虎年春節倒計時
春節將至,小夢相信大傢跟小朦夢一樣很激動呀。為瞭迎接虎年春節到來,小夢擼瞭一個虎年春節倒計時,僅20行代碼用js就實現啦,是不是很簡單呢?我們用這20行代碼不僅能做個虎年春節倒計時,還能從中學到JS相關知識,一舉兩得!話不多說,接下來小夥伴們跟著小夢一起也動手試試吧!
虎年春節倒計時局部效果圖
虎年春節倒計時全局效果圖,灰常可愛的小老虎呀~
JS關鍵代碼實現
window.onload=function starttime(){ // 2022年春節時間 time(h1,'2022/2/1'); // 計時器 timer = setTimeout(starttime,1000); } function time(obj,springtime){ // 獲取當前時間 var nowtime = new Date().getTime(); // 獲取未來時間 var futruetime = new Date(springtime).getTime(); // 獲取當前時間到未來時間之差 var mtime = futruetime-nowtime; // 毫秒/1000 var time = (mtime/1000); // 天 var day = parseInt(time/(24*60*60)); // 小時 var hour = parseInt(time/(60*60))-24*day; // 分 var minute = parseInt(time%3600/60); var second = parseInt(time%60); obj.innerHTML="<br> 虎年春節倒計時:<br> "+day+"天"+hour+"小時"+minute+"分"+second+"秒"+"<br><span><br>龍騰虎躍,虎虎虎虎!</span>"; return true; }
上述代碼中實現倒計時的關鍵點在於setTimeout()函數,setTimeout()函數是一個起到定時器的作用,接下來為小夥伴們簡單講解一下該知識點,在後面大傢制作虎年春節倒計時的同時,也能學習與復習相關知識點。
setTimeout()函數
setTimeout函數用來指定某個函數或某段代碼,在多少毫秒之後執行。它返回一個整數,表示定時器的編號,以後可以用來取消這個定時器。
var timerId = setTimeout(func, delay)
在上面代碼中,setTimeout函數中有兩個參數,第一個參數func是將要延遲執行的函數或一段延遲執行的代碼,第二個參數delay是延遲執行的毫秒數。
timer = setTimeout(starttime,1000);
在我們的虎年春節倒計時代碼中,starttime是要延遲執行的函數,1000是延遲1s,也就是每隔1秒執行一次starttime函數來實現倒計時邏輯。
CSS樣式相關代碼
<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樣式用於控制我們的頁面規整美觀,與JS強強結合,在這裡小夢就不細說CSS啦,後期肝一篇CSS相關內容再分享給大傢。
完整代碼貼附,復制到THML文件中就可以直接運行啦!小夥伴們可以嘗試一下哦~,圖片資料有需要的話大傢可以留言,小夢看到會發給你滴~
<!doctype html> <html> <head> <meta charset="utf-8"> <title>虎年倒計時</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年春節時間 time(h1,'2022/2/1'); // 計時器 timer = setTimeout(starttime,1000); } function time(obj,springtime){ // 獲取當前時間 var nowtime = new Date().getTime(); // 獲取未來時間 var futruetime = new Date(springtime).getTime(); // 獲取當前時間到未來時間之差 var mtime = futruetime-nowtime; // 毫秒/1000 var time = (mtime/1000); // 天 var day = parseInt(time/(24*60*60)); // 小時 var hour = parseInt(time/(60*60))-24*day; // 分 var minute = parseInt(time%3600/60); var second = parseInt(time%60); obj.innerHTML="<br> 虎年春節倒計時:<br> "+day+"天"+hour+"小時"+minute+"分"+second+"秒"+"<br><span><br>龍騰虎躍,虎虎虎虎!</span>"; return true; } </script> </body> </html>
到此這篇關於JavaScript用20行代碼實現虎年春節倒計時的文章就介紹到這瞭,更多相關JavaScript倒計時內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!