承接上文,这是第十八个案例,中间的十到十八我直接看了答案,因为有些例子从他打开的页面看不出他要做什么。

附上项目链接: 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)的更多相关文章

  1. JavaScipt30(第二十二个案例)(主要知识点:getBoundingClientRect)

    这是第二十二个案例,这个例子实现的是鼠标移入a标签时,将其高亮. 附上项目链接: https://github.com/wesbos/JavaScript30 以下为注释后的源码: <scrip ...

  2. android 学习随笔二十八(应用小知识点小结 )

    去掉标题栏的方法 第一种:也一般入门的时候经常使用的一种方法requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏注意这句一定要写在setConte ...

  3. 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

  4. (三十八)golang--json(对切片、map、结构体进行序列化)

    JSON(javascript object notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成.key-val JSON是在2001年开始推广的数据格式,目前已 ...

  5. 第三十八篇 入门机器学习——Numpy.array的基本操作——查看向量或矩阵

    No.1. 初始化状态 No.2. 通过ndim来查看数组维数,向量是一维数组,矩阵是二维数组 No.3. 通过shape来查看向量中元素的个数或矩阵中的行列数 No.4. 通过size来查看数组中的 ...

  6. 第四十八个知识点:TPM的目的和使用方法

    第四十八个知识点:TPM的目的和使用方法 在检查TPM目的之前,值得去尝试理解TPM设计出来的目的是为了克服什么样的问题.真正的问题是信任.信任什么?首先内存和软件运行在电脑上.这些东西能直接的通过操 ...

  7. 第十八个知识点:画一个描述ECB,CBC,CTR模式的操作

    第十八个知识点:画一个描述ECB,CBC,CTR模式的操作 第8周是画三个图的任务,但是维基百科上已经有人画的很好了 https://en.wikipedia.org/wiki/File:ECB_en ...

  8. 第二十八个知识点:什么是公钥密码学的IND-CCA安全定义?

    第二十八个知识点:什么是公钥密码学的IND-CCA安全定义? 我们将在这篇博客中讨论公钥加密的IND-CCA安全. IND-CCA安全代表选择明文的不可伪造性.这样的安全方案的思想就是给定一个密文,攻 ...

  9. Android基础笔记(十八)- Fragment

    博客的感悟终点-開始 什么是Fragment 加入fragment到Activity的两种方式 Fragment的生命周期 Fragment的向下兼容 Fragment之间的通信 博客的感悟,终点-開 ...

随机推荐

  1. javascript返回顶端源代码

    <div style="display:none" id="goTopBtn"><img src="http://www.unity ...

  2. Ubuntu安装JDK及环境变量配置(sun java)

    捣鼓了尽一天的时间,终于把sun的java安装上了,不是openjava了,网上试了好多的方法好多都是不可以的,所以当自己成功后就立马把方法贴出来,以方便后来者少走弯路,此文的方法绝对可行! 这里先简 ...

  3. 远程查看日志-linux

    ssh 连接服务器 ssh user@www.xxx.com -p60022 用户名@ip 端口 进入日志所在目录 cat FILENAME 查看文本文件,P.S. 在查较大文件时为了避免刷屏,请使用 ...

  4. cordova常用命令

    安装 cordova: npm install -g cordova 创建应用程序 cordova create hello com.example.hello HelloWorld 添加平台 cor ...

  5. flash builder 4.6 下载完成后安装不成功

    从网上下载了一下flash builder 4.6 下载完成后安装不成功,说是有一个安装被挂起,不成安装成功结果从注册表中删除了pendingobject,还是不行,没有办法,从网上搜了一下,发现了大 ...

  6. CSU 1807: 最长上升子序列~ 分类讨论

    1807: 最长上升子序列~ Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 138  Solved: 17[Submit][Status][Web Bo ...

  7. JSP-Runood:Eclipse JSP/Servlet 环境搭建

    ylbtech-JSP-Runood:Eclipse JSP/Servlet 环境搭建 1.返回顶部 1. Eclipse JSP/Servlet 环境搭建 本文假定你已安装了 JDK 环境,如未安装 ...

  8. POJ 1659 Frogs' Neighborhood (贪心)

    题意:中文题. 析:贪心策略,先让邻居多的选,选的时候也尽量选邻居多的. 代码如下: #pragma comment(linker, "/STACK:1024000000,102400000 ...

  9. CodeForces 124C Prime Permutation (数论+贪心)

    题意:给定一个字符串,问你能不能通过重排,使得任意一个素数p <= 字符串长度n,并且 任意的 i <= 长度n/素数p,满足s[p] == s[p*i]. 析:很容易能够看出来,只要是某 ...

  10. BZOJ4543/BZOJ3522 [POI2014]Hotel加强版(长链剖分)

    题目好神仙--这个叫长链剖分的玩意儿更神仙-- 考虑dp,设\(f[i][j]\)表示以\(i\)为根的子树中到\(i\)的距离为\(j\)的点的个数,\(g[i][j]\)表示\(i\)的子树中有\ ...