JavaScipt30(第十八个案例)(主要知识点:Array.prototype.map)
承接上文,这是第十八个案例,中间的十到十八我直接看了答案,因为有些例子从他打开的页面看不出他要做什么。
附上项目链接: https://github.com/wesbos/JavaScript30
这个案例主要是要计算所有视频加起来的时长,下面为注释:
<script>
const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
// map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。
// callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。
//map(parseFloat)这样直接转为数字,这个值得借鉴
const seconds = timeNodes
.map(node => node.dataset.time)
.map(timeCode => {
const [mins, secs] = timeCode.split(':').map(parseFloat);
return (mins * 60) + secs;
})
.reduce((total, vidSeconds) => total + vidSeconds); // 所有秒数,每次取除的整数,作为时分,取模作为剩余的秒数,已作为下次使用
let secondsLeft = seconds;
const hours = Math.floor(secondsLeft / 3600);
secondsLeft = secondsLeft % 3600; const mins = Math.floor(secondsLeft / 60);
secondsLeft = secondsLeft % 60; console.log(hours, mins, secondsLeft);
</script>
JavaScipt30(第十八个案例)(主要知识点:Array.prototype.map)的更多相关文章
- JavaScipt30(第二十二个案例)(主要知识点:getBoundingClientRect)
这是第二十二个案例,这个例子实现的是鼠标移入a标签时,将其高亮. 附上项目链接: https://github.com/wesbos/JavaScript30 以下为注释后的源码: <scrip ...
- android 学习随笔二十八(应用小知识点小结 )
去掉标题栏的方法 第一种:也一般入门的时候经常使用的一种方法requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏注意这句一定要写在setConte ...
- R语言学习笔记(十八):零碎知识点46-50
seq_along与seq_len函数的使用 在for循环中有用 > seq_along(c(2,3,5)) [1] 1 2 3 > seq_len(3) [1] 1 2 3
- (三十八)golang--json(对切片、map、结构体进行序列化)
JSON(javascript object notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成.key-val JSON是在2001年开始推广的数据格式,目前已 ...
- 第三十八篇 入门机器学习——Numpy.array的基本操作——查看向量或矩阵
No.1. 初始化状态 No.2. 通过ndim来查看数组维数,向量是一维数组,矩阵是二维数组 No.3. 通过shape来查看向量中元素的个数或矩阵中的行列数 No.4. 通过size来查看数组中的 ...
- 第四十八个知识点:TPM的目的和使用方法
第四十八个知识点:TPM的目的和使用方法 在检查TPM目的之前,值得去尝试理解TPM设计出来的目的是为了克服什么样的问题.真正的问题是信任.信任什么?首先内存和软件运行在电脑上.这些东西能直接的通过操 ...
- 第十八个知识点:画一个描述ECB,CBC,CTR模式的操作
第十八个知识点:画一个描述ECB,CBC,CTR模式的操作 第8周是画三个图的任务,但是维基百科上已经有人画的很好了 https://en.wikipedia.org/wiki/File:ECB_en ...
- 第二十八个知识点:什么是公钥密码学的IND-CCA安全定义?
第二十八个知识点:什么是公钥密码学的IND-CCA安全定义? 我们将在这篇博客中讨论公钥加密的IND-CCA安全. IND-CCA安全代表选择明文的不可伪造性.这样的安全方案的思想就是给定一个密文,攻 ...
- Android基础笔记(十八)- Fragment
博客的感悟终点-開始 什么是Fragment 加入fragment到Activity的两种方式 Fragment的生命周期 Fragment的向下兼容 Fragment之间的通信 博客的感悟,终点-開 ...
随机推荐
- Python随机播放电脑里的音乐
就是找到硬盘中全部的MP3文件和wma文件.再随机打开当中的一个. import os,random disk=['D','E','F','G','H'] def search_file(filena ...
- Windows 7 蓝屏代码大全 & 蓝屏全攻略
关于Windows 7.Vista等系统的蓝屏.之前软媒在Win7之家和Vista之家都有非常多文章讨论过,可是都是筛选的常见的一些问题,今天这个文章是个大全.希望大家看着别头痛.文章收藏下来以后待查 ...
- C++之new和malloc差别
在C++程序猿面试中.非常easy被问到new 和 malloc的差别.偶尔在quora上逛.看到Robert Love的总结.才发现自己仅仅知道里面的一两项就沾沾自喜,从来没有像这位大牛一 ...
- AVD那些事儿
启动了AVD却说找不到AVD 错误提示: No active compatible AVD's or devices found. Relaunch this configuration after ...
- Application Warm-up Module IIS7.5 也有Warm Up功能,让ASP.NET 第一次Request不变慢
Application Warm-up Module: 應用程式的暖機代理人 http://www.microsoft.com/taiwan/technet/iis/expand/Applicatio ...
- YTU 2631: B1 能存各种类型数据的Store类
2631: B1 能存各种类型数据的Store类 时间限制: 1 Sec 内存限制: 128 MB 提交: 245 解决: 177 题目描述 有一种类,海纳百川,可以对任意类型的数据进行存取,造就 ...
- 【Dairy】2016.10.17-1 OIer最悲剧的事情
OIer最悲剧的事情: 看完题,觉得很可做 然后开始码,码了很久 一测样例,不过.. 开始肉眼查错..手玩样例.. 过了很久 ...
- JSP:目录
ylbtech-JSP:目录 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbtech.c ...
- Mysql中分页查询两个方法比较
mysql中分页查询有两种方式, 一种是使用COUNT(*)的方式,具体代码如下 1 2 3 SELECT COUNT(*) FROM foo WHERE b = 1; SELECT a FROM ...
- Java DAO模式
DAO模式: DAO(DateAccessObject,数据存取对象) 位于业务逻辑和持久化数据之间,实现对持久化数据的访问. DAO组成: DAO接口: 数据库的所有操作定义成抽象方法,可以提供多种 ...