B站分P视频剩余时间计算器,油猴脚本

随便捣鼓捣鼓

已于 2024-01-15 22:25:48 修改

阅读量819

点赞数 15

文章标签：音视频前端 javascript

于 2024-01-15 16:50:51 首次发布

本文链接：https://blog.csdn.net/2201_75811412/article/details/135605411

版权

这篇文章介绍了一个基于JavaScript的用户脚本，它可以在B站分P视频页面上自动计算剩余的观看时间，当用户点击分P中的任何一集时，会实时更新总时间。脚本通过检测页面元素并处理用户交互来实现这一功能。

摘要由CSDN通过智能技术生成

点击任意一个分P都可以计算剩余时间,

效果如下图

脚本如下

// ==UserScript==
// @name         b站分P视频时间计算器
// @namespace    http://tampermonkey.net/
// @version      2023-12-30
// @description  try to take over the world!
// @author       You
// @match        https://www.bilibili.com/video/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    // Your code here...
    window.onload = function () {
        let btn = document.createElement('button');
        btn.innerText = '计算时间';
        btn.style.position = 'fixed';
        btn.style.right = '10px';
        btn.style.top = '300px';
        btn.style.width = '70px';
        btn.style.padding = '5px';
        document.body.appendChild(btn);

        try {
            if (getP() == null) {
                btn.innerText = "不是分P";
                setTimeout(function () {
                    btn.remove()
                }, 1000);
            } else {
                btn.onclick = function () {
                    calculateTime();
                }
                let pages = document.querySelectorAll("#multi_page > div.cur-list > ul > li");
                for (let page of pages) {
                    page.addEventListener('click', function () {
                        setTimeout(calculateTime, 500); //延迟半秒执行，等待页面成功跳转
                    });
                }
            }

        } catch (err) {
            btn.innerText = err.message;
        }

        function calculateTime() {
            try {
                let elements = document.querySelectorAll("#multi_page > div.cur-list > ul > li > a > div > div.duration");
                let totalSeconds = 0;
                let p = getP();
                console.log("p为" + p + "总集数为" + elements.length);
                for (let i = p - 1; i < elements.length; i++) {
                    let time = elements[i].textContent.trim().split(':').reverse();
                    let seconds = time.reduce((prev, curr, idx) => {
                        return prev + Number(curr) * Math.pow(60, idx);
                    }, 0);
                    totalSeconds += seconds;
                }
                let hours = Math.floor(totalSeconds / 3600);
                let minutes = Math.floor((totalSeconds % 3600) / 60);
                let seconds = totalSeconds % 60;
                let formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                if (hours < 2) {
                    btn.innerText = formattedTime + "\n还有不到2小时,稳啦";
                } else {
                    btn.innerText = formattedTime;
                }
            } catch (err) {
                btn.innerText = err.message;
            }
        }

        function getP() {
            //刚点开分p视频播放第一集时,地址栏是没有p参数的,所以用以下方法
            if (document.getElementsByClassName("cur-page") != null && document.querySelector("#multi_page > div.head-con > div.head-left > h3") != null) {
                let str = document.getElementsByClassName("cur-page")[0].innerText;
                let match = str.match(/\((\d+)\/\d+\)/); // 使用正则表达式匹配分子
                if (match) {
                    return parseInt(match[1]); // 返回匹配到的分子
                }
            }
            return null;
        }
    }
}());