console
const DATA = {
spring5: [
{
"page": 1,
"part": "01.尚硅谷_课程介绍",
"duration": 195
},
{
"page": 2,
"part": "02.尚硅谷_框架概述",
"duration": 748
},
{
"page": 3,
"part": "03.尚硅谷_入门案例",
"duration": 1396
},
{
"page": 4,
"part": "04.尚硅谷_IOC容器（底层原理1）",
"duration": 1043
},
{
"page": 5,
"part": "05.尚硅谷_IOC容器（底层原理2）",
"duration": 453
},
{
"page": 6,
"part": "06.尚硅谷_IOC容器（底层原理3）",
"duration": 866
},
{
"page": 7,
"part": "07.尚硅谷_IOC容器-Bean管理XML方式（创建对象和set注入属性）",
"duration": 1641
},
{
"page": 8,
"part": "08.尚硅谷_IOC容器-Bean管理XML方式（有参构造注入属性）",
"duration": 495
},
{
"page": 9,
"part": "09.尚硅谷_IOC容器-Bean管理XML方式（p名称空间注入）",
"duration": 387
},
{
"page": 10,
"part": "10.尚硅谷_IOC容器-Bean管理XML方式（注入空值和特殊符号）",
"duration": 559
},
{
"page": 11,
"part": "11.尚硅谷_IOC容器-Bean管理XML方式（注入外部bean）",
"duration": 859
},
{
"page": 12,
"part": "12.尚硅谷_IOC容器-Bean管理XML方式（注入内部bean和级联赋值）",
"duration": 1212
},
{
"page": 13,
"part": "13.尚硅谷_IOC容器-Bean管理XML方式（注入集合类型属性1）",
"duration": 1147
},
{
"page": 14,
"part": "14.尚硅谷_IOC容器-Bean管理XML方式（注入集合类型属性2）",
"duration": 1020
},
{
"page": 15,
"part": "15.尚硅谷_IOC容器-Bean管理（工厂bean）",
"duration": 738
},
{
"page": 16,
"part": "16.尚硅谷_IOC容器-Bean管理（bean的作用域）",
"duration": 719
},
{
"page": 17,
"part": "17.尚硅谷_IOC容器-Bean管理（bean生命周期）",
"duration": 1651
},
{
"page": 18,
"part": "18.尚硅谷_IOC容器-Bean管理XML方式（自动装配）",
"duration": 739
},
{
"page": 19,
"part": "19.尚硅谷_IOC容器-Bean管理XML方式（外部属性文件）",
"duration": 957
},
{
"page": 20,
"part": "20.尚硅谷_IOC容器-Bean管理注解方式（创建对象）",
"duration": 1516
},
{
"page": 21,
"part": "21.尚硅谷_IOC容器-Bean管理注解方式（组件扫描配置）",
"duration": 454
},
{
"page": 22,
"part": "22.尚硅谷_IOC容器-Bean管理注解方式（注入属性@Autowired和Qualifier）",
"duration": 812
},
{
"page": 23,
"part": "23.尚硅谷_IOC容器-Bean管理注解方式（注入属性@Resource和Value）",
"duration": 410
},
{
"page": 24,
"part": "24.尚硅谷_IOC容器-Bean管理注解方式（完全注解开发）",
"duration": 463
},
{
"page": 25,
"part": "25.尚硅谷_AOP-基本概念",
"duration": 739
},
{
"page": 26,
"part": "26.尚硅谷_AOP-底层原理",
"duration": 723
},
{
"page": 27,
"part": "27.尚硅谷_AOP-底层原理（JDK动态代理实现）",
"duration": 1580
},
{
"page": 28,
"part": "28.尚硅谷_AOP-操作术语",
"duration": 708
},
{
"page": 29,
"part": "29.尚硅谷_AOP操作-准备工作",
"duration": 837
},
{
"page": 30,
"part": "30.尚硅谷_AOP操作-AspectJ注解（1）",
"duration": 1564
},
{
"page": 31,
"part": "31.尚硅谷_AOP操作-AspectJ注解（2）",
"duration": 483
},
{
"page": 32,
"part": "32.尚硅谷_AOP操作-AspectJ配置文件",
"duration": 846
},
{
"page": 33,
"part": "33.尚硅谷_JdbcTemplate-概述和准备工作",
"duration": 1154
},
{
"page": 34,
"part": "34.尚硅谷_JdbcTemplate操作数据库-添加功能",
"duration": 845
},
{
"page": 35,
"part": "35.尚硅谷_JdbcTemplate操作数据库-修改和删除功能",
"duration": 427
},
{
"page": 36,
"part": "36.尚硅谷_JdbcTemplate操作数据库-查询功能（1）",
"duration": 496
},
{
"page": 37,
"part": "37.尚硅谷_JdbcTemplate操作数据库-查询功能（2）",
"duration": 912
},
{
"page": 38,
"part": "38.尚硅谷_JdbcTemplate操作数据库-批量添加功能",
"duration": 637
},
{
"page": 39,
"part": "39.尚硅谷_JdbcTemplate操作数据库-批量修改删除功能",
"duration": 483
},
{
"page": 40,
"part": "40.尚硅谷_事务操作-事务概念",
"duration": 396
},
{
"page": 41,
"part": "41.尚硅谷_事务操作-搭建事务操作环境",
"duration": 1432
},
{
"page": 42,
"part": "42.尚硅谷_事务操作-事务场景引入",
"duration": 473
},
{
"page": 43,
"part": "43.尚硅谷_事务操作-Spring事务管理介绍",
"duration": 627
},
{
"page": 44,
"part": "44.尚硅谷_事务操作-Spring声明式事务管理（注解方式）",
"duration": 673
},
{
"page": 45,
"part": "45.尚硅谷_事务操作-Spring声明式事务管理-事务参数（传播行为）",
"duration": 943
},
{
"page": 46,
"part": "46.尚硅谷_事务操作-Spring声明式事务管理-事务参数（隔离级别）",
"duration": 934
},
{
"page": 47,
"part": "47.尚硅谷_事务操作-Spring声明式事务管理-事务参数（其他参数）",
"duration": 387
},
{
"page": 48,
"part": "48.尚硅谷_事务操作-Spring声明式事务管理（XML方式）",
"duration": 682
},
{
"page": 49,
"part": "49.尚硅谷_事务操作-Spring声明式事务管理（完全注解方式）",
"duration": 676
},
{
"page": 50,
"part": "50.尚硅谷_Spring5新功能-整合日志框架",
"duration": 908
},
{
"page": 51,
"part": "51.尚硅谷_Spring5新功能-Nullable注解和函数式注册对象",
"duration": 864
},
{
"page": 52,
"part": "52.尚硅谷_Spring5新功能-整合JUnit5单元测试框架",
"duration": 883
},
{
"page": 53,
"part": "53.尚硅谷_Spring5新功能-Webflux-基本概念",
"duration": 1877
},
{
"page": 54,
"part": "54.尚硅谷_Spring5新功能-Webflux-响应式编程（Java实现）",
"duration": 1365
},
{
"page": 55,
"part": "55.尚硅谷_Spring5新功能-Webflux-响应式编程（Reactor）",
"duration": 2026
},
{
"page": 56,
"part": "56.尚硅谷_Spring5新功能-Webflux-响应式编程（Reactor总结）",
"duration": 276
},
{
"page": 57,
"part": "57.尚硅谷_Spring5新功能-Webflux-执行流程和核心API",
"duration": 1145
},
{
"page": 58,
"part": "58.尚硅谷_Spring5新功能-Webflux-注解编程模型",
"duration": 1833
},
{
"page": 59,
"part": "59.尚硅谷_Spring5新功能-Webflux-函数式编程模型（Handler）",
"duration": 1419
},
{
"page": 60,
"part": "60.尚硅谷_Spring5新功能-Webflux-函数式编程模型（Router和服务器）",
"duration": 1201
},
{
"page": 61,
"part": "61.尚硅谷_Spring5新功能-Webflux-函数式编程模型（WebClient）",
"duration": 664
},
{
"page": 62,
"part": "62.尚硅谷_课程总结",
"duration": 564
}
],
maven: [
{
"page": 1,
"part": "Maven-01-软件工程和maven",
"duration": 1112
},
{
"page": 2,
"part": "Maven-02-maven能干什么",
"duration": 464
},
{
"page": 3,
"part": "Maven-03-构建",
"duration": 586
},
{
"page": 4,
"part": "Maven-04-maven核心概念",
"duration": 283
},
{
"page": 5,
"part": "Maven-05-maven安装",
"duration": 905
},
{
"page": 6,
"part": "Maven-06-约定目录结构",
"duration": 503
},
{
"page": 7,
"part": "Maven-07-maven下载做了什么",
"duration": 1177
},
{
"page": 8,
"part": "Maven-08-修改本地仓库地址",
"duration": 283
},
{
"page": 9,
"part": "Maven-09-复习",
"duration": 636
},
{
"page": 10,
"part": "Maven-10-仓库概念",
"duration": 957
},
{
"page": 11,
"part": "Maven-11-仓库分类",
"duration": 290
},
{
"page": 12,
"part": "Maven-12-pom文件分析-坐标",
"duration": 974
},
{
"page": 13,
"part": "Maven-13-pom文件分析-依赖",
"duration": 471
},
{
"page": 14,
"part": "Maven-14-maven生命周期",
"duration": 367
},
{
"page": 15,
"part": "Maven-15-单元测试junit",
"duration": 659
},
{
"page": 16,
"part": "Maven-16-maven命令-编译",
"duration": 802
},
{
"page": 17,
"part": "Maven-17-maven命令-测试-打包-安装",
"duration": 1076
},
{
"page": 18,
"part": "Maven-18-编译插件配置",
"duration": 811
},
{
"page": 19,
"part": "Maven-19-idea中设置maven",
"duration": 954
},
{
"page": 20,
"part": "Maven-20-idea新建工程设置maven",
"duration": 241
},
{
"page": 21,
"part": "Maven-21-idea创建javase项目",
"duration": 815
},
{
"page": 22,
"part": "Maven-22-使用单元测试",
"duration": 620
},
{
"page": 23,
"part": "Maven-23-使用idea中maven工具窗口",
"duration": 560
},
{
"page": 24,
"part": "Maven-24-idea创建web项目",
"duration": 1002
},
{
"page": 25,
"part": "Maven-25-复习前天课程",
"duration": 789
},
{
"page": 26,
"part": "Maven-26-复习maven核心概念",
"duration": 167
},
{
"page": 27,
"part": "Maven-27-常用技巧",
"duration": 502
},
{
"page": 28,
"part": "Maven-28-依赖范围",
"duration": 671
},
{
"page": 29,
"part": "Maven-29-依赖范围provided",
"duration": 787
},
{
"page": 30,
"part": "Maven-30-maven常用属性",
"duration": 967
},
{
"page": 31,
"part": "Maven-31-资源插件",
"duration": 431
},
{
"page": 32,
"part": "Maven-32-课程最后补充文档",
"duration": 311
}
],
springMVC: [
{
"page": 1,
"part": "1. 尚硅谷_佟刚_SpringMVC_概述",
"duration": 134
},
{
"page": 2,
"part": "2. 尚硅谷_佟刚_SpringMVC_HelloWorld",
"duration": 963
},
{
"page": 3,
"part": "3. 尚硅谷_佟刚_SpringMVC_RequestMapping_修饰类",
"duration": 297
},
{
"page": 4,
"part": "4. 尚硅谷_佟刚_SpringMVC_RequestMapping_请求方式",
"duration": 230
},
{
"page": 5,
"part": "5. 尚硅谷_佟刚_SpringMVC_RequestMapping_请求参数\u0026请求头",
"duration": 352
},
{
"page": 6,
"part": "6. 尚硅谷_佟刚_SpringMVC_RequestMapping_Ant 路径",
"duration": 129
},
{
"page": 7,
"part": "7. 尚硅谷_佟刚_SpringMVC_RequestMapping_PathVariable注解",
"duration": 190
},
{
"page": 8,
"part": "8. 尚硅谷_佟刚_SpringMVC_RequestMapping_HiddenHttpMethodFilter 过滤器",
"duration": 938
},
{
"page": 9,
"part": "9. 尚硅谷_佟刚_SpringMVC_RequestParam 注解",
"duration": 383
},
{
"page": 10,
"part": "10. 尚硅谷_佟刚_SpringMVC_RequestHeader 注解",
"duration": 202
},
{
"page": 11,
"part": "11. 尚硅谷_佟刚_SpringMVC_CookieValue 注解",
"duration": 200
},
{
"page": 12,
"part": "12. 尚硅谷_佟刚_SpringMVC_使用POJO作为参数",
"duration": 434
},
{
"page": 13,
"part": "13. 尚硅谷_佟刚_SpringMVC_使用Servlet原生API作为参数",
"duration": 372
},
{
"page": 14,
"part": "14. 尚硅谷_佟刚_SpringMVC_处理模型数据之ModelAndView",
"duration": 496
},
{
"page": 15,
"part": "15 尚硅谷_佟刚_SpringMVC_处理模型数据之Map",
"duration": 322
},
{
"page": 16,
"part": "16. 尚硅谷_佟刚_SpringMVC_处理模型数据之 SessionAttributes 注解",
"duration": 447
},
{
"page": 17,
"part": "17. 尚硅谷_佟刚_SpringMVC_ModelAttribute注解之使用场景",
"duration": 192
},
{
"page": 18,
"part": "18. 尚硅谷_佟刚_SpringMVC_ModelAttribute注解之示例代码",
"duration": 583
},
{
"page": 19,
"part": "19. 尚硅谷_佟刚_SpringMVC_ModelAttribute注解之运行原理",
"duration": 389
},
{
"page": 20,
"part": "20. 尚硅谷_佟刚_SpringMVC_ModelAttribute注解之源码分析",
"duration": 2022
},
{
"page": 21,
"part": "21. 尚硅谷_佟刚_SpringMVC_如何确定目标方法POJO类型参数",
"duration": 472
},
{
"page": 22,
"part": "22. 尚硅谷_佟刚_SpringMVC_ModelAttribute注解修饰POJO类型的入参",
"duration": 437
},
{
"page": 23,
"part": "23. 尚硅谷_佟刚_SpringMVC_SessionAttributes注解引发的异常",
"duration": 205
},
{
"page": 24,
"part": "24. 尚硅谷_佟刚_SpringMVC_视图解析流程分析",
"duration": 583
},
{
"page": 25,
"part": "25. 尚硅谷_佟刚_SpringMVC_JstlView",
"duration": 343
},
{
"page": 26,
"part": "26. 尚硅谷_佟刚_SpringMVC_mvc_view-controller标签",
"duration": 252
},
{
"page": 27,
"part": "27. 尚硅谷_佟刚_SpringMVC_自定义视图",
"duration": 386
},
{
"page": 28,
"part": "28. 尚硅谷_佟刚_SpringMVC_重定向",
"duration": 232
},
{
"page": 29,
"part": "29. 尚硅谷_佟刚_SpringMVC_RESTRUL_CRUD_需求",
"duration": 185
},
{
"page": 30,
"part": "30. 尚硅谷_佟刚_SpringMVC_RESTRUL_CRUD_显示所有员工信息",
"duration": 853
},
{
"page": 31,
"part": "31. 尚硅谷_佟刚_SpringMVC_RESTRUL_CRUD_添加操作\u0026表单标签",
"duration": 1201
},
{
"page": 32,
"part": "32. 尚硅谷_佟刚_SpringMVC_RESTRUL_CRUD_删除操作\u0026处理静态资源",
"duration": 936
},
{
"page": 33,
"part": "33. 尚硅谷_佟刚_SpringMVC_RESTRUL_CRUD_修改操作",
"duration": 909
},
{
"page": 34,
"part": "34. 尚硅谷_佟刚_SpringMVC_数据绑定流程分析",
"duration": 669
},
{
"page": 35,
"part": "35. 尚硅谷_佟刚_SpringMVC_自定义类型转换器",
"duration": 946
},
{
"page": 36,
"part": "36. 尚硅谷_佟刚_SpringMVC_annotation-driven配置",
"duration": 815
},
{
"page": 37,
"part": "37. 尚硅谷_佟刚_SpringMVC_InitBinder注解",
"duration": 187
},
{
"page": 38,
"part": "38. 尚硅谷_佟刚_SpringMVC_数据的格式化",
"duration": 813
},
{
"page": 39,
"part": "39. 尚硅谷_佟刚_SpringMVC_JSR303数据校验",
"duration": 841
},
{
"page": 40,
"part": "40. 尚硅谷_佟刚_SpringMVC_错误消息的显示及国际化",
"duration": 488
},
{
"page": 41,
"part": "41. 尚硅谷_佟刚_SpringMVC_返回JSON",
"duration": 433
},
{
"page": 42,
"part": "42. 尚硅谷_佟刚_SpringMVC_HttpMessageConverter原理",
"duration": 330
},
{
"page": 43,
"part": "43. 尚硅谷_佟刚_SpringMVC_使用HttpMessageConverter",
"duration": 698
},
{
"page": 44,
"part": "44. 尚硅谷_佟刚_SpringMVC_国际化_概述",
"duration": 235
},
{
"page": 45,
"part": "45. 尚硅谷_佟刚_SpringMVC_国际化_前两个问题",
"duration": 504
},
{
"page": 46,
"part": "46. 尚硅谷_佟刚_SpringMVC_国际化_通过超链接切换Locale",
"duration": 648
},
{
"page": 47,
"part": "47. 尚硅谷_佟刚_SpringMVC_文件上传",
"duration": 518
},
{
"page": 48,
"part": "48. 尚硅谷_佟刚_SpringMVC_第一个自定义的拦截器",
"duration": 762
},
{
"page": 49,
"part": "49. 尚硅谷_佟刚_SpringMVC_拦截器的配置",
"duration": 193
},
{
"page": 50,
"part": "50. 尚硅谷_佟刚_SpringMVC_多个拦截方法的执行顺序",
"duration": 467
},
{
"page": 51,
"part": "51. 尚硅谷_佟刚_SpringMVC_异常处理_ExceptionHandler注解",
"duration": 1016
},
{
"page": 52,
"part": "52. 尚硅谷_佟刚_SpringMVC_异常处理_ResponseStatusExceptionResolver",
"duration": 490
},
{
"page": 53,
"part": "53. 尚硅谷_佟刚_SpringMVC_异常处理_DefaultHandlerExceptionResolver",
"duration": 218
},
{
"page": 54,
"part": "54. 尚硅谷_佟刚_SpringMVC_异常处理_SimpleMappingExceptionResolver",
"duration": 448
},
{
"page": 55,
"part": "55. 尚硅谷_佟刚_SpringMVC_运行流程图解",
"duration": 183
},
{
"page": 56,
"part": "56. 尚硅谷_佟刚_SpringMVC_源码解析",
"duration": 1418
},
{
"page": 57,
"part": "57. 尚硅谷_佟刚_SpringMVC_Spring整合SpringMVC_提出问题",
"duration": 295
},
{
"page": 58,
"part": "58. 尚硅谷_佟刚_SpringMVC_Spring整合SpringMVC_解决方案",
"duration": 583
},
{
"page": 59,
"part": "59. 尚硅谷_佟刚_SpringMVC_SpringIOC 容器和 SpringMVC IOC 容器的关系",
"duration": 244
},
{
"page": 60,
"part": "60. 尚硅谷_佟刚_SpringMVC_SpringMVC对比Struts2",
"duration": 119
}
],
webpackShangguigu: [
{
"page": 1,
"part": "01_尚硅谷_课程介绍",
"duration": 259
},
{
"page": 2,
"part": "02_尚硅谷_webpack简介",
"duration": 775
},
{
"page": 3,
"part": "03_尚硅谷_webpack五个核心概念",
"duration": 407
},
{
"page": 4,
"part": "04_尚硅谷_webpack的初体验",
"duration": 920
},
{
"page": 5,
"part": "05_尚硅谷_打包样式资源",
"duration": 1635
},
{
"page": 6,
"part": "06_尚硅谷_打包html资源",
"duration": 533
},
{
"page": 7,
"part": "07_尚硅谷_打包图片资源",
"duration": 1466
},
{
"page": 8,
"part": "08_尚硅谷_打包其他资源",
"duration": 737
},
{
"page": 9,
"part": "09_尚硅谷_devServer",
"duration": 665
},
{
"page": 10,
"part": "10_尚硅谷_开发环境基本配置",
"duration": 1365
},
{
"page": 11,
"part": "11_尚硅谷_构建环境介绍",
"duration": 248
},
{
"page": 12,
"part": "12_尚硅谷_提取css成单独文件",
"duration": 669
},
{
"page": 13,
"part": "13_尚硅谷_css兼容性处理",
"duration": 649
},
{
"page": 14,
"part": "14_尚硅谷_压缩css",
"duration": 274
},
{
"page": 15,
"part": "15_尚硅谷_js语法检查eslint",
"duration": 1010
},
{
"page": 16,
"part": "16_尚硅谷_js兼容性处理eslint",
"duration": 1138
},
{
"page": 17,
"part": "17_尚硅谷_压缩html和js",
"duration": 267
},
{
"page": 18,
"part": "18_尚硅谷_生产环境基本配置",
"duration": 1424
},
{
"page": 19,
"part": "19_尚硅谷_性能优化介绍",
"duration": 280
},
{
"page": 20,
"part": "20_尚硅谷_HMR",
"duration": 1155
},
{
"page": 21,
"part": "21_尚硅谷_source-map",
"duration": 1568
},
{
"page": 22,
"part": "22_尚硅谷_oneOf",
"duration": 243
},
{
"page": 23,
"part": "23_尚硅谷_缓存",
"duration": 1326
},
{
"page": 24,
"part": "24_尚硅谷_tree shaking",
"duration": 557
},
{
"page": 25,
"part": "25_尚硅谷_code split",
"duration": 1451
},
{
"page": 26,
"part": "26_尚硅谷_懒加载和预加载",
"duration": 755
},
{
"page": 27,
"part": "27_尚硅谷_PWA",
"duration": 951
},
{
"page": 28,
"part": "28_尚硅谷_多进程打包",
"duration": 417
},
{
"page": 29,
"part": "29_尚硅谷_externals",
"duration": 318
},
{
"page": 30,
"part": "30_尚硅谷_dll",
"duration": 1059
},
{
"page": 31,
"part": "31_尚硅谷_性能优化总结",
"duration": 1694
},
{
"page": 32,
"part": "32_尚硅谷_webpack配置详解介绍",
"duration": 307
},
{
"page": 33,
"part": "33_尚硅谷_webpack详细配置之entry",
"duration": 939
},
{
"page": 34,
"part": "34_尚硅谷_webpack详细配置之output",
"duration": 729
},
{
"page": 35,
"part": "35_尚硅谷_webpack详细配置之module",
"duration": 293
},
{
"page": 36,
"part": "36_尚硅谷_webpack详细配置之resolve",
"duration": 542
},
{
"page": 37,
"part": "37_尚硅谷_webpack详细配置之devServer",
"duration": 637
},
{
"page": 38,
"part": "38_尚硅谷_webpack详细配置之optimization",
"duration": 1431
},
{
"page": 39,
"part": "39_尚硅谷_webpack5介绍和使用",
"duration": 1221
},
{
"page": 40,
"part": "40_尚硅谷_总结webpack",
"duration": 1726
}
],
typescript: [
{
page: 1,
part: "00_TS简介",
duration: 1575,
},
{
page: 2,
part: "01_TS开发环境搭建",
duration: 880,
},
{
page: 3,
part: "02_TS的类型声明",
duration: 1687,
},
{
page: 4,
part: "03_TS中类型（1）",
duration: 1628,
},
{
page: 5,
part: "04_TS中类型（2）",
duration: 2076,
},
{
page: 6,
part: "05_TS编译选项（1）",
duration: 1356,
},
{
page: 7,
part: "06_TS编译选项（2）",
duration: 1282,
},
{
page: 8,
part: "07_TS编译选项（3）",
duration: 522,
},
{
page: 9,
part: "08_TS编译选项（4）",
duration: 828,
},
{
page: 10,
part: "09_使用webpack打包ts代码（1）",
duration: 1076,
},
{
page: 11,
part: "10_使用webpack打包ts代码（2）",
duration: 1109,
},
{
page: 12,
part: "11_使用webpack打包ts代码（3）",
duration: 1982,
},
{
page: 13,
part: "12_面向对象简介",
duration: 917,
},
{
page: 14,
part: "13_类的简介",
duration: 1131,
},
{
page: 15,
part: "14_构造函数和this",
duration: 946,
},
{
page: 16,
part: "15_继承简介",
duration: 1235,
},
{
page: 17,
part: "16_super关键字",
duration: 464,
},
{
page: 18,
part: "17_抽象类",
duration: 508,
},
{
page: 19,
part: "18_接口",
duration: 977,
},
{
page: 20,
part: "19_属性的封装",
duration: 1769,
},
{
page: 21,
part: "20_泛型",
duration: 907,
},
{
page: 22,
part: "21_练习_项目搭建",
duration: 1301,
},
{
page: 23,
part: "22_练习_项目界面",
duration: 1815,
},
{
page: 24,
part: "23_练习_完成Food类",
duration: 1353,
},
{
page: 25,
part: "24_练习_完成ScorePanel类",
duration: 1236,
},
{
page: 26,
part: "25_练习_初步完成Snake类",
duration: 815,
},
{
page: 27,
part: "26_练习_GameControl键盘事件",
duration: 1303,
},
{
page: 28,
part: "27_练习_GameControl使蛇移动",
duration: 1191,
},
{
page: 29,
part: "28_练习_蛇撞墙和吃食检测",
duration: 1118,
},
{
page: 30,
part: "29_练习_身体的移动",
duration: 2506,
},
]
};
const i18n = {
maxPage: '',
maxTime: '最大时长',
minPage: '',
minTime: '最小时长',
sumTime: '总时长',
avgTime: '平均单集时长',
speedTime: '倍速时长'
}
const KEYS = Object.keys(DATA);
const DEFALUT_COURSE = KEYS[KEYS.length - 1];
var app = new Vue({
el: '#app',
data() {
return {
data: DATA[DEFALUT_COURSE],
start: null,
end: null,
speed: null,
clearable: true,
info: {
maxPage: null,
maxTime: 0,
minPage: null,
minTime: 0,
sumTime: 0,
avgTime: 0,
speedTime: 0
},
selectOptions: KEYS,
selectValue: DEFALUT_COURSE,
/**
* 按钮是否可点击
*/
disabled: false
}
},
computed: {
infoList() {
if (!this.info.sumTime) {
// 判空
return [];
}
let list = [];
let keys = Object.keys(this.info);
keys.forEach(key => {
let value = this.info[key];
if (key.indexOf('Time') > -1) {
console.log('');
console.log('value', value);
value = this._parseSecond(value);
console.log('value', value);
}
list.push({ key: i18n[key], value });
});
return list;
}
},
mounted() {
/** 监听回车事件 */
document.onkeydown = e => {
let currKey = e.keyCode || e.which || e.charCode; //支持IE、FF
if (currKey == 13) {
this.onSearch();
}
};
},
methods: {
/**
* 获取信息
*/
_getInfo(start, end, speed) {
let info = {
sumTime: 0,
speedTime: 0,
maxTime: 0,
maxPage: null,
minTime: 10000,
minPage: null,
avgTime: 0,
};
this.data.forEach((element, index) => {
if (element.page >= start && element.page <= end) {
info.sumTime += element.duration;
if (info.maxTime < element.duration) {
info.maxTime = element.duration;
info.maxPage = `P${element.page} : ${element.part}`;
}
if (info.minTime > element.duration) {
info.minTime = element.duration;
info.minPage = `P${element.page} : ${element.part}`;
}
}
});
info.avgTime = Math.floor(info.sumTime / (end - start + 1));
info.speedTime = Math.floor(info.sumTime / speed);
this.info = info;
},
_parseSecond(s) {
let hour = Math.floor(s / 60 / 60),
minute = Math.floor(s % 3600 / 60),
second = Math.floor(s % 3600 % 60);
hour = hour ? `${this._formatNumber(hour)}:` : '';
minute = hour || minute ? `${this._formatNumber(minute)}:` : '';
second = this._formatNumber(second) || "00";
return `${hour}${minute}${second}`;
},
// 转换添加0
_formatNumber(n) {
n = n.toString();
return n[1] ? n : '0' + n;
},
onSelectChange(value, index, text) {
this.data = DATA[value];
},
/**
* 提交事件
*/
onSearch() {
let start = Number(this.start) || 1;
let end = Number(this.end) || this.data.length;
let speed = Number(this.speed) || 1;
if (start > end) {
let temp = start;
start = end;
end = temp;
}
this.speed = speed;
this.start = start;
this.end = end;
this._getInfo(start, end, speed);
}
}
})
<div id="app">
<div class="title">时长统计</div>
<cube-select
class="model"
v-model="selectValue"
:options="selectOptions"
@change="onSelectChange"
></cube-select>
<cube-input
class="model"
v-model="start"
:clearable="clearable"
type="number"
placeholder="请输入起始课程集数"
></cube-input>
<cube-input
class="model"
v-model="end"
:clearable="clearable"
type="number"
placeholder="请输入截止课程集数"
></cube-input>
<cube-input
class="model"
v-model="speed"
:clearable="clearable"
type="number"
placeholder="请输入播放倍速"
></cube-input>
<cube-button
class="model btn"
:disabled="disabled"
@click="onSearch"
>查   询</cube-button>
<div v-if="infoList.length" class="info-wrapper">
<template v-for="info in infoList">
<div class="info-row">
<span class="key">{{ info.key }}</span>
<span class="value">{{ info.value }}</span>
</div>
</template>
</div>
</div>
body {
background-color: #1E1E1E;
}
#app {
display: flex;
flex-direction: column;
align-items: center;
padding: 5% 20%;
}
.title {
margin-bottom: 30px;
font-size: 22px;
letter-spacing: 10px;
color: #fff;
}
.model {
margin: 12px 0;
width: 100%;
letter-spacing: 2px;
font-size: 18px;
font-weight: 600;
color: rgb(204, 204, 204);
background-color: #3C3C3C;
}
.btn {
border-radius: 2px;
color: #fff;
background-color: #0E639C;
}
.cube-picker-confirm {
color: #3794ff;
}
.cube-input-field {
color: rgb(204, 204, 204);
}
.cube-input_active::after, .cube-select_active::after {
border-color: #007FD4;
}
.info-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
margin-top: 15px;
padding: 20px 30px;
box-sizing: border-box;
border-radius: 20px;
box-shadow:4px 4px 9px #666;
font-size: 18px;
background-color: #181818;
}
.info-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 12px 0;
width: 100%;
}
.key {
color: rgba(240,240,240, 0.7);
}
.value {
letter-spacing: 2px;
font-weight: 600;
color: #ccc;
}