资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Day18 - Reduce、Map混合使用计算时分秒

Day18 - Reduce、Map混合使用计算时分秒

raoyi / 1938人阅读

摘要：混合使用计算时分秒本文出自从零到壹全栈部落作者黎跃春追时间的人简介是推出的一个天挑战。完整中文版指南及视频教程在从零到壹全栈部落。效果图第天挑战的内容主要是如何将一系列的加起来，最终计算总时间，总时间用时分秒显示。

Day18 - Reduce、Map混合使用计算时分秒 
本文出自：从零到壹全栈部落
作者：©黎跃春-追时间的人 
简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 18 篇。完整中文版指南及视频教程在 从零到壹全栈部落。
效果图

第18天挑战的内容主要是如何将一系列的data-time加起来，最终计算总时间，总时间用时分秒显示。

HTML、CSS代码 




  
  Adding Up Times with Reduce



  
    
    
  • 
      Video 1
    
    • 
    
  • 
      Video 2
    
    • 
    
  • 
      Video 3
    
    • 
    
  • 
      Video 4
    
    • 
    
  • 
      Video 5
    
    • 
    
  • 
      Video 6
    
    • 
    
  • 
      Video 7
    
    • 
    
  • 
      Video 8
    
    • 
    
  • 
      Video 9
    
    • 
    
  • 
      Video 10
    
    • 
    
  • 
      Video 11
    
    • 
    
  • 
      Video 12
    
    • 
    
  • 
      Video 13
    
    • 
    
  • 
      Video 14
    
    • 
    
  • 
      Video 15
    
    • 
    
  • 
      Video 16
    
    • 
    
  • 
      Video 17
    
    • 
    
  • 
      Video 18
    
    • 
    
  • 
      Video 19
    
    • 
    
  • 
      Video 20
    
    • 
    
  • 
      Video 21
    
    • 
    
  • 
      Video 22
    
    • 
    
  • 
      Video 23
    
    • 
    
  • 
      Video 24
    
    • 
    
  • 
      Video 25
    
    • 
    
  • 
      Video 26
    
    • 
    
  • 
      Video 27
    
    • 
    
  • 
      Video 28
    
    • 
    
  • 
      Video 29
    
    • 
    
  • 
      Video 30
    
    • 
    
  • 
      Video 31
    
    • 
    
  • 
      Video 32
    
    • 
    
  • 
      Video 33
    
    • 
    
  • 
      Video 34
    
    • 
    
  • 
      Video 35
    
    • 
    
  • 
      Video 36
    
    • 
    
  • 
      Video 37
    
    • 
    
  • 
      Video 38
    
    • 
    
  • 
      Video 39
    
    • 
    
  • 
      Video 40
    
    • 
    
  • 
      Video 41
    
    • 
    
  • 
      Video 42
    
    • 
    
  • 
      Video 43
    
    • 
    
  • 
      Video 44
    
    • 
    
  • 
      Video 45
    
    • 
    
  • 
      Video 46
    
    • 
    
  • 
      Video 47
    
    • 
    
  • 
      Video 48
    
    • 
    
  • 
      Video 49
    
    • 
    
  • 
      Video 50
    
    • 
    
  • 
      Video 51
    
    • 
    
  • 
      Video 52
    
    • 
    
  • 
      Video 53
    
    • 
    
  • 
      Video 54
    
    • 
    
  • 
      Video 55
    
    • 
    
  • 
      Video 56
    
    • 
    
  • 
      Video 57
    
    • 
    
  • 
      Video 58
    
    •
JS代码 方法一 
//获取整个 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

全栈部落 区块链部落
混合云 超融合服务器 map-reduce oracle时分秒 javascript时分秒 时分秒php代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84761.html

相关文章

  • Java8学习小记

    摘要：但有一个限制它们不能修改定义的方法的局部变量的内容。如前所述，这种限制存在的原因在于局部变量保存在栈上，并且隐式表示它们仅限于其所在线程。 2014年，Oracle发布了Java8新版本。对于Java来说，这显然是一个具有里程碑意义的版本。尤其是那函数式编程的功能，避开了Java那烦琐的语法所带来的麻烦。 这可以算是一篇Java8的学习笔记。将Java8一些常见的一些特性作了一个概要的...

    CHENGKANG 评论0 收藏0

  • Java时间类总结

    摘要：获取当天是几号获取当天是星期几获取本月的第一天取本月最后一天是不是很赞提供时分秒不提供年月日，也是线程安全并且不可变类。样例获取当前的小时小时数加结果包含年月日时分秒，精确到纳秒级别，同样是线程安全并且不可变类。 java.util.Date 包含有年月日时分秒，精确到毫秒级别。官方解释： // The class Date represents a specific instant ...

    coolpail 评论0 收藏0

  • js获取当前时间(昨天、今天、明天)

    摘要：更新今天又发现了一种简单的方法可以直接对年月日时分秒进行操作，假如今天那么所得昨天为昨天的时间前天的时间其中，函数为扩展函数。 1、时间格式化 1 //昨天的时间 2 var day1 = new Date(); 3 day1.setTime(day1.getTime()-24*60*60*1000); 4 var s1 = day1.getFullYear()+- + (da...

    rainyang 评论0 收藏0

发表评论

登陆后可评论

0条评论

raoyi

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<