console
const data = [
{
"cid": 35075814,
"page": 1,
"part": "01_尚硅谷_课程简介",
"duration": 758
},
{
"cid": 35075815,
"page": 2,
"part": "02_尚硅谷_MySQL简介",
"duration": 521
},
{
"cid": 35075816,
"page": 3,
"part": "03_尚硅谷_RPM安装",
"duration": 1067
},
{
"cid": 35075817,
"page": 4,
"part": "04_尚硅谷_ROOT密码设置和开机自启动",
"duration": 432
},
{
"cid": 35075818,
"page": 5,
"part": "05_尚硅谷_安装位置",
"duration": 355
},
{
"cid": 35075819,
"page": 6,
"part": "06_尚硅谷_修改字符集",
"duration": 1002
},
{
"cid": 35075820,
"page": 7,
"part": "07_尚硅谷_MySQL配置文件",
"duration": 481
},
{
"cid": 35075821,
"page": 8,
"part": "08_尚硅谷_MySQL逻辑架构简介",
"duration": 1187
},
{
"cid": 35075822,
"page": 9,
"part": "09_尚硅谷_存储引擎简介",
"duration": 464
},
{
"cid": 35075823,
"page": 10,
"part": "10_尚硅谷_SQL性能下降原因",
"duration": 670
},
{
"cid": 35075824,
"page": 11,
"part": "11_尚硅谷_SQL执行加载顺序",
"duration": 322
},
{
"cid": 35075825,
"page": 12,
"part": "12_尚硅谷_七种JOIN理论",
"duration": 445
},
{
"cid": 35075826,
"page": 13,
"part": "13_尚硅谷_七种JOIN的SQL编写",
"duration": 1361
},
{
"cid": 35075827,
"page": 14,
"part": "14_尚硅谷_索引是什么",
"duration": 1535
},
{
"cid": 35075828,
"page": 15,
"part": "15_尚硅谷_索引优势劣势",
"duration": 535
},
{
"cid": 35075829,
"page": 16,
"part": "16_尚硅谷_索引分类和建索引命令语句",
"duration": 379
},
{
"cid": 35075830,
"page": 17,
"part": "17_尚硅谷_索引结构与检索原理",
"duration": 548
},
{
"cid": 35075831,
"page": 18,
"part": "18_尚硅谷_哪些情况适合建索引",
"duration": 261
},
{
"cid": 35075832,
"page": 19,
"part": "19_尚硅谷_哪些情况不适合建索引",
"duration": 199
},
{
"cid": 35075833,
"page": 20,
"part": "20_尚硅谷_性能分析前提知识",
"duration": 307
},
{
"cid": 35075834,
"page": 21,
"part": "21_尚硅谷_explain使用简介",
"duration": 426
},
{
"cid": 35075835,
"page": 22,
"part": "22_尚硅谷_explain之id介绍",
"duration": 697
},
{
"cid": 35075836,
"page": 23,
"part": "23_尚硅谷_explain之select_type和table介绍",
"duration": 415
},
{
"cid": 35075837,
"page": 24,
"part": "24_尚硅谷_explain之type介绍",
"duration": 1191
},
{
"cid": 35075838,
"page": 25,
"part": "25_尚硅谷_explain之possible_keys和key介绍",
"duration": 614
},
{
"cid": 35075839,
"page": 26,
"part": "26_尚硅谷_explain之key_len介绍",
"duration": 282
},
{
"cid": 35075840,
"page": 27,
"part": "27_尚硅谷_explain之ref介绍",
"duration": 401
},
{
"cid": 35075841,
"page": 28,
"part": "28_尚硅谷_explain之rows介绍",
"duration": 354
},
{
"cid": 35075842,
"page": 29,
"part": "29_尚硅谷_explain之Extra介绍",
"duration": 1328
},
{
"cid": 35075843,
"page": 30,
"part": "30_尚硅谷_explain之热身Case",
"duration": 213
},
{
"cid": 35075844,
"page": 31,
"part": "31_尚硅谷_索引单表优化案例",
"duration": 1034
},
{
"cid": 35075845,
"page": 32,
"part": "32_尚硅谷_索引两表优化案例",
"duration": 925
},
{
"cid": 35075846,
"page": 33,
"part": "33_尚硅谷_索引三表优化案例",
"duration": 549
},
{
"cid": 35075847,
"page": 34,
"part": "34_尚硅谷_索引优化1",
"duration": 1034
},
{
"cid": 35075848,
"page": 35,
"part": "35_尚硅谷_索引优化2",
"duration": 246
},
{
"cid": 35075849,
"page": 36,
"part": "36_尚硅谷_索引优化3",
"duration": 264
},
{
"cid": 35075850,
"page": 37,
"part": "37_尚硅谷_索引优化4",
"duration": 279
},
{
"cid": 35075851,
"page": 38,
"part": "38_尚硅谷_索引优化5",
"duration": 127
},
{
"cid": 35075852,
"page": 39,
"part": "39_尚硅谷_索引优化6",
"duration": 88
},
{
"cid": 35075853,
"page": 40,
"part": "40_尚硅谷_索引优化7",
"duration": 1005
},
{
"cid": 35075854,
"page": 41,
"part": "41_尚硅谷_索引优化8",
"duration": 509
},
{
"cid": 35075855,
"page": 42,
"part": "42_尚硅谷_索引优化9",
"duration": 317
},
{
"cid": 35075856,
"page": 43,
"part": "43_尚硅谷_索引优化10",
"duration": 187
},
{
"cid": 35075857,
"page": 44,
"part": "44_尚硅谷_索引面试题分析",
"duration": 1917
},
{
"cid": 35075858,
"page": 45,
"part": "45_尚硅谷_索引优化答疑补充和总结口诀",
"duration": 491
},
{
"cid": 35075859,
"page": 46,
"part": "46_尚硅谷_小表驱动大表",
"duration": 943
},
{
"cid": 35075860,
"page": 47,
"part": "47_尚硅谷_in和exists",
"duration": 193
},
{
"cid": 35075861,
"page": 48,
"part": "48_尚硅谷_为排序使用索引OrderBy优化",
"duration": 1523
},
{
"cid": 35075862,
"page": 49,
"part": "49_尚硅谷_慢查询日志",
"duration": 1148
},
{
"cid": 35075863,
"page": 50,
"part": "50_尚硅谷_批量插入数据脚本",
"duration": 1297
},
{
"cid": 35075864,
"page": 51,
"part": "51_尚硅谷_用Show Profile进行sql分析",
"duration": 1435
},
{
"cid": 35075865,
"page": 52,
"part": "52_尚硅谷_全局查询日志",
"duration": 259
},
{
"cid": 35075866,
"page": 53,
"part": "53_尚硅谷_数据库锁理论概述",
"duration": 292
},
{
"cid": 35075867,
"page": 54,
"part": "54_尚硅谷_读锁案例讲解",
"duration": 1034
},
{
"cid": 35075868,
"page": 55,
"part": "55_尚硅谷_读锁案例讲解2",
"duration": 602
},
{
"cid": 35075869,
"page": 56,
"part": "56_尚硅谷_行锁理论",
"duration": 425
},
{
"cid": 35075870,
"page": 57,
"part": "57_尚硅谷_行锁案例讲解",
"duration": 939
},
{
"cid": 35075871,
"page": 58,
"part": "58_尚硅谷_行锁演示答疑补充",
"duration": 313
},
{
"cid": 35075872,
"page": 59,
"part": "59_尚硅谷_索引失效行锁变表锁",
"duration": 425
},
{
"cid": 35075873,
"page": 60,
"part": "60_尚硅谷_间隙锁危害",
"duration": 332
},
{
"cid": 35075874,
"page": 61,
"part": "61_尚硅谷_如何锁定一行",
"duration": 250
},
{
"cid": 35075875,
"page": 62,
"part": "62_尚硅谷_行锁总结",
"duration": 389
},
{
"cid": 35075876,
"page": 63,
"part": "63_尚硅谷_主从复制",
"duration": 1832
}
];
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>Mysql数据库高级学习时长统计</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>
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.container {
flex-direction: column;
padding: 0 40px;
}
.input {
margin: 10px 0;
width:100%;
height:40px;
border:1px solid #dbdbdb;
outline:none;
font-size:20px;
text-indent:10px;
}
.info-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 20px;
overflow: hidden;
box-shadow:4px 4px 9px #333333;
background: #fff;
}
.info {
padding: 0 20px;
line-height: 50px;
font-size: 18px;
color: #333;
}
.btn {
margin: 20px 0;
padding: 20px 30vw;
border-radius: 10px;
text-align: center;
box-shadow:4px 4px 9px #333333;
font-size: 18px;
color: white;
background: #2BAEFE;
}
button {
border: 0;
}