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

已于 2023-06-03 23:13:34 修改
阅读量247 收藏
点赞数 1
分类专栏： 前端htmlcss 文章标签： javascript 前端
于 2023-06-03 23:11:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weiyi47/article/details/131025903
版权

目录

场景

某次看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))
})()

参数空
输出如下

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

在这里插入图片描述
当传递参数 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)

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

再度优化 现实更多信息

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

在这里插入图片描述

(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)

版本三

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

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

遇到问题 给原生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'

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

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)
	}) 
 
}

实验阶段

打开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)

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

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

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)
	}) 
 
}

在这里插入图片描述

改变一个集数试试

在这里插入图片描述

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)
	}) 
 
}

实验测试

在这里插入图片描述

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

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

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
就需要加上判断了

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

优化四 解决小时的问题

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)
}

最终版本------聪明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
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值