js 計算當年還剩多少時間的倒數計時 javascript 原理解析【複製到編輯器查看推薦】

時間 2020-04-21

標籤計算當年多少時間倒數計時 javascript 原理解析複製到編輯器查看推薦欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div id="show" style="text-align:center;font-size:18px;color:#fff;padding:10px 0;font-weight:bold">Loading...</div>

function getLastTime(){

// 獲取系統如今時間

var date = new Date();

// 獲取今年年份

var year = date.getFullYear();

// 建立獲取指定時間爲：今年12月31日23時59分59秒，問：爲何不是24小時？由於小時在js中是從0開始算的0~23，分和秒也是同樣從0~59

var endDate = new Date(year,12,31,23,59,59);

// 指定時間毫秒數減去如今時間毫秒數得出兩個時間之間的毫秒差值

// 咱們知道1000毫秒等於1秒，60秒等於1分鐘，60分鐘等於1個小時，24個小時等於1天，問：那怎麼用毫秒差得出距離的天數或者小時、分鐘呢？

/* 答：拿天數好比以此類推：

1. 首先咱們將毫秒數除於1000得出秒數，由於1000毫秒等於1秒

2. 得出時間差的秒數後，咱們須要算出一天有多少秒？，咱們知道一天有24個小時每一個小時60分鐘每分鐘60秒，因此只須要24小時乘於60分鐘得出1440分鐘，而後1440分鐘乘於60秒得出86400秒

3. 得出一天有86400秒後除於時間差的秒就得出距離指定日期還有多少天了

var time = Math.floor((endDate.getTime() - date.getTime())/1000);

// 獲取差值的天數

var day = Math.floor(time/(24*60*60));

// 獲取差值的小時，時間差秒數取餘數86400秒再除於一個小時3600秒得出相差小時，問:爲何取一天的秒的餘數呢？？，

// 答：時間差的秒除於1天的秒數，咱們取這個的餘數至關於取了不夠除於1天的秒數，也就是說還剩下多少秒就是還剩下多少小時，

// 由於若是足夠除於一天的秒數那就是距離還有多少天了也就是天的數值了，而小時則是剩下的秒除於 60分鐘乘於60秒得出一個小時有3600秒而後再除於剩下的秒就變成多少小時了。

// 後面的分鐘和秒數你們自已動手算吧。

// 注意：相同優先級運算符按從左到右的順序計算

// 附上一份mdn的運算符優先級表：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

var hour = Math.floor(time%(24*60*60)/(60*60));

// 獲取差值的分鐘，簡單來講就是取餘的做用就是得出不夠一天的秒數和不夠一個小時的秒數後除於60秒得出分鐘

var minute = Math.floor(time%(24*60*60)%(60*60)/60);

// 獲取差值的秒數,簡單來講就是取餘的做用就是得出不夠一天的秒數和不夠一個小時的秒數和不夠一分鐘的秒

var second = Math.floor(time%(24*60*60)%(60*60)%60);

// 若是數值小於9則是一位數，則補0

day = day > 9 ? day : '0' + day;

hour = hour > 9 ? hour : '0' + hour;

minute = minute > 9 ? minute : '0' + minute;

second = second > 9 ? second : '0' + second;

// 獲取顯示元素將結果輸出

document.getElementById("show").textContent = year +"年還剩"+day+"天"+hour+"時"+minute+"分"+second+"秒";

}

// 頁面加載後，就調用一次，解決一秒後出現的問題

getLastTime();

// 設置1秒定時以刷新時間

setInterval(getLastTime,1000);

</script>

</body>

</html>

建議將以上代碼複製到編輯器查看，更容易查看

原文出處：https://www.cnblogs.com/xiaolantian/p/10389410.htmljavascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。