18、使用reduce进行时间累加

最新推荐文章于 2022-07-01 16:18:51 发布

弱鸡如我

最新推荐文章于 2022-07-01 16:18:51 发布

阅读量523

点赞数

分类专栏：原生JavaScript练习

本文链接：https://blog.csdn.net/qq_37152533/article/details/108792239

版权

原生JavaScript练习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

目标

一个包含多个列表项的无序列表元素，每一个列表项均添加了data-time属性，该属性用分和秒表示了时间。要求将所有的时间累加在一起，并用时:分:秒来表示计算的结果。

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Videos</title>
</head>

<body>
  <div id="totaltime"></div>
  <ul class="videos">
    <li data-time="5:43">
      Video 1
    </li>
    <li data-time="2:33">
      Video 2
    </li>
    <li data-time="3:45">
      Video 3
    </li>
    <li data-time="0:47">
      Video 4
    </li>
    <li data-time="5:21">
      Video 5
    </li>
    <li data-time="6:56">
      Video 6
    </li>
    <li data-time="3:46">
      Video 7
    </li>
    <li data-time="5:25">
      Video 8
    </li>
    <li data-time="3:14">
      Video 9
    </li>
    <li data-time="3:31">
      Video 10
    </li>
    <li data-time="5:59">
      Video 11
    </li>
    <li data-time="3:07">
      Video 12
    </li>
    <li data-time="11:29">
      Video 13
    </li>
    <li data-time="8:57">
      Video 14
    </li>
    <li data-time="5:49">
      Video 15
    </li>
    <li data-time="5:52">
      Video 16
    </li>
    <li data-time="5:50">
      Video 17
    </li>
    <li data-time="9:13">
      Video 18
    </li>
    <li data-time="11:51">
      Video 19
    </li>
    <li data-time="7:58">
      Video 20
    </li>
    <li data-time="4:40">
      Video 21
    </li>
    <li data-time="4:45">
      Video 22
    </li>
    <li data-time="6:46">
      Video 23
    </li>
    <li data-time="7:24">
      Video 24
    </li>
    <li data-time="7:12">
      Video 25
    </li>
    <li data-time="5:23">
      Video 26
    </li>
    <li data-time="3:34">
      Video 27
    </li>
    <li data-time="8:22">
      Video 28
    </li>
    <li data-time="5:17">
      Video 29
    </li>
    <li data-time="3:10">
      Video 30
    </li>
    <li data-time="4:43">
      Video 31
    </li>
    <li data-time="19:43">
      Video 32
    </li>
    <li data-time="0:47">
      Video 33
    </li>
    <li data-time="0:47">
      Video 34
    </li>
    <li data-time="3:14">
      Video 35
    </li>
    <li data-time="3:59">
      Video 36
    </li>
    <li data-time="2:43">
      Video 37
    </li>
    <li data-time="4:17">
      Video 38
    </li>
    <li data-time="6:56">
      Video 39
    </li>
    <li data-time="3:05">
      Video 40
    </li>
    <li data-time="2:06">
      Video 41
    </li>
    <li data-time="1:59">
      Video 42
    </li>
    <li data-time="1:49">
      Video 43
    </li>
    <li data-time="3:36">
      Video 44
    </li>
    <li data-time="7:10">
      Video 45
    </li>
    <li data-time="3:44">
      Video 46
    </li>
    <li data-time="3:44">
      Video 47
    </li>
    <li data-time="4:36">
      Video 48
    </li>
    <li data-time="3:16">
      Video 49
    </li>
    <li data-time="1:10">
      Video 50
    </li>
    <li data-time="6:10">
      Video 51
    </li>
    <li data-time="2:14">
      Video 52
    </li>
    <li data-time="3:44">
      Video 53
    </li>
    <li data-time="5:05">
      Video 54
    </li>
    <li data-time="6:03">
      Video 55
    </li>
    <li data-time="12:39">
      Video 56
    </li>
    <li data-time="1:56">
      Video 57
    </li>
    <li data-time="4:04">
      Video 58
    </li>
  </ul>
 
  <script>
    var oLi = document.getElementsByTagName('li');
    var sum = Array.from(oLi).map(element => {
      var timeItem = element.dataset['time'].split(':');
      return parseInt(timeItem[0],10)*60+parseInt(timeItem[1],10);
    }).reduce(function (a, b) {
      return a + b;
    }, 0);
    let time  = new Date(sum*1000);
    // getHours() 方法根据本地时间，返回一个指定的日期对象的小时,这里自动加上了东八区的8个小时，故减去
    document.querySelector('#totaltime').innerHTML = `${time.getHours()-8}小时${time.getMinutes()}分${time.getSeconds()}秒`;

  </script>
</body>

</html>