Greasy Fork is available in English.
哔哩哔哩推荐模块
当前为
// ==UserScript==
// @name 哔哩哔哩推荐-
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 哔哩哔哩推荐模块
// @author You
// @match https://*.bilibili.com/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// ==/UserScript==
(function() {
'use strict';
/**
* 秒 转 可阅读的时长
* @param secondDuration
*/
function utilSecond2StrChinese(secondDuration = 0) {
let day = Math.floor(secondDuration / (60 * 60 * 24));
secondDuration -= day * (60 * 60 * 24);
let hour = Math.floor(secondDuration / (60 * 60));
secondDuration -= hour * (60 * 60);
let minute = Math.floor(secondDuration / (60));
secondDuration -= minute * (60);
return (day ? day + '天' : '')
+ (hour ? hour + '时' : '')
+ (minute ? minute + '分' : '')
+ (secondDuration ? secondDuration + '秒' : '');
}
/**
* 播放量 转 几万播放量
* @param secondDuration
*/
function utilPlayTimes2TenThousands(playTimes = 0) {
if (playTimes < 10000) {
return playTimes;
}
return (playTimes / 10000).toFixed(1) + '万';
}
/*时间(今年的没年份)*/
function utilDate2Str(date) {
let curDate = new Date();
return !date ? ''
: (date.getFullYear() === curDate.getFullYear() ? '' : date.getFullYear() + '年')
+ (date.getMonth() + 1) + '月'
+ date.getDate() + '日';
}
let html = `
<a class="btn contact-help" id="open-my-recommend" onclick="document.getElementById('my-bilibili-recommend').style.display='block'">推荐页</a>
<div id="my-bilibili-recommend" style="display:none;">
<a class="btn" id="close-my-recommend">返回</a>
<a class="btn" id="refresh-my-recommend">刷新</a>
<div class="recommend-content" style="text-align: center;">
</div>
</div>
`;
let style = `
<style>
#open-my-recommend {
height: 60px;
top: calc(50% - 100px);
}
div#my-bilibili-recommend {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background: #FFF;
z-index: 10000;
overflow: auto;
}
#my-bilibili-recommend .recommend-video {
width: 360px;
height: 120px;
overflow: hidden;
position: relative;
margin: 5px;
display: inline-block;
text-align: left;
}
#my-bilibili-recommend .recommend-video .recommend-video-img {
width: calc(100% - 150px);
overflow: hidden;
height: 100%;
float: left;
}
#my-bilibili-recommend .recommend-video img {
width: 100%;
height: 100%;
object-fit: cover;
}
#my-bilibili-recommend a.recommend-video-info {
display: block;
float: left;
width: 150px;
height: 100%;
position: relative;
}
#my-bilibili-recommend a.recommend-video-info > div {
padding: 0 5px;
}
#my-bilibili-recommend .recommend-video-user {
position: absolute;
bottom: 0;
left: 0;
}
#my-bilibili-recommend .recommend-video-time {
position: absolute;
bottom: 0;
right: 0;
}
#my-bilibili-recommend .recommend-video-play-times {
position: absolute;
bottom: 17px;
}
#my-bilibili-recommend .recommend-video-duration {
position: absolute;
bottom: 34px;
}
#my-bilibili-recommend .recommend-video-play-tags {
position: absolute;
bottom: 17px;
right: 0;
}
</style>
`
let div = document.createElement('div');
document.body.append(div);
div.innerHTML += html + style;
function getVideoHtml(video) {
if (document.querySelector('.recommend-video[videoId="'+video.id+'"]') != null) {
return ``;
}
return `
<div class="recommend-video" title="${video.title}" videoId="${video.id}">
<div class="recommend-video-img"><a href="${video.uri}" target="_blank"><img src="${video.pic}"></a></div>
<a class="recommend-video-info" href="${video.uri}" target="_blank">
<div class="recommend-video-title">${video.title.substring(0, 40)}</div>
<div class="recommend-video-play-times">${utilPlayTimes2TenThousands(video.stat.view)}</div>
<div class="recommend-video-user">${video.owner.name}</div>
<div class="recommend-video-duration">${utilSecond2StrChinese(video.duration)}</div>
</a>
</div>
`
}
function eleCommendContent() {
return document.querySelector('#my-bilibili-recommend .recommend-content');
}
document.getElementById('open-my-recommend').onclick = document.getElementById('close-my-recommend').onclick = function () {
let recommend = document.getElementById('my-bilibili-recommend');
if (recommend.style.display === 'none') {
recommend.style.display = 'block';
document.documentElement.style.overflow = 'hidden';
if (containerTooLess()) {
RestGetVideoList();
}
} else {
recommend.style.display = 'none';
document.documentElement.style.overflow = 'auto';
}
};
document.getElementById('refresh-my-recommend').onclick = function () {
eleCommendContent().innerHTML = '';
RestGetVideoList();
};
RestGetVideoList();
function RestGetVideoList() {
let request = new XMLHttpRequest();
request.open('GET', 'https://api.bilibili.com/x/web-interface/index/top/rcmd?fresh_type=3&fresh=' + Math.random());
request.setRequestHeader("If-Modified-Since","0"); // 清除缓存
request.setRequestHeader('Content-Type', 'application/json');
request.withCredentials = true;
// request.setRequestHeader('cookie', document.cookie);
request.addEventListener('load', function () {
let newHtml = '';
for (let video of JSON.parse(this.responseText).data.item) {
newHtml += getVideoHtml(video);
}
eleCommendContent().innerHTML += newHtml;
if (containerTooLess()) {
RestGetVideoList()
}
})
request.send();
}
document.getElementById('my-bilibili-recommend').onscroll = function (event) {
let scrollTop = document.getElementById('my-bilibili-recommend').scrollTop;
let height = document.getElementById('my-bilibili-recommend').clientHeight;
let contentHeight = 0;
for (let child of document.getElementById('my-bilibili-recommend').children) {
contentHeight += child.clientHeight;
}
if (scrollTop + height + 50 >= contentHeight) {
RestGetVideoList();
}
};
function containerTooLess() {
let height = document.getElementById('my-bilibili-recommend').clientHeight;
let contentHeight = 0;
for (let child of document.getElementById('my-bilibili-recommend').children) {
contentHeight += child.clientHeight;
if (contentHeight > height) {
return false;
}
}
return contentHeight < height;
}
// Your code here...
})();