【原生javascript项目】Time with Redece 18

作者：©Iaine 万一
简介：30 Day Challenge是 Wes Bos 设计的一个 30 天原生js编程挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。

本项目为第18天的“利用reduce进行时间累加”项目。Have fun with the website! ♪(^∇^*)

源代码：https://github.com/janice143/JavaScript30Program/tree/master/18%20timeWithReduce/index.html

项目描述

项目首先在html中提供了若干个属性名为data-time的列表元素，data-time的值以00:00（分：秒）的格式显示。要求在JS中计算出data-time的总值，并且用？时？分？秒的格式显示结果。

项目重点

Array.from()
timeNode.dataset.time
.split(':')
.map(parseFloat)
.reduce()
Math.floor()

项目过程

HTML部分

若干个li标签，添加了data-time属性

JS部分

JS的整体思路是先获取所有的data-time的值，然后将所有值转化成秒，并且计算出的总秒数。根据总秒数得到对应的时、分、秒。

为了显示最后的结果，在本项目中国通过创建一个p元素来实现。

获取所有的data-time元素，转化成数组，并存储在timeNodes变量中
1
const timeNodes = Array.from(document.querySelectorAll('[data-time]'));

从timeNodes中可以得到data-time的值

1
2
3

const seconds = timeNodes.map(
    timeNode => timeNode.dataset.time
)

将每个data-time的值转化成秒

.map(
    timeCode => {
        const [min, sec] = timeCode.split(':').map(parseFloat)
        // console.log(typeof(min),sec)
        return (min*60)+sec
    }
)

利用reduce方法累加得到总秒数

1
2
3

.reduce(
    (total,vidSecond) => total + vidSecond
)

根据总秒数，计算出时、分、秒

let leftSec = seconds;
const hour = Math.floor(leftSec/3600);
leftSec = leftSec % 3600;

const min = Math.floor(leftSec/60);
leftSec = leftSec % 60;

新建一个p元素，添加显示内容，最后挂载到网页上，显示结果

function display(hour,min,leftSec){
    // 使用createElement创建元素
    const newTaskItem = document.createElement('p');
    newTaskItem.className = 'total-time';
    const html =
          `
          总播放时间为：${hour}小时${min}分${leftSec}秒。
`;
    newTaskItem.innerHTML = html;
    document.querySelector('ul').before(newTaskItem);
}

项目补充

Array.from：将一个伪数组对象转化成数组。

.split()：将一个String对象分割成子字符串数组

`parseFloat(string)`将字符串解析为浮点数

如果 parseFloat 在解析过程中遇到了正号（+）、负号（- ）、数字（0-9）、小数点（.）、或者科学记数法中的指数（e 或 E）以外的字符，则它会忽略该字符以及之后的所有字符，返回当前已经解析到的浮点数。
第二个小数点的出现也会使解析停止。
参数首位和末位的空白符会被忽略。
如果字符串的第一个字符不能被解析成为数字，则返回 NaN。
parseFloat 也可以解析并返回 Infinity。

reduce方法

语法

1	arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

initialValue为作为第一次调用 callback函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。

示例

1
2
3

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue){
  return accumulator + currentValue;
}); // 10

JS30的第18个项目圆满完成啦，感谢阅读，有问题联系我的邮箱[email protected].

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。