Skip to content

Commit 1392581

Browse files
dashnowordsdashnowords
committed
finish the work of day18
1 parent 0a33a07 commit 1392581

6 files changed

Lines changed: 661 additions & 1 deletion

File tree

‎18 - AddingUpTimesWithReduce/README.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# 18 使用reduce进行时间累加
2+
3+
> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Web Developer
4+
5+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 18 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
6+
7+
> 创建时间：2017-08-25
8+
最后更新：2017-08-29
9+
10+
## 挑战任务
11+
初始文件`index-start.html`中提供了一个包含多个列表项的无序列表元素，每一个列表项均添加了`data-time`属性，该属性用**分**和**秒**表示了时间。要求将所有的时间累加在一起，并用`时:分:秒`来表示计算的结果。
12+
13+
## 实现效果
14+
![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/day18-AddingUpTimesWithReduce/effects.png)
15+
16+
## 基本思路
17+
1.取得所有`li`中`data-time`属性的值，将时间换算为秒并累加求得总时间（单位：秒）;<br>
18+
2.手动计算将总时间转化为新的格式“XX小时XX分XX秒”;<br>
19+
3.将结果显示在页面上。
20+
21+
## 过程指南(以非ES6版本为例)
22+
1.取得所有`li`标签
23+
```js
24+
var oLi = document.getElementsByTagName('li');
25+
```
26+
2.遍历`li`元素节点，取得每个`data-time`的值并以：为界将其分解为含有两个元素的数组,每个数组中含有两项，第一项为表示分钟的字符串，第二项为表示秒的字符串，将两者进行运算转化为表示秒的数字，并添加进新的数组。
27+
```js
28+
for( var i = 0, len = oLi.length; i < len; i++){
29+
var timeItem = oLi[i].dataset['time'].split(':');
30+
//将时间转换为秒
31+
times.push(parseInt(timeItem[0],10)*60+parseInt(timeItem[1],10));
32+
}
33+
```
34+
3.将新数组`times`中各项累加
35+
```js
36+
//方法1.因为times为数组类型，故可以直接使用reduce函数进行累加
37+
return times.reduce(function(a,b){
38+
return a+b;
39+
},0);
40+
//方法2.不熟悉reduce函数的也可通过for循环遍历数组各项进行结果累加
41+
```
42+
4.总时间格式转换
43+
```js
44+
//总时间对60取余即为不足1分钟的秒数
45+
var sec = seconds % 60;
46+
//总时间除以3600并向下取整为小时数
47+
var hour = Math.floor(seconds/3600);
48+
//总时间减去前两项即可获得分钟数
49+
var min = (seconds - 3600*hour - sec)/60;
50+
```
51+
5.将结果打印在界面上即可

‎18 - AddingUpTimesWithReduce/effects.png‎

18.9 KB
Loading

‎18 - AddingUpTimesWithReduce/index-finished-Dashrun-es5.html‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Videos</title>
6+
</head>
7+
<body>
8+
<p>总播放时间为：<span id="totaltime"></span></p>
9+
<ul class="videos">
10+
<li data-time="5:43">
11+
Video 1
12+
</li>
13+
<li data-time="2:33">
14+
Video 2
15+
</li>
16+
<li data-time="3:45">
17+
Video 3
18+
</li>
19+
<li data-time="0:47">
20+
Video 4
21+
</li>
22+
<li data-time="5:21">
23+
Video 5
24+
</li>
25+
<li data-time="6:56">
26+
Video 6
27+
</li>
28+
<li data-time="3:46">
29+
Video 7
30+
</li>
31+
<li data-time="5:25">
32+
Video 8
33+
</li>
34+
<li data-time="3:14">
35+
Video 9
36+
</li>
37+
<li data-time="3:31">
38+
Video 10
39+
</li>
40+
<li data-time="5:59">
41+
Video 11
42+
</li>
43+
<li data-time="3:07">
44+
Video 12
45+
</li>
46+
<li data-time="11:29">
47+
Video 13
48+
</li>
49+
<li data-time="8:57">
50+
Video 14
51+
</li>
52+
<li data-time="5:49">
53+
Video 15
54+
</li>
55+
<li data-time="5:52">
56+
Video 16
57+
</li>
58+
<li data-time="5:50">
59+
Video 17
60+
</li>
61+
<li data-time="9:13">
62+
Video 18
63+
</li>
64+
<li data-time="11:51">
65+
Video 19
66+
</li>
67+
<li data-time="7:58">
68+
Video 20
69+
</li>
70+
<li data-time="4:40">
71+
Video 21
72+
</li>
73+
<li data-time="4:45">
74+
Video 22
75+
</li>
76+
<li data-time="6:46">
77+
Video 23
78+
</li>
79+
<li data-time="7:24">
80+
Video 24
81+
</li>
82+
<li data-time="7:12">
83+
Video 25
84+
</li>
85+
<li data-time="5:23">
86+
Video 26
87+
</li>
88+
<li data-time="3:34">
89+
Video 27
90+
</li>
91+
<li data-time="8:22">
92+
Video 28
93+
</li>
94+
<li data-time="5:17">
95+
Video 29
96+
</li>
97+
<li data-time="3:10">
98+
Video 30
99+
</li>
100+
<li data-time="4:43">
101+
Video 31
102+
</li>
103+
<li data-time="19:43">
104+
Video 32
105+
</li>
106+
<li data-time="0:47">
107+
Video 33
108+
</li>
109+
<li data-time="0:47">
110+
Video 34
111+
</li>
112+
<li data-time="3:14">
113+
Video 35
114+
</li>
115+
<li data-time="3:59">
116+
Video 36
117+
</li>
118+
<li data-time="2:43">
119+
Video 37
120+
</li>
121+
<li data-time="4:17">
122+
Video 38
123+
</li>
124+
<li data-time="6:56">
125+
Video 39
126+
</li>
127+
<li data-time="3:05">
128+
Video 40
129+
</li>
130+
<li data-time="2:06">
131+
Video 41
132+
</li>
133+
<li data-time="1:59">
134+
Video 42
135+
</li>
136+
<li data-time="1:49">
137+
Video 43
138+
</li>
139+
<li data-time="3:36">
140+
Video 44
141+
</li>
142+
<li data-time="7:10">
143+
Video 45
144+
</li>
145+
<li data-time="3:44">
146+
Video 46
147+
</li>
148+
<li data-time="3:44">
149+
Video 47
150+
</li>
151+
<li data-time="4:36">
152+
Video 48
153+
</li>
154+
<li data-time="3:16">
155+
Video 49
156+
</li>
157+
<li data-time="1:10">
158+
Video 50
159+
</li>
160+
<li data-time="6:10">
161+
Video 51
162+
</li>
163+
<li data-time="2:14">
164+
Video 52
165+
</li>
166+
<li data-time="3:44">
167+
Video 53
168+
</li>
169+
<li data-time="5:05">
170+
Video 54
171+
</li>
172+
<li data-time="6:03">
173+
Video 55
174+
</li>
175+
<li data-time="12:39">
176+
Video 56
177+
</li>
178+
<li data-time="1:56">
179+
Video 57
180+
</li>
181+
<li data-time="4:04">
182+
Video 58
183+
</li>
184+
</ul>
185+
<script>
186+
//计算总时间
187+
var totaltime = timeTransAndReduce();
188+
189+
//格式化时间并显示
190+
timeFormatter(totaltime);
191+
192+
function timeTransAndReduce(){
193+
var times = [];
194+
var oLi = document.getElementsByTagName('li');
195+
//构建时间数组
196+
for( var i = 0, len = oLi.length; i < len; i++){
197+
var timeItem = oLi[i].dataset['time'].split(':');
198+
times.push(parseInt(timeItem[0],10)*60+parseInt(timeItem[1],10));//将时间转换为秒
199+
}
200+
//累加时间并将结果返回
201+
return times.reduce(function(a,b){
202+
return a+b;
203+
},0);
204+
}
205+
206+
//修改总时间表达式
207+
function timeFormatter(seconds) {
208+
var sec = seconds % 60;
209+
var hour = Math.floor(seconds/3600);
210+
var min = (seconds - 3600*hour - sec)/60;
211+
document.getElementById('totaltime').innerHTML = hour+'小时'+min+'分'+sec+'秒';
212+
}
213+
214+
</script>
215+
</body>
216+
</html>

0 commit comments

Comments
 (0)