用油猴脚本8行代码帮UP主更好拿捏弹幕分析

257 阅读4分钟

视频链接

大家好,我是一名刚刚入住B站九天的新人up主,目前有73个粉丝,24条弹幕,所以呢,我很珍惜每一条弹幕, 每一条新弹幕我都会去看一看,他们到底是在评论什么。

但我会遇到一个问题,就是当点开这个管理页面的链接之后,跳转到的页面是从头开始播放的。 你就没有办法知道用户究竟是在对哪一段作出哈哈哈的评论。

作为一个程序员呢,当然要自己动手去解决这个问题了。

下面。就有请前端,油猴!

Xnip2021-11-25_21-05-37.jpg

油猴是一个可以让你使用自定义脚本对网页进行改造的浏览器插件,它的官网我就放在了评论区的置顶, 还没有安装的小伙伴去官网下载安装就可以了。

当你安装好了之后就会像我一样,在右上角出现这样的一个小图标。

点击选择 添加新脚本就会看到一个有很多代码的网页。

当然,如果你是一个前端程序员的话,可能到现在你已经把代码写完了,如果是刚刚开始学前端的盆友,能相信我在讲解之后你应该让听懂,如果你完全没有基础的话,也没有关系,抄作业的地址我已经在评论区置顶给大家了。

我们先解简单解释一些简单的部分,比如说这有一个match表示了这一段脚本,只会在匹配的网页能够生效, 反正这一部分的代码,你基本都不需要改动,直接在下面写自己的脚本就可以。

接下来我们要用到一个有一点冷的知识。 就是在B站链接的后面加上一个问号T等于10分秒这样的结构,这个链接可以让视频在指定的时间轴位置打开。

于是我们接下来的任务就是把时间添加到对应的链接后面。

找一下两个元素的选择器是什么。

先看链接的元素,是一个A标签,类名有danmu-content,试一下,果然可以。

再看时间的,colum-content好像有点平庸,我们注意到他是每一行的第三的元素,可以使用nth-child选择,试一下td:nth-child(3) .colum-content,果然也可以。

下一步呢,就是我们的组装工作了,循环所有的链接的元素,然后拿一下他的index。

这里我们希望把:冒号分割时分秒拆开, 注意啊,这个时间可能有小时也可能没有小时。

就这个问题你们可以暂停下来,想一想,有什么办法通过原生的js实现。

我觉得这个问题完全可以当作校招的面试题,还挺有意思的。

Xnip2021-11-25_21-11-48.jpg

方法可能有很多,我想到的方法是这样的,很容易注意到这个时间,他一定是有分合秒,那么我们用:分割把它拆开之后倒置数组,那这个数组的第一个元素一定就是秒,第二个是分如果有第三个,他就是时,如果没有我们就让他取默认值零。

拿到分开的时分秒之后的的事情就比较简单了,我们把链接拼接一下赋值给原来的链接,之后可以把脚本名字改得正式一点,再改一个正式的版本号,保存好。刷新页面看一下,右上角有一个小红点,说明脚本被加载了,但是呢却没有生效。

打印一下看看,是不是选择器的问题,发现NodeList是空的,为什么是空的呢?因为这个页面还没有完全被加载的时候脚本执行了,所以我们要等一下页面加载,不做太复杂,就非常粗暴地先续一秒好了。好,再刷新试一下,已经有参数了,不过少了一个s,补上,这次应该没有问题了。

油猴官网: www.tampermonkey.net

脚本地址: gist.github.com/alili/46494…