weixin_40725706

这个屌丝很懒，什么也没留下！

热门标签

看了绝不后悔的文章--(最后附源码 cv即可看到效果)--给哔站的视频生成一个进度条显示你看的视频时间和你剩余需要观看时间_怎样将网页视频的进度看完代码显示出来

作者：weixin_40725706 | 2024-02-22 13:18:50

踩

怎样将网页视频的进度看完代码显示出来

场景

某次看b站的时候看了好长时间的视频
感觉要放弃也不知道后面还有多少时长的视频等去看
就想知道自己看了多少还剩下多少
于是我想搞一个玩意出来

第一代效果

(function getMsg(start=0) {
var timelist = document.querySelectorAll('#multi_page > div.cur-list > ul > li > a > div > div.duration')
    var sum = 0
    timelist.forEach((ele,index)=> {
	    if (index>start) {
	        min = ele.innerText.split(":")[0]
	    	sum += Number(min)
	    }
	}) 
     //分钟
    console.log("视频总分钟:"+sum)
    //小时
    console.log("视频总小时:"+Math.round(sum/60))
})()
1
2
3
4
5
6
7
8
9
10
11
12
13
14

参数空
输出如下

视频总分钟:1054
 视频总小时:18
1
2

在这里插入图片描述
当传递参数 40
从参数 40开始到结束的视频长度

在这里插入图片描述

第二代优化

我觉得这样还是有点 nb的样子要是能直观的看到就好了
没问题
直接制造一个百分比的条子不就好了
开搞

(function getMsg(start=0) {
var timelist = document.querySelectorAll('#multi_page > div.cur-list > ul > li > a > div > div.duration')
    var a=document.createElement("p")
    a.style.position="fixed"
    a.style.top="0"
    a.style.left="0"
    a.style.zIndex="99999999999"
    a.style.width="100%"
    a.style.height="14px"
    a.style.backgroundColor= '#4158D0';
    a.style.backgroundImage='linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)';
    
    var sp=document.createElement("span")
    a.appendChild(sp)
    sp.style.float="right"
    sp.style.width="50px"
    sp.style.height="14px"
    sp.style.color="#fff"
    sp.style.fontSize="10px"
    sp.style.lineHeight="14px"
    sp.style.borderRadius="2px"
    sp.style.backgroundImage='linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)';
    document.body.appendChild(a)
    
    
    var sum = 0
    var current =0 
    timelist.forEach((ele,index)=> {
        if (index<=start) {
            min = ele.innerText.split(":")[0]
            current += Number(min) 
        }
        min = ele.innerText.split(":")[0]
        sum += Number(min)
        var cur=current/sum
        a.style.width=100+"%"
        sp.style.width=(cur*100).toFixed(2)+"%"
        sp.innerText=(cur*100).toFixed(2)+"%" 
	}) 
   
})(77) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

77就是视频当前看的地方
效果
在这里插入图片描述

再度优化现实更多信息

sp.innerText=(cur*100).toFixed(2)+"%"+"当前视频总时长"+sum+"当前已看"+current+"还剩时长"+(sum-current)
1

在这里插入图片描述

(function getMsg(start=0) {
var timelist = document.querySelectorAll('#multi_page > div.cur-list > ul > li > a > div > div.duration')
    var a=document.createElement("p")
    a.style.position="fixed"
    a.style.top="0"
    a.style.left="0"
    a.style.zIndex="99999999999"
    a.style.width="100%"
    a.style.height="14px"
    a.style.backgroundColor= '#4158D0';
    a.style.backgroundImage='linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)';
    
    var sp=document.createElement("span")
    a.appendChild(sp)
    sp.style.float="right"
    sp.style.width="50px"
    sp.style.height="14px"
    sp.style.color="#fff"
    sp.style.fontSize="10px"
    sp.style.lineHeight="14px"
    sp.style.borderRadius="2px"
    sp.style.backgroundImage='linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)';
    document.body.appendChild(a)
    
    
    var sum = 0
    var current =0 
    timelist.forEach((ele,index)=> {
        if (index<=start) {
            min = ele.innerText.split(":")[0]
            current += Number(min)
            
        }
        min = ele.innerText.split(":")[0]
        sum += Number(min)
       var cur=current/sum
        a.style.width=100+"%"
        sp.style.width=(cur*100).toFixed(2)+"%"
        sp.innerText=(cur*100).toFixed(2)+"%"+"当前视频总时长"+sum+"当前已看"+current+"还剩时长"+(sum-current)
	}) 
   
})(55)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

版本三

这样子感觉一依然还是不爽
怎么办呢

要不给每个按钮点击事件点击就更新进度条

遇到问题给原生li添加事件会报错
在这里插入图片描述
转换思路

获取其他数据事件绑定到其他地方

var heads=document.querySelector(".head-con")
undefined
heads
<div class="head-con">…</div>flex
var curs=document.querySelector("li.on .page-num")
undefined
curs
<span class="page-num">P4</span>
var cursvalue = curs.innerText.split("P")[0]
undefined
cursvalue 
''
var cursvalue = curs.innerText.split("P")[1]
undefined
cursvalue 
'4'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

于是就有了这样的事件函数

heads.onclick=function (params) {
    console.log("show")
    var sum = 0
    var current =0 
    var curs=document.querySelector("li.on .page-num")
    var cursvalue = curs.innerText.split("P")[1]
    var sp=document.querySelector("body>p>span")
    var a=document.querySelector("body>p")
    timelist.forEach((ele,index)=> {
        if (index<=cursvalue ) {
            min = ele.innerText.split(":")[0]
            current += Number(min)
            
        }
        min = ele.innerText.split(":")[0]
        sum += Number(min)
       var cur=current/sum
        a.style.width=100+"%"
        sp.style.width=(cur*100).toFixed(2)+"%"
        sp.innerText=(cur*100).toFixed(2)+"%"+"当前视频总时长"+sum+"当前已看"+current+"还剩时长"+(sum-current)
	}) 
 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

实验阶段

打开b站
找到视频资源带有很长的那种集合视频
在这里插入图片描述

打开控制台
f12
在这里插入图片描述

开始操作了
站提如下代码

(function getMsg(start=0) {
var timelist = document.querySelectorAll('#multi_page > div.cur-list > ul > li > a > div > div.duration')
    var a=document.createElement("p")
    a.style.position="fixed"
    a.style.top="0"
    a.style.left="0"
    a.style.zIndex="99999999999"
    a.style.width="100%"
    a.style.height="14px"
    a.style.backgroundColor= '#4158D0';
    a.style.backgroundImage='linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)';
    
    var sp=document.createElement("span")
    a.appendChild(sp)
    sp.style.float="right"
    sp.style.width="50px"
    sp.style.height="14px"
    sp.style.color="#fff"
    sp.style.fontSize="10px"
    sp.style.lineHeight="14px"
    sp.style.borderRadius="2px"
    sp.style.backgroundImage='linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)';
    document.body.appendChild(a)
    
    
    var sum = 0
    var current =0 
    timelist.forEach((ele,index)=> {
        if (index<=start) {
            min = ele.innerText.split(":")[0]
            current += Number(min)
            
        }
        min = ele.innerText.split(":")[0]
        sum += Number(min)
       var cur=current/sum
        a.style.width=100+"%"
        sp.style.width=(cur*100).toFixed(2)+"%"
        sp.innerText=(cur*100).toFixed(2)+"%"+"当前视频总时长"+sum+"当前已看"+current+"还剩时长"+(sum-current)
	}) 
   
})(1)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

将会显示一个比例条子
在这里插入图片描述
添加事件函数如下代码

小提示
在这里插入图片描述

heads是事件绑定的地方
timelist 是视频每集的列表从中获取数据

var heads=document.querySelector(".head-con")
var timelist = document.querySelectorAll('#multi_page > div.cur-list > ul > li > a > div > div.duration')
heads.onclick=function (params) {
    console.log("show")
    var sum = 0
    var current =0 
    var curs=document.querySelector("li.on .page-num")
    var cursvalue = curs.innerText.split("P")[1]
    var sp=document.querySelector("body>p>span")
    var a=document.querySelector("body>p")
    timelist.forEach((ele,index)=> {
        if (index<=cursvalue-1 ) {
            min = ele.innerText.split(":")[0]
            current += Number(min)
            
        }
        min = ele.innerText.split(":")[0]
        sum += Number(min)
       var cur=current/sum
        a.style.width=100+"%"
        sp.style.width=(cur*100).toFixed(2)+"%"
        sp.innerText=(cur*100).toFixed(2)+"%"+"当前视频总时长"+sum+"当前已看"+current+"还剩时长"+(sum-current)
	}) 
 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在这里插入图片描述

改变一个集数试试

在这里插入图片描述

ok 目前基本可以完了

懒人阶段 cv 即可

(function getMsg(start=0) {
var timelist = document.querySelectorAll('#multi_page > div.cur-list > ul > li > a > div > div.duration')
    var a=document.createElement("p")
    a.style.position="fixed"
    a.style.top="0"
    a.style.left="0"
    a.style.zIndex="99999999999"
    a.style.width="100%"
    a.style.height="14px"
    a.style.backgroundColor= '#4158D0';
    a.style.backgroundImage='linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)';
    
    var sp=document.createElement("span")
    a.appendChild(sp)
    sp.style.float="right"
    sp.style.width="50px"
    sp.style.height="14px"
    sp.style.color="#fff"
    sp.style.fontSize="10px"
    sp.style.lineHeight="14px"
    sp.style.borderRadius="2px"
    sp.style.backgroundImage='linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)';
    document.body.appendChild(a)
    
    
    var sum = 0
    var current =0 
    timelist.forEach((ele,index)=> {
        if (index<=start) {
            min = ele.innerText.split(":")[0]
            current += Number(min)
            
        }
        min = ele.innerText.split(":")[0]
        sum += Number(min)
       var cur=current/sum
        a.style.width=100+"%"
        sp.style.width=(cur*100).toFixed(2)+"%"
        sp.innerText=(cur*100).toFixed(2)+"%"+"当前视频总时长"+sum+"当前已看"+current+"还剩时长"+(sum-current)
	}) 
   
})(1)
var heads=document.querySelector(".head-con")
var timelist = document.querySelectorAll('#multi_page > div.cur-list > ul > li > a > div > div.duration')
heads.onclick=function (params) {
    console.log("show")
    var sum = 0
    var current =0 
    var curs=document.querySelector("li.on .page-num")
    var cursvalue = curs.innerText.split("P")[1]
    var sp=document.querySelector("body>p>span")
    var a=document.querySelector("body>p")
    timelist.forEach((ele,index)=> {
        if (index<=cursvalue-1 ) {
            min = ele.innerText.split(":")[0]
            current += Number(min)
            
        }
        min = ele.innerText.split(":")[0]
        sum += Number(min)
       var cur=current/sum
        a.style.width=100+"%"
        sp.style.width=(cur*100).toFixed(2)+"%"
        sp.innerText=(cur*100).toFixed(2)+"%"+"当前视频总时长"+sum+"当前已看"+current+"还剩时长"+(sum-current)
	}) 
 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

实验测试

在这里插入图片描述

试用阶段
在这里插入图片描述
问题

经过某些此时发现存在需要优化的代码

if (index<=cursvalue-1 ) {
min = ele.innerText.split(":")[0]
     current += Number(min)
     
 }
 min = ele.innerText.split(":")[0]
 sum += Number(min)

ele.innerText 是时间的值  可能是 1:05:12 小时 可能是 50:20 
存在小时和分钟的情况
ele.innerText.split(":")[0]  只会截取第一个 1:05:12 取出来的是1    50:20 取出的是50
就需要加上判断了

后期如果想在精确比如到 秒 需要再度操作了


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

优化四解决小时的问题

if (index<=cursvalue-1 ) {
	//解决 小时的问题  把小时变为 60分钟
	//01 : 50: 20 == [ "01" , "50" , "20"]
	if(ele.innerText.split(":").length==3){
		min = ele.innerText.split(":")[0]*60
     	current += Number(min)
     	min1 = ele.innerText.split(":")[1]
     	current += Number(min1 )
	}else{
		//取出分钟
		min = ele.innerText.split(":")[0]
     	current += Number(min)
	}
	
     
 }
 //同理
 if(ele.innerText.split(":").length==3){
	min = ele.innerText.split(":")[0]*60
   	sum += Number(min)
   	min1 = ele.innerText.split(":")[1]
   	sum += Number(min1 )
}else{
	//取出分钟
	min = ele.innerText.split(":")[0]
    sum += Number(min)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

最终版本------聪明cv的

(function getMsg(start=0) {
var timelist = document.querySelectorAll('#multi_page > div.cur-list > ul > li > a > div > div.duration')
    var a=document.createElement("p")
    a.style.position="fixed"
    a.style.top="0"
    a.style.left="0"
    a.style.zIndex="99999999999"
    a.style.width="100%"
    a.style.height="14px"
    a.style.backgroundColor= '#4158D0';
    a.style.backgroundImage='linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)';
    
    var sp=document.createElement("span")
    a.appendChild(sp)
    sp.style.float="right"
    sp.style.width="50px"
    sp.style.height="14px"
    sp.style.color="#fff"
    sp.style.fontSize="10px"
    sp.style.lineHeight="14px"
    sp.style.borderRadius="2px"
    sp.style.backgroundImage='linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)';
    document.body.appendChild(a)
    
    
    var sum = 0
    var current =0 
    timelist.forEach((ele,index)=> {
        if (index<=start) {
            min = ele.innerText.split(":")[0]
            current += Number(min)
            
        }
        min = ele.innerText.split(":")[0]
        sum += Number(min)
       var cur=current/sum
        a.style.width=100+"%"
        sp.style.width=(cur*100).toFixed(2)+"%"
        sp.innerText=(cur*100).toFixed(2)+"%"+"当前视频总时长"+sum+"当前已看"+current+"还剩时长"+(sum-current)
	}) 
   
})(1)
var heads=document.querySelector(".head-con")
var timelist = document.querySelectorAll('#multi_page > div.cur-list > ul > li > a > div > div.duration')
heads.onclick=function (params) {
    console.log("show")
    var sum = 0
    var current =0 
    var curs=document.querySelector("li.on .page-num")
    var cursvalue = curs.innerText.split("P")[1]
    var sp=document.querySelector("body>p>span")
    var a=document.querySelector("body>p")
    timelist.forEach((ele,index)=> {
        if (index<=cursvalue-1 ) {
			//解决 小时的问题  把小时变为 60分钟
			//01 : 50: 20 == [ "01" , "50" , "20"]
			if(ele.innerText.split(":").length==3){
				min = ele.innerText.split(":")[0]*60
		     	current += Number(min)
		     	min1 = ele.innerText.split(":")[1]
		     	current += Number(min1 )
			}else{
				//取出分钟
				min = ele.innerText.split(":")[0]
		     	current += Number(min)
			}
			
		     
		 }
		 //同理
		 if(ele.innerText.split(":").length==3){
			min = ele.innerText.split(":")[0]*60
		   	sum += Number(min)
		   	min1 = ele.innerText.split(":")[1]
		   	sum += Number(min1 )
		}else{
			//取出分钟
			min = ele.innerText.split(":")[0]
		    sum += Number(min)
		}
       var cur=current/sum
        a.style.width=100+"%"
        sp.style.width=(cur*100).toFixed(2)+"%"
        sp.innerText=(cur*100).toFixed(2)+"%"+"当前视频总时长"+sum+"当前已看"+current+"还剩时长"+(sum-current)
	}) 
 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

完结撒花

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/130269

看了绝不后悔的文章--(最后附源码 cv即可看到效果)--给哔站的视频生成一个进度条 显示你看的视频时间和你剩余需要观看时间_怎样将网页视频的进度看完代码显示出来

目录

场景

第一代效果

第二代优化

版本三

实验阶段

懒人阶段 cv 即可

优化四 解决小时的问题

最终版本------聪明cv的

完结撒花

看了绝不后悔的文章--(最后附源码 cv即可看到效果)--给哔站的视频生成一个进度条显示你看的视频时间和你剩余需要观看时间_怎样将网页视频的进度看完代码显示出来

优化四解决小时的问题