bilibili界面背景更改完整版

Greasy Fork is available in English.
bilibili界面背景更改完整版

更改b站背景的懒人脚本，位置在页面左下角
当前为 2020-07-24 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         bilibili界面背景更改完整版
// @namespace    https://github.com/wuxintlh/
// @version      0.3.7.3
// @description  更改b站背景的懒人脚本，位置在页面左下角
// @author       桜wuxin
// @match        *://*.bilibili.com/*
// @QQgroup      793513923
// @grant        none
// ==/UserScript==
set();
var bcurl = '';
var host = window.location.host;
var body = document.querySelector('body');
if (host != 'live.bilibili.com') {
    spandiv(body);
    spandivD(body);
} else {
    var main = document.querySelector('.live-room-app').querySelector('.z-app-content');
    if (main != undefined) {
        spandiv(main);
        spandivD(main);
    } else {
        spandiv(body);
        spandivD(body);
    }
};
window.addEventListener('scroll', function() {
    var span = document.querySelector('.SakuraSpans');
    var div = document.querySelector('.SakuraDivd');
    span.style.position = 'fixed';
    div.style.position = 'fixed';
})
var span = document.querySelector('.SakuraSpans');
//侧边栏弹出
span.addEventListener('mouseover', function() {
    animate(span, 0)
})
span.addEventListener('mouseout', function() {
    var div = document.querySelector('.SakuraDivd');
    if (div.style.display == 'block') {
        false
    } else {
        animate(span, -90)
    }
})
//弹出框
span.addEventListener('click', function() {
    var div = document.querySelector('.SakuraDivd');
    if (div.style.display == 'none' && this.style.left == '0px') {
        div.style.display = 'block';
    } else {
        div.style.display = 'none';
    }
});
//更换背景
var button = document.querySelector('.SakuraButtonb')
button.addEventListener('click', function() {
    var input = document.querySelector('.SakuraInputi');
    bcurl = input.value;
    if (bcurl == '') {
        alert('你没有输入任何内容!');
    } else {
        var div = document.querySelector('.SakuraBackground');
        div.dataUname = 'background';
        div.style.backgroundColor = 'white';
        //在本地储存bcurl
        window.localStorage.setItem('bcurl', bcurl);
        div.style.background = 'url(' + bcurl + ')';
    }
});
var input = document.querySelector('.SakuraInputi');
input.addEventListener('focus', function() {
    if (input.value == '') {
        input.placeholder = '';
    }
});
input.addEventListener('blur', function() {
    if (input.value == '') {
        input.placeholder = '请输入完整的背景url';
    }
});
//打开页面时设置背景
function set() {
    'use strict';
    // Your code here...
    var body = document.querySelector('body');
    var div = document.createElement('div');
    body.appendChild(div);
    div.dataUname = 'background';
    var ifbcurl = window.localStorage.getItem('bcurl')
    if (ifbcurl != '' && ifbcurl != null) {
        div.style.background = 'url(' + window.localStorage.getItem('bcurl') + ')' //保存的背景
    } else {
        div.style.background = 'url(https://i0.hdslb.com/bfs/album/eb65ae5ee6f66b6381090f5bee4fe6cbabfd6d0d.png)' //默认背景
    }
    div.style.backfroundRepeat = 'no-repeat';
    div.style.position = 'fixed';
    div.style.backgroundPosition = 'center 0';
    div.style.backgroundSize = 'cover';
    div.style.zoom = '1';
    div.style.width = '100%';
    div.style.height = '100%';
    div.style.top = '0';
    div.style.left = '0';
    div.style.webkitBackgroundSize = 'cover';
    div.style.zIndex = '-1';
    div.className = 'SakuraBackground';
};

function spandiv(target) {
    var div = document.createElement('div');
    var span = document.createElement('span');
    var input = document.createElement('input');
    var button = document.createElement('button');
    target.appendChild(span);
    span.innerHTML = '点击更换背景';
    span.className = 'SakuraSpans';
    span.style.width = '100px';
    span.style.height = '22px';
    span.style.position = 'absolute';
    span.style.top = '940px';
    span.style.left = '-90px';
    span.style.backgroundColor = 'rgba(0,255,255,.5)';
    span.style.userSelect = 'none';
    span.style.zIndex = '10';
    span.style.fontSize = '15px';
    target.appendChild(div);
    div.className = 'SakuraDivd';
    div.style.backgroundColor = 'rgba(255,0,255,.5)'
    div.style.width = '400px';
    div.style.height = '60px';
    div.style.position = 'absolute';
    div.style.top = '902px'
    div.style.left = '100px';
    div.style.display = 'none';
    div.style.zIndex = '10';
    span.style.position = 'fixed';
    div.style.postion = 'fixed';
    div.appendChild(input);
    div.appendChild(button);
    input.type = 'text';
    input.placeholder = '请输入完整的背景url';
    input.style.width = '400px';
    input.className = 'SakuraInputi';
    button.innerHTML = '点击更换背景';
    button.style.position = 'absolute';
    button.style.top = '30px';
    button.style.left = '150px';
    button.className = 'SakuraButtonb';
};

function spandivD(target) {
    var div = document.createElement('div');
    var body = document.querySelector('body');
    var span = document.createElement('span');
    var img = document.createElement('img');
    target.appendChild(span);
    span.innerHTML = '点击查看默认背景';
    span.className = 'SakuraDSpans';
    span.style.width = '140px';
    span.style.height = '22px';
    span.style.position = 'absolute';
    span.style.top = '900px';
    span.style.left = '-120px';
    span.style.backgroundColor = 'rgba(0,255,255,.5)';
    span.style.userSelect = 'none';
    span.style.zIndex = '10';
    span.style.fontSize = '15px';
    target.appendChild(div);
    div.className = 'SakuraDDivd';
    div.style.backgroundColor = 'rgba(255,255,255,.4)'
    div.style.width = '300px';
    div.style.height = '200px';
    div.style.position = 'absolute';
    div.style.top = '723px'
    div.style.left = '140px';
    div.style.display = 'none';
    div.style.zIndex = '10';
    span.style.position = 'fixed';
    div.style.position = 'fixed';
    div.appendChild(img);
    img.src = 'https://i0.hdslb.com/bfs/album/eb65ae5ee6f66b6381090f5bee4fe6cbabfd6d0d.png';
    img.style.width = '80px';
    img.style.height = '80px';
    img = document.createElement('img');
    div.appendChild(img);
    img.src = 'https://i0.hdslb.com/bfs/vc/4f28d6cb9e7dec4122412efed54b8a7fe6f672c1.png';
    img.style.width = '80px';
    img.style.height = '80px';
    img.style.marginLeft = '30px';
    img = document.createElement('img');
    div.appendChild(img);
    img.src = 'https://i0.hdslb.com/bfs/album/7f8a0fb6899359023cb5f203dc7e67ae2e0c9f75.jpg@2000w_1e.webp';
    img.style.width = '80px';
    img.style.height = '80px';
    img.style.marginLeft = '30px';
    img = document.createElement('img');
    div.appendChild(img);
    img.src = 'https://i0.hdslb.com/bfs/album/658ab52e2d631f9d974112e2d5b4cab476e3f61d.jpg';
    img.style.width = '80px';
    img.style.height = '80px';
    img.style.marginTop = '40px';
    img = document.createElement('img');
    div.appendChild(img);
    img.src = 'https://i0.hdslb.com/bfs/album/9d90714d6b5d684a5f36a31f2cfb99b89ebfc729.png';
    img.style.width = '80px';
    img.style.height = '80px';
    img.style.marginLeft = '30px';
    img.style.marginTop = '40px';
    img = document.createElement('img');
    div.appendChild(img);
    img.src = 'https://i0.hdslb.com/bfs/drawyoo/5174c57714f259cc2db4b677928204321a161c3c.jpg';
    img.style.width = '80px';
    img.style.height = '80px';
    img.style.marginLeft = '30px'
    img.style.marginTop = '40px';
}
//提供默认背景更改的弹出框等
var spanD = document.querySelector('.SakuraDSpans');
window.addEventListener('scroll', function() {
    var spanD = document.querySelector('.SakuraDSpans');
    var divD = document.querySelector('.SakuraDDivd');
    spanD.style.position = 'fixed';
    divD.style.position = 'fixed';
})
spanD = document.querySelector('.SakuraDSpans');
//侧边栏弹出
spanD.addEventListener('mouseover', function() {
    animate(spanD, 0)
})
spanD.addEventListener('mouseout', function() {
    var divD = document.querySelector('.SakuraDDivd');
    if (divD.style.display == 'block') {
        false
    } else {
        animate(spanD, -120)
    }
})
//弹出框
spanD.addEventListener('click', function() {
    var divD = document.querySelector('.SakuraDDivd');
    if (divD.style.display == 'none' && this.style.left == '0px') {
        divD.style.display = 'block';
    } else {
        divD.style.display = 'none';
    }
});
var divD = document.querySelector('.SakuraDDivd');
var img = divD.querySelectorAll('img');
for (var i = 0; i < img.length; i++) {
    img[i].addEventListener('click', function() {
        var divD = document.querySelector('.SakuraBackground');
        divD.style.background = 'url("' + this.src + '")';
        window.localStorage.setItem('bcurl', this.src);
    })
}

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        //(目标位置-当前位置)/10 = 步长
        var step = (target - obj.offsetLeft) / 10
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            //回调函数写到定时器结束里面
            if (callback) {
                animate(obj, target, callback);
            }
        } else {
            obj.style.left = obj.offsetLeft + step + 'px';
        }
    }, 10)
};