• 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>
    好记性不如烂笔头,看到自己觉得应该记录的知识点,结合自己的理解进行记录,用于以后回顾。
  • 相关阅读:
    Docker 安装NGINX
    Ant 使用setFieldsValue更新Form表单值
    SpringSecurity设置角色和权限
    java 获取昨天、今天、明天的时间
    Ubuntu 20.04 root ssh登录配置
    http: server gave HTTP response to HTTPS client解决方案:
    06-多线程笔记-2-锁-3-Lock
    05-多线程笔记-2-锁-2-Synchronized
    04-多线程笔记-2-锁-1-死锁
    volatile
  • 原文地址:https://www.cnblogs.com/wangxi01/p/10675250.html
Copyright © 2020-2023  润新知