原生js實現節日時間倒數功能（附上程式碼）
本文主要分享了原生js實作節日時間倒數功能的範例程式碼。有興趣的朋友一起來看吧。
知識要點
1.實作原則：
用結束時間-目前時間=時間差
目前時間每過1秒時間差自然也就少了1秒
所以要1秒更新一次當前時間就達到了倒數計時的效果
2.需要注意的就是時間之間的轉換和對得出數值的處理
3.用到的方法：
obj.getTime() //换算成毫秒 Math.floor() //把小数点向下舍入结果取一个整数 50%24 // 这是对数值求余的方法，意思是 假如有50个小时，一天24个小时 这个得出的结果就是 余数是2
具體的數值的運算處理完整程式碼裡有詳細的註解
#完整程式碼
註：程式碼附帶顯示目前時間的標準格式以及倒數天數
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
</style>
</head>
<body>
<p id="time"></p>
<br/>
<p id="day"></p>
<br/>
<p id="tm"></p>
<script type="text/javascript">
//在页面加载完后立即执行多个函数完美方案。
function addloadEvent(func){
var oldonload=window.onload;
if(typeof window.onload !="function"){
window.onload=func;
}
else{
window.onload=function(){
if(oldonload){
oldonload();
}
func();
}
}
}
addloadEvent(showTime);
addloadEvent(day);
addloadEvent(tb);
//在页面加载完后立即执行多个函数完美方案over。
//天时秒分倒计时
function tb(){
var myDate=new Date();//获取当前时间
var endtime=new Date("2018,1,1");//获取结束时间
//换算成秒 小数点向下舍入取整
var ltime=Math.floor((endtime.getTime()-myDate.getTime())/1000);
//console.log(ltime)
//换算成天 小数点向下舍入取整
var d=Math.floor(ltime/(24*60*60));
//换算成小时取去掉天数的余数（也就是小时） 小数点向下舍入取整
var h=Math.floor(ltime/(60*60)%24);
//换算成分钟取去掉小时的余数（也就是分钟） 小数点向下舍入取整
var m=Math.floor(ltime/60%60);
//换算成分钟取去掉分钟的余数（也就是秒） 小数点向下舍入取整
var s=Math.floor(ltime%60);
document.getElementById("tm").innerHTML="距2018年元旦还有:"+d+"天"+h+"小时"+m+"分钟"+s+"秒";
if(ltime<=0){
document.getElementById("tm").innerHTML="元旦快乐！";
clearTimeout(tb);
}
setTimeout(tb,1000);
}
//当秒数为个位数时前面+字符串0
function checkTime(i){
return i<10? "0"+i:""+i;
}
//当前时间标准格式
function showTime(){
var myDate=new Date();//获取当前时间
var year=myDate.getFullYear();//获取年份
var month=myDate.getMonth()+1;//获取月份是0-11的数字所以+1
var date=myDate.getDate();//日
var day=myDate.getDay();//
var h=myDate.getHours();//小时
var m=myDate.getMinutes();//分钟
var s=myDate.getSeconds();//秒
checkTime(m);
checkTime(s);
//console.log(day)
var week="日一二三四五六".charAt(day);
document.getElementById("time").innerHTML=year+"年"+month+"月"+date+"日"+"星期"+week+h+":"+m+":"+s;
setTimeout(showTime,1000);
}
//倒计时天数计算
function day(){
var myDate=new Date();//获取当前时间
var endtime=new Date("2018,1,1");//获取结束时间
//先换算成毫秒再相减就是时间差，再除以一天的毫秒数结果是带有小数点的，用math方法进一位取整
var ltime=Math.ceil((endtime.getTime()-myDate.getTime())/(24*60*60*1000));
document.getElementById("day").innerHTML="距2018年元旦还有:"+ltime+"天";
}
</script>
</body>
</html>上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
#以上是原生js實現節日時間倒數功能（附上程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
抖音10級燈牌多少錢？ 10級粉絲燈牌需要幾天？
Mar 11, 2024 pm 05:37 PM
在抖音平台上，許多用戶都渴望獲得等級認證，其中10級燈牌更是展示用戶在抖音上的影響力和認可度。本文將深入探討抖音10級燈牌的價格以及達到此等級所需的時間，以幫助使用者更了解此過程。一、抖音10級燈牌多少錢？抖音10級燈牌的價格會受市場波動和供需情況的影響而有所差異，一般價格在幾千元到萬元之間。這個價格主要包括燈牌本身的成本和可能的服務費用。用戶可透過抖音官方管道或第三方服務機構購買10級燈牌，但在購買時要留意選擇合法管道，以免遭遇虛假或詐欺交易。二、10級粉絲燈牌要幾天？達到10級燈牌
艾爾登法環通關需要多久
Mar 11, 2024 pm 12:50 PM
玩家在艾爾登法環中進行遊戲時可以體驗遊戲主線劇情，以及收集遊戲成就，有很多玩家不知道艾爾登法環通關需要多久，玩家的通關流程在30個小時。艾爾登法環通關需要多久答：30小時。 1、這個30小時的通關時長指的雖然不是高手般的速通，但也省略了許多的流程。 2.如果你想獲得更好的遊戲體驗或是體驗完整的劇情，那麼時長上肯定要花費更多的時間。 3.如果玩家是全收集大約要100-120小時。 4.如果是只走主線刷BOSS大約：50-60小時。 5.如果是想全部體驗：150小時打底。
小紅書發佈作品時間怎麼設定？發布作品時間準確嗎？
Mar 24, 2024 pm 01:31 PM
小紅書，一個充滿生活氣息與知識分享的平台，讓越來越多的創作者在這裡暢所欲言。要想在小紅書上獲得更多的關注和點贊，除了內容品質之外，發布作品的時間也是至關重要的。那麼，如何設定小紅書發布作品的時間呢？一、小紅書發布作品時間怎麼設定？ 1.了解用戶活躍時間首先，需要先明確小紅書用戶的活躍時間。通常來說，晚上8點到10點以及週末下午是用戶活躍度較高的時段。然而，這個時段也會受到受眾群體和地理等因素的影響而有所不同。因此，為了更能掌握用戶活躍時段，建議對不同族群的行為習慣進行更詳細的分析。透過了解用戶的活
Linux 檔案時間查看技巧詳解
Feb 21, 2024 pm 01:15 PM
Linux檔案時間檢視技巧詳解在Linux系統中，檔案的時間資訊對於檔案管理和追蹤變更非常重要。 Linux系統透過三種主要時間屬性來記錄檔案的變更訊息，分別是存取時間（atime）、修改時間（mtime）和變更時間（ctime）。本文將詳細介紹如何查看和管理這些文件時間信息，並提供具體的程式碼範例。 1.查看文件時間資訊透過使用ls指令結合參數-l可以列出文
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
gshock手錶怎麼調時間
Feb 21, 2024 pm 09:04 PM
許多用戶不太清楚該怎麼調整gshock手錶的時間，整體的方法還是比較簡單的，下面就給大家具體介紹一下gshock手錶的調整的方法，不知道該怎麼操作的用戶可以參考一下。 gshock手錶怎麼調時間1、先按照ABCD把這幾個按鍵給標註出來。 A鍵：可以理解成退出鍵，通常是和C鍵一起用的。 B鍵和D鍵可以理解成：加減鍵，也就是調節的鍵，例如現在是13點，調整到14點就按一下D鍵。 C鍵是模式鍵，按一下就可以切換模式，一般手錶的模式鍵都是在左下角的，會有mode這個英文。操作方法1、首先我們需要把手錶調整到計
命運方舟困夢什麼時候出
Mar 14, 2024 pm 03:00 PM
許多玩家想問命運方舟困夢什麼時候出，困夢將在3月13日與我們見面，其次還有全新職業格鬥家男、全新大陸羅溫、神選英雄武器、新增BOSS等內容，具體內容一起來看看這篇命運方舟困夢上線時間介紹。命運方舟攻略大全命運方舟困夢何時出答：3月13日道具等級要求關卡1-關卡3需要道具等級達到：1540關卡4需要道具等級達到：1560掉落物品：夢幻之念、夢幻標誌、墜落絕望之角。全新職業格鬥家男1、特性：修羅能量，積攢修羅能量進入【拳王態勢】2、職業屬性：近戰職業3、職業武器：重臂鎧。全新大陸羅溫1、開啟方法
win10開機10秒倒數計時怎麼取消? Win10取消開機倒數計時的三種方法
Feb 29, 2024 pm 07:25 PM
在win10中，開機倒數預設是啟用的。當我們在開機之後，會看到一個倒數計時的介面，通常是10秒的倒數。在這個時間之內，我們可以選擇是否繼續開機或進行一些它的操作。雖然開機倒數為我們的系統帶來了些許便利，但在某些情況下也可能帶來麻煩。想取消顯示，但不知道怎麼操作，這篇文章是本站帶給大家的Win10開機幾秒倒數取消方法。了解win10開機倒數在win10中，開機倒數預設是啟用的。當我們在開機之後，會看到一個倒數計時的介面，通常是10秒的倒數。在這個時間之內，我們可以選擇是否要繼續開機或進行
