SOURCE

const data = [
  {
    "page": 1,

    "part": "01_尚硅谷_JDBC课程内容概述",
    "duration": 575
  },
  {
    "page": 2,

    "part": "02_尚硅谷_课件结构说明与数据库数据的导入",
    "duration": 211
  },
  {
    "page": 3,

    "part": "03_尚硅谷_软件架构方式介绍",
    "duration": 470
  },
  {
    "page": 4,

    "part": "04_尚硅谷_JavaWeb技术概览",
    "duration": 1208
  },
  {
    "page": 5,

    "part": "05_尚硅谷_JDBC概述",
    "duration": 1072
  },
  {
    "page": 6,

    "part": "06_尚硅谷_JDBC程序编写步骤",
    "duration": 418
  },
  {
    "page": 7,

    "part": "07_尚硅谷_获取数据库连接的方式一",
    "duration": 1039
  },
  {
    "page": 8,

    "part": "08_尚硅谷_获取数据库连接的方式二",
    "duration": 347
  },
  {
    "page": 9,

    "part": "09_尚硅谷_获取数据库连接的方式三",
    "duration": 288
  },
  {
    "page": 10,

    "part": "10_尚硅谷_获取数据库连接的方式四",
    "duration": 369
  },
  {
    "page": 11,

    "part": "11_尚硅谷_获取数据库连接的方式五",
    "duration": 834
  },
  {
    "page": 12,

    "part": "12_尚硅谷_Statement操作数据库的弊端演示",
    "duration": 1134
  },
  {
    "page": 13,

    "part": "13_尚硅谷_PreparedStatement实现表数据的添加操作",
    "duration": 1199
  },
  {
    "page": 14,

    "part": "14_尚硅谷_JDBCUtils：封装据库连接和关闭操作",
    "duration": 249
  },
  {
    "page": 15,

    "part": "15_尚硅谷_PreparedStatement实现表数据的修改操作",
    "duration": 421
  },
  {
    "page": 16,

    "part": "16_尚硅谷_PreparedStatement实现通用的增删改操作",
    "duration": 786
  },
  {
    "page": 17,

    "part": "17_尚硅谷_针对customers表的查询操作举例",
    "duration": 1319
  },
  {
    "page": 18,

    "part": "18_尚硅谷_针对customers表的通用的查询操作",
    "duration": 1189
  },
  {
    "page": 19,

    "part": "19_尚硅谷_针对Order表的通用的查询操作",
    "duration": 1464
  },
  {
    "page": 20,

    "part": "20_尚硅谷_图解查询操作的流程",
    "duration": 679
  },
  {
    "page": 21,

    "part": "21_尚硅谷_PreparedStatement针对不同表的通用查询操作1",
    "duration": 542
  },
  {
    "page": 22,

    "part": "22_尚硅谷_PreparedStatement针对不同表的通用查询操作2",
    "duration": 507
  },
  {
    "page": 23,

    "part": "23_尚硅谷_PreparedStatement解决SQL注入问题",
    "duration": 635
  },
  {
    "page": 24,

    "part": "24_尚硅谷_小结",
    "duration": 339
  },
  {
    "page": 25,

    "part": "25_尚硅谷_课后练习1",
    "duration": 704
  },
  {
    "page": 26,

    "part": "26_尚硅谷_课后练习2：添加四六级成绩",
    "duration": 623
  },
  {
    "page": 27,

    "part": "27_尚硅谷_课后练习2：查询考试结果",
    "duration": 1080
  },
  {
    "page": 28,

    "part": "28_尚硅谷_课后练习2：删除考试数据",
    "duration": 522
  },
  {
    "page": 29,

    "part": "29_尚硅谷_向数据表中插入Blob类型数据",
    "duration": 546
  },
  {
    "page": 30,

    "part": "30_尚硅谷_从数据表中读取Blob类型数据",
    "duration": 825
  },
  {
    "page": 31,

    "part": "31_尚硅谷_插入Blob字段特殊情况的说明",
    "duration": 334
  },
  {
    "page": 32,

    "part": "32_尚硅谷_批量插入数据的操作1",
    "duration": 951
  },
  {
    "page": 33,

    "part": "33_尚硅谷_批量插入数据的操作2",
    "duration": 808
  },
  {
    "page": 34,

    "part": "34_尚硅谷_数据库连接及PreparedStatement使用小结",
    "duration": 1068
  },
  {
    "page": 35,

    "part": "35_尚硅谷_数据库事务的问题引入",
    "duration": 501
  },
  {
    "page": 36,

    "part": "36_尚硅谷_何为事务及数据库事务的处理原则",
    "duration": 794
  },
  {
    "page": 37,

    "part": "37_尚硅谷_考虑事务以后的代码实现",
    "duration": 507
  },
  {
    "page": 38,

    "part": "38_尚硅谷_设置连接恢复为默认状态",
    "duration": 155
  },
  {
    "page": 39,

    "part": "39_尚硅谷_事务的ACID属性及4种隔离级别",
    "duration": 1044
  },
  {
    "page": 40,

    "part": "40_尚硅谷_命令行验证MySQL的隔离级别",
    "duration": 945
  },
  {
    "page": 41,

    "part": "41_尚硅谷_Java代码演示并设置数据库的隔离级别",
    "duration": 815
  },
  {
    "page": 42,

    "part": "42_尚硅谷_提供操作数据表的BaseDAO",
    "duration": 582
  },
  {
    "page": 43,

    "part": "43_尚硅谷_CustomerDAO及CustomerDAOImpl的实现",
    "duration": 1072
  },
  {
    "page": 44,

    "part": "44_尚硅谷_CustomerDAOImpl的单元测试",
    "duration": 741
  },
  {
    "page": 45,

    "part": "45_尚硅谷_升级以后的DAO及相关类的测试",
    "duration": 950
  },
  {
    "page": 46,

    "part": "46_尚硅谷_数据库连接池技术概述",
    "duration": 921
  },
  {
    "page": 47,

    "part": "47_尚硅谷_C3P0数据库连接池的两种实现方式",
    "duration": 1308
  },
  {
    "page": 48,

    "part": "48_尚硅谷_JDBCUtils中使用C3P0数据库连接池获取连接",
    "duration": 350
  },
  {
    "page": 49,

    "part": "49_尚硅谷_DBCP数据库连接池的两种实现方式",
    "duration": 1222
  },
  {
    "page": 50,

    "part": "50_尚硅谷_Druid数据库连接池技术的实现",
    "duration": 847
  },
  {
    "page": 51,

    "part": "51_尚硅谷_使用QueryRunner测试添加数据的操作",
    "duration": 767
  },
  {
    "page": 52,

    "part": "52_尚硅谷_使用QueryRunner查询表中一条或多条记录的操作",
    "duration": 879
  },
  {
    "page": 53,

    "part": "53_尚硅谷_使用QueryRunner查询表中特殊值的操作",
    "duration": 316
  },
  {
    "page": 54,

    "part": "54_尚硅谷_自定义ResultSetHandler的实现类完成查询操作",
    "duration": 573
  },
  {
    "page": 55,

    "part": "55_尚硅谷_DbUtils类关闭资源的操作",
    "duration": 266
  },
  {
    "page": 56,

    "part": "56_尚硅谷_JDBC总复习-上",
    "duration": 2224
  },
  {
    "page": 57,

    "part": "57_尚硅谷_JDBC总复习-下",
    "duration": 2273
  }
];


let statistic = {};

/**
 * 确认点击事件
 */
function submit() {
  if (document) {
    let startPage = parseInt(_getNodeValue('start'));
    let endPage = parseInt(_getNodeValue('end'));
    let speed = parseFloat(_getNodeValue('speed'));

    if (!speed || speed <= 0) {
        speed = 1; // 设置默认速度为1倍速
    }

    if (startPage >= 0 && endPage > 0 && speed > 0) {
      _computeDuration(startPage, endPage);
      let sumDuration = statistic.sumDuration;
      let hours = _getHours(sumDuration);
      let speedHours = _getSpeedHours(hours, speed);
      _insertTxt('duration', `总时长：${hours} 小时（约为 ${_getMinutes(hours * 60 * 60)}）`);
      _insertTxt('speedDuration', `${speed}倍速播放后所需时长：${speedHours} 小时（约为 ${_getMinutes(sumDuration / speed)} ）`);
      _insertTxt('info', `平均时长：${_getMinutes(statistic.average)}  最长时长：${_getMinutes(statistic.max)}  最短时长：${_getMinutes(statistic.min)}`);      
    } else {
      alert('请输入正确的参数');
    }
  }
}

/**
 * 获取input节点输入内容
 * @param {String} node 节点id
 */
function _getNodeValue(node) {
  return document.getElementById(node).value;
}

/**
 * 根据起始集数和结束集数计算总时长
 * @param {number} start 起始集数
 * @param {number} end 结束集数
 */
function _computeDuration(start, end) {
  let sumDuration = 0,
    max = 0,
    min = 10000,
    average = 0;
  data.forEach((element) => {
    if(start > end) {
      let temp = start;
      start = end;
      end = temp;
    }
    if (element.page >= start && element.page <= end) {
      sumDuration += element.duration;
      if (max < element.duration) {
          max = element.duration;
      }
      if (min > element.duration) {
          min = element.duration;
      }      
    }
  });

  average = Math.floor(sumDuration / (end - start + 1) * 100) / 100;

  statistic = {
      sumDuration,
      max,
      min,
      average
  }  
}

/**
 * 获取总时长（小时数）
 * @param {int} sumDuration 总秒数
 */
function _getHours(second) {
  return second && second > 0
    ? Math.floor((second / 60 / 60) * 100) / 100
    : 0;
}

function _getMinutes(second) {
    if (second && second > 0) {
        let m = Math.floor(second / 60) || 0;
        let s = Math.floor(second % 60);
        return `${m}:${s}`;
    }   
    return ''; 
}

/**
 * 获取倍速后时长数
 * @param {number} sumHours 总小时数
 * @param {number} speed 倍速
 */
function _getSpeedHours(sumHours, speed) {
  return sumHours && sumHours > 0
    ? Math.floor((sumHours / speed) * 100) / 100
    : 0;
}

/**
 * 向页面添加元素
 * @param {String} nodeId 节点id
 * @param {String} txt 文本内容
 */
function _insertTxt(nodeId, ...txt) {
  let node = document.getElementById(nodeId);
  node.innerHTML = '';
  if (node != null && txt != null) {
    txt.forEach(content => {
        node.appendChild(document.createTextNode(content));
    });    
  }
}

/**
 * 监听回车点击事件
 */
document.onkeydown = (e) => {
    if(e.keyCode == 13){
        submit();
    }
}

<html>
    <head>
        <title>JDBC学习时长统计</title>
    </head>
    <body>
        <div class="flex-center container">
            <input id="start" class="input" placeholder="请输入开始集数" value=""/>
            <input id="end" class="input" placeholder="请输入结束集数" />
            <input id="speed" class="input" placeholder="请输入平均播放倍速" value=""/>                        
            <div class="flex-center">
                <button class="btn" onclick="submit()">确认 (Enter)</button>
            </div>
            <div class="info-container">
                <div id="duration" class="info"></div>
                <div id="info" class="info"></div>
                <div id="speedDuration" class="info"></div>        
            </div>
        </div>
    </body>
</html>