• 18 使用reduce进行时间累加
    • 挑战任务
    • 实现效果
    • 基本思路
    • 过程指南(以非ES6版本为例)

    18 使用reduce进行时间累加

    本篇作者:©大史快跑Dashrun——Chinasoft Frontend Web Developer

    简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 18 篇。完整指南在 GitHub,喜欢请 Star 哦♪(^∇^*)

    创建时间:2017-08-25
    最后更新:2017-08-29

    挑战任务

    初始文件index-start.html中提供了一个包含多个列表项的无序列表元素,每一个列表项均添加了data-time属性,该属性用表示了时间。要求将所有的时间累加在一起,并用时:分:秒来表示计算的结果。

    实现效果

    结果展示

    基本思路

    1.取得所有lidata-time属性的值,将时间换算为秒并累加求得总时间(单位:秒);

    2.手动计算将总时间转化为新的格式“XX小时XX分XX秒”;

    3.将结果显示在页面上。

    过程指南(以非ES6版本为例)

    1.取得所有li标签

    1. var oLi = document.getElementsByTagName('li');

    2.遍历li元素节点,取得每个data-time的值并以:为界将其分解为含有两个元素的数组,每个数组中含有两项,第一项为表示分钟的字符串,第二项为表示秒的字符串,将两者进行运算转化为表示秒的数字,并添加进新的数组。

    1. for( var i = 0, len = oLi.length; i < len; i++){
    2. var timeItem = oLi[i].dataset['time'].split(':');
    3. //将时间转换为秒
    4. times.push(parseInt(timeItem[0],10)*60+parseInt(timeItem[1],10));
    5. }

    3.将新数组times中各项累加

    1. //方法1.因为times为数组类型,故可以直接使用reduce函数进行累加
    2. return times.reduce(function(a,b){
    3. return a+b;
    4. },0);
    5. //方法2.不熟悉reduce函数的也可通过for循环遍历数组各项进行结果累加

    4.总时间格式转换

    1. //总时间对60取余即为不足1分钟的秒数
    2. var sec = seconds % 60;
    3. //总时间除以3600并向下取整为小时数
    4. var hour = Math.floor(seconds/3600);
    5. //总时间减去前两项即可获得分钟数
    6. var min = (seconds - 3600*hour - sec)/60;

    5.将结果打印在界面上即可