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之间的通信 博客的感悟,终点-開 ...
随机推荐
- GSON学习笔记之初识GSON
引用"JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,採用全然独立于语言的文本格式.为Web应用开发提供了一种理想的数据交换格式. " ...
- 通讯编程入门--WEBSOCKET
C#通讯编程入门--WEBSOCKET WebSocket服务端 C#示例代码 using System; using System.Collections.Generic; using System ...
- 《深入理解Android 卷III》第四章 深入理解WindowManagerService
<深入理解Android 卷III>即将公布,作者是张大伟.此书填补了深入理解Android Framework卷中的一个主要空白.即Android Framework中和UI相关的部分. ...
- 2016/2/19 css样式表 Cascading Style Sheet 叠层样式表 美化HTML网页
一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联 ...
- 2016/2/18 html 图片热点,网页划区,拼接,表单
①图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 显示 ②网页划区 在一个网页里,规划出一个区域用来展示另一个网页的内容. ③网页拼接 在一个网络页面内,规划 ...
- HDU 3308 线段树单点更新+区间查找最长连续子序列
LCIS Time Limit: 6000/2000 MS (Java/Oth ...
- Massive Data Mining学习记录
第一周: 学习PageRank, 知识点:每个节点的权值由其他节点的投票决定,所有节点的权值和为1 当节点很多时候必须转换成矩阵运算来计算节点的最终值,由马尔可夫链可以证明,这个值可以迭代得到 问题: ...
- linux 和win7 双系统模式下 忘记win7 密码的修改方法
首先登陆linux系统,在linux 系统下找到win7系统的安装盘(比如为C盘), (1)进入到C://windows/system32下 找到osk.exe 文件,并将其剪切到其他的地方(记住这个 ...
- 【HDU 1005】 Number Sequence
[题目链接] 点击打开链接 [算法] 矩阵乘法快速幂,即可 [代码] #include<bits/stdc++.h> using namespace std; int a,b,n; str ...
- FreeMarker:什么是 FreeMarker?
ylbtech-FreeMarker:什么是 FreeMarker? 1.返回顶部 1. FreeMarker 是一款 模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页,电 ...