18 使用reduce进行时间累加

优质
小牛编辑
127浏览
2023-12-01

挑战任务

初始文件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.将结果打印在界面上即可