資訊專欄INFORMATION COLUMN
摘要：混合使用計算時分秒本文出自從零到壹全棧部落作者黎躍春追時間的人簡介是推出的一個天挑戰。完整中文版指南及視頻教程在從零到壹全棧部落。效果圖第天挑戰的內容主要是如何將一系列的加起來，最終計算總時間，總時間用時分秒顯示。
Day18 - Reduce、Map混合使用計算時分秒
效果圖本文出自：從零到壹全棧部落
作者：?黎躍春-追時間的人
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用?，F在你看到的是這系列指南的第 18 篇。完整中文版指南及視頻教程在 從零到壹全棧部落。
第18天挑戰的內容主要是如何將一系列的data-time加起來，最終計算總時間，總時間用時分秒顯示。
HTML、CSS代碼Adding Up Times with Reduce
//獲取整個 li NodeList
let items = document.querySelectorAll("ul li");
//創建一個空數組，存儲所有data-time字符串
let itemtimearray = [];
//通過for循環將每個li中的data.time添加到 itemtimearray 數組中
for (let item of items) {
itemtimearray.push(item.dataset.time);
}
//遍歷itemtimearray數組，返回一個新的數組
let spiltitmes = itemtimearray.map(item => {
//通過 : 將字符串拆分成數組
let temp = item.split(":");
//返回對象包涵分和秒的對象
return {
min: temp[0],
sencond: temp[1]
}
});
//初始化分和秒
let totalMin = 0;
let totalSec = 0;
//通過reduce函數將spiltitmes數組中所有的min疊加并存儲到totalMin中
totalMin = spiltitmes.reduce((total, time) => {
return total += parseInt(time.min);
}, 0);
//通過reduce函數將spiltitmes數組中所有的sencond疊加并存儲到totalSec中
totalSec = spiltitmes.reduce((total, time) => {
return total += parseInt(time.sencond);
}, 0);
//求余計算秒
let finalSecond = parseInt(totalSec % 60);
//計算一共多少分鐘
let finalMin = parseInt(totalMin + (totalSec / 60)) % 60;
//計算一共多少小時
let finalHour = parseInt((totalMin + (totalSec / 60)) / 60);
//輸出時分秒
console.log(`共${finalHour}小時,${finalMin}分鐘,${finalSecond}秒。`);
方法二
// 1. [...items] => 將其展開為數組
// 2. Array.from(items) => 使用Array.from()將items轉換為數組
// 獲取所有節點
// 3. const timeNodes = Array.from(document.querySelectorAll("[data-time]"));
// 4. parseFloat:
// [].map(parseFloat) => [].map(function(x) {retunr parseFloat(x)});
// 獲取所有的帶有data-time屬性的節點
const timeNodes = Array.from(document.querySelectorAll("[data-time]"));
const seconds = timeNodes
//返回一個包涵所有data-time值的數組
.map(node => node.dataset.time)
//返回一個將data-time解析成秒的數組
.map(timeCode => {
//timeCode為 1:43 這樣格式的字符串
//timeCode.split(":") 返回一個新數組，數組里面裝的是分和秒的時間
//[].map(parseFloat) => [].map(function(x) {retunr parseFloat(x)});
const [mins, secs] = timeCode.split(":").map(parseFloat);
//將分乘以60+秒，計算所有的秒，并返回
return (mins * 60) + secs;
})
//將數組中的所有的秒疊加并返回
.reduce((total, vidSeconds) => total + vidSeconds);
//通過求余取整計算時分秒
let secondsLeft = seconds;
const hours = Math.floor(secondsLeft / 3600);
secondsLeft = secondsLeft % 3600;
const mins = Math.floor(secondsLeft / 60);
secondsLeft = secondsLeft % 60;
//打印輸出
console.log(hours, mins, secondsLeft);
完結：所有代碼解釋在代碼注釋中。
源碼下載Github Source Code
| 全棧部落 | 區塊鏈部落 |
|---|---|
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84761.html
摘要：更新今天又發現了一種簡單的方法可以直接對年月日時分秒進行操作，假如今天那么所得昨天為昨天的時間前天的時間其中，函數為擴展函數。 1、時間格式化 1 //昨天的時間 2 var day1 = new Date(); 3 day1.setTime(day1.getTime()-24*60*60*1000); 4 var s1 = day1.getFullYear()+- + (da...
閱讀 2069·2023-04-25 22:58
閱讀 1416·2021-09-22 15:20
閱讀 2701·2019-08-30 15:56
閱讀 1996·2019-08-30 15:54
閱讀 2111·2019-08-29 12:31
閱讀 2734·2019-08-26 13:37
閱讀 597·2019-08-26 13:25
閱讀 2102·2019-08-26 11:58
