您好,登錄后才能下訂單哦!
這篇文章主要介紹“怎么用JavaScript代碼實(shí)現(xiàn)虎年春節(jié)倒計(jì)時(shí)”的相關(guān)知識,小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“怎么用JavaScript代碼實(shí)現(xiàn)虎年春節(jié)倒計(jì)時(shí)”文章能幫助大家解決問題。
虎年春節(jié)倒計(jì)時(shí)局部效果圖
虎年春節(jié)倒計(jì)時(shí)全局效果圖,灰??蓯鄣男±匣⒀絶
JS關(guān)鍵代碼實(shí)現(xiàn)
window.onload=function starttime(){ // 2022年春節(jié)時(shí)間 time(h2,'2022/2/1'); // 計(jì)時(shí)器 timer = setTimeout(starttime,1000); } function time(obj,springtime){ // 獲取當(dāng)前時(shí)間 var nowtime = new Date().getTime(); // 獲取未來時(shí)間 var futruetime = new Date(springtime).getTime(); // 獲取當(dāng)前時(shí)間到未來時(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í)器的作用,接下來為小伙伴們簡單講解一下該知識點(diǎn),在后面大家制作虎年春節(jié)倒計(jì)時(shí)的同時(shí),也能學(xué)習(xí)與復(fù)習(xí)相關(guān)知識點(diǎn)。
setTimeout()函數(shù)
setTimeout函數(shù)用來指定某個(gè)函數(shù)或某段代碼,在多少毫秒之后執(zhí)行。它返回一個(gè)整數(shù),表示定時(shí)器的編號,以后可以用來取消這個(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ù)來實(shí)現(xiàn)倒計(jì)時(shí)邏輯。
CSS樣式相關(guān)代碼
<style> h2{ 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; } h2 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樣式用于控制我們的頁面規(guī)整美觀,與JS強(qiáng)強(qiáng)結(jié)合,在這里小夢就不細(xì)說CSS啦,后期肝一篇CSS相關(guān)內(nèi)容再分享給大家。
完整代碼貼附,復(fù)制到THML文件中就可以直接運(yùn)行啦!小伙伴們可以嘗試一下哦~,圖片資料有需要的話大家可以留言,小夢看到會(huì)發(fā)給你滴~
<!doctype html> <html> <head> <meta charset="utf-8"> <title>虎年倒計(jì)時(shí)</title> <style> h2{ 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; } h2 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"> <h2 id="h2"></h2> <script> window.onload=function starttime(){ // 2022年春節(jié)時(shí)間 time(h2,'2022/2/1'); // 計(jì)時(shí)器 timer = setTimeout(starttime,1000); } function time(obj,springtime){ // 獲取當(dāng)前時(shí)間 var nowtime = new Date().getTime(); // 獲取未來時(shí)間 var futruetime = new Date(springtime).getTime(); // 獲取當(dāng)前時(shí)間到未來時(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代碼實(shí)現(xiàn)虎年春節(jié)倒計(jì)時(shí)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。