更新了演示效果gif

Bilibili_Video_Progress_Tool

写了可以统计B站学习进度的脚本，这样就可以愉快地看到自己已经看多少，从而增加看视频的耐心和满足感！

• 建议设置观看效果步骤：网页全屏-按F1

功能

• 用圆环进度条显示进度；
• 鼠标移动到圆环进度上，可以显示统计的总时长、已观看时长和剩余时长；
• 增加【拖动】功能，可以将该工具拖动到网页任意地方；
• 增加了【自定义颜色】功能，可以用鼠标左键点击该工具进行自定义颜色；
• 增加了【效果透明度设置】功能，可以用鼠标右键点击该工具进行自定义透明度；
• 后续功能待改进中……

怎么部署？

• 1、下载Tampermonkey等管理脚本的扩展；
• 2、下载本脚本；
• 3、在Tampermonkey上添加本脚本；
• 4、打开https://www.bilibili.com/ 这个网站，找到你想学习的视频即可开始享用！
  • 建议设置观看效果步骤：网页全屏-按F1

其他下载方式

可以直接从本人GitHub仓库上安装此脚本，请点击以下链接： Bilibili Video Progress Tool

PS：本人GitHub主页

效果

演示效果：

版本6.0.2-修复了颜色设置弹窗bug，优化透明度功能

1、修复颜色设置弹窗bug1：视频暂停时拖动工具会显示颜色设置弹窗； 2、修复颜色设置弹窗bug2：拖动时会选中页面文字； 3、优化透明度功能：调整了透明度设置弹窗视觉效果。

增加了功能设置整体透明度调节滑动条

可以使用鼠标右键点击工具，就会弹出透明条弹窗，你可以调节滑动条设置自己喜欢的透明度，比如视频内容很满就可以透明度小一点防止遮挡

增加了自定义颜色功能

增加了自定义颜色功能，可以用鼠标点击这个工具，在弹出的颜色设置弹窗里自定义你想要的颜色

Bilibili_Video_Progress_Tool

写了可以统计B站学习进度的脚本，这样就可以愉快地看到自己已经看多少，从而增加看视频的耐心和满足感！

• 建议设置观看效果步骤：网页全屏-按F1

功能

• 用圆环进度条显示进度；
• 鼠标移动到圆环进度上，可以显示统计的总时长、已观看时长和剩余时长；
• 增加拖动功能，用鼠标可以将该工具拖动到网页任意地方；
• 后续功能待改进中……

怎么部署？

• 1、下载Tampermonkey等管理脚本的扩展；
• 2、下载本脚本；
• 3、在Tampermonkey上添加本脚本；
• 4、打开https://www.bilibili.com/ 这个网站，找到你想学习的视频即可开始享用！
  • 建议设置观看效果步骤：网页全屏-按F1

其他下载方式

可以直接从本人GitHub仓库上安装此脚本，请点击以下链接： Bilibili Video Progress Tool

PS：本人GitHub主页

效果

Bilibili_Video_Progress_Tool

写了可以统计B站学习进度的脚本，这样就可以愉快地看到自己已经看多少，从而增加看视频的耐心和满足感！

• 建议设置观看效果步骤：网页全屏-按F1

功能

• 用圆环进度条显示进度；
• 鼠标移动到圆环进度上，可以显示统计的总时长、已观看时长和剩余时长；
• 增加了拖动功能，用鼠标可以将该工具拖动到任意地方；
• 后续功能待改进中……

怎么部署？

• 1、下载Tampermonkey等管理脚本的扩展；
• 2、下载本脚本；
• 3、在Tampermonkey上添加本脚本；
• 4、打开https://www.bilibili.com/ 这个网站，找到你想学习的视频即可开始享用！
  • 建议设置观看效果步骤：网页全屏-按F1

其他下载方式

可以直接从本人GitHub仓库上安装此脚本，请点击以下链接： Bilibili Video Progress Tool

PS：本人GitHub主页

效果

增加拖动功能

1、添加了拖动功能。 使用 HTML5 的拖放 API ，通过监听 mousedown、mousemove 和 mouseup 事件，实现了 timeDisplay 元素的拖动和放置。 2、将总时长、已观看时长和剩余时长放在总体中间，更加美观！

Update Bilibili_Video_Progress_Tool.user.js

调整了整体大小，让点赞按钮不被遮挡

更新版本3.0.2

1、修复了bug：鼠标移动到进度条上的时候，其他数据隔几秒闪烁一下才显示，鼠标移开的时候进度数据变成NaN%； 2、进行代码优化：确保 dataContainer 的样式设置正确，并且在鼠标进入时能够正确显示。分为以下几点：

• 确保 dataContainer 的样式设置正确： 确保 dataContainer 的 display 属性在鼠标进入时设置为 block。 确保 dataContainer 的 lineHeight 和 textAlign 属性设置正确，以便内容垂直和水平居中。
• 确保 progressBarCanvas 和 dataContainer 的显示逻辑正确： 在鼠标进入时，确保 progressBarCanvas 隐藏，dataContainer 显示；在鼠标离开时，确保 progressBarCanvas 显示，dataContainer 隐藏。
• 确保 dataContainer 的 lineHeight 属性与容器的高度相匹配，以便内容垂直居中。
• 确保在 updateDurations 函数中正确调用 updateDataContainer，以便在更新进度条时同时更新数据容器的内容。

Bilibili_Video_Progress_Tool

写了可以统计B站学习进度的脚本，这样就可以愉快地看到自己已经看多少，从而增加看视频的耐心和满足感！

• 建议设置观看效果步骤：网页全屏-按F1

功能

• 用圆环进度条显示进度；
• 鼠标移动到圆环进度上，可以显示统计的总时长、已观看时长和剩余时长；
• 后续功能待改进中……

怎么部署？

• 1、下载Tampermonkey等管理脚本的扩展；
• 2、下载本脚本；
• 3、在Tampermonkey上添加本脚本；
• 4、打开https://www.bilibili.com/ 这个网站，找到你想学习的视频即可开始享用！
  • 建议设置观看效果步骤：网页全屏-按F1

其他下载方式

可以直接从本人GitHub仓库上安装此脚本，请点击以下链接： Bilibili Video Progress Tool

PS：本人GitHub主页

效果

Bilibili_Video_Progress_Tool

写了可以统计B站学习进度的脚本，这样就可以愉快地看到自己已经看多少，从而增加看视频的耐心和满足感！

• 建议设置观看效果步骤：网页全屏-按F1

功能

• 统计了进度（采用百分比）、总时长、已观看时长和剩余时长，显示在B站视频上面；
• 后续功能待改进中……

怎么部署？

• 1、下载Tampermonkey等管理脚本的扩展；
• 2、下载本脚本；
• 3、在Tampermonkey上添加本脚本；
• 4、打开https://www.bilibili.com/ 这个网站，找到你想学习的视频即可开始享用！
  • 建议设置观看效果步骤：网页全屏-按F1

其他下载方式

可以直接从本人GitHub仓库上安装此脚本，请点击以下链接： Bilibili Video Progress Tool

PS：本人GitHub主页

效果

更新版本3.0.1，进度采用圆环进度条显示

把进度变成圆环形状的进度条

调整圆角

更新了match图标

Update Bilibili_Video_Progress_Tool.user.js

把这个显示效果放在网页左下角

Update Bilibili_Video_Progress_Tool.js

Update Bilibili_Video_Progress_Tool.js