☰

MCBBS 自定义背景

自定义mcbbs的背景

目前为 2020-05-14 提交的版本。查看 最新版本。

// ==UserScript==
// @name         MCBBS 自定义背景
// @namespace    http://fang.blog.miri.site/
// @version      2.1
// @icon         https://s2.ax1x.com/2020/02/25/3twNzq.png
// @description  自定义mcbbs的背景
// @author       Mr_Fang
// @match        https://*.mcbbs.net/*
// @grant        none
// ==/UserScript==

(function() {
    // 定义变量
    var storage = window.localStorage;
    var mbg_url = storage.getItem('mbg_url');
    var mbg_opacity = storage.getItem('mbg_opacity');
    var mbg_border_top = storage.getItem('mbg_border_top');
    var version = "2.1";
    var date = new Date();

    console.log(" %c MCBBS 自定义背景 %c V"+ version +" ", "color: #fff; background: #f8981d; padding:5px;", "color:#fff; background: #000; padding:5px;");
    console.log(" %c Made by %c 快乐小方 ", "color: #fff; background: #815098; padding:5px;", "color:#fff; background: #000; padding:5px;");

    //
    // 0.4.1 在0.4基础上降低了泥潭吉祥物泥猪的层级，既不会被广告遮挡又不会挡住其它内容了
    // 0.4.2 自定义的背景现在会居中显示了
    // 2.0   去掉了夜间模式、添加了背景随机机制、可以自定义泥潭的挂件了
    //

    // 在个人信息菜单中添加按钮
    jq('.user_info_menu_btn').append('<li><a id="bg_setting">自定义背景</a></li>');
    // 设置窗口
    document.getElementById('bg_setting').addEventListener('click',function(){
        showDialog('<style>.alert_right {background-image: none;padding-right: 0px;padding-left: 0px;}</style><div class=""><b>点击确定保存 刷新后生效</b><hr><p>自定义背景图 <font color="gray">- 请填写图片链接(多行即启用随机显示)</font></p><textarea id="mbg_url_input" style="width: 98%;" rows="5">' + storage.getItem('mbg_url') + '</textarea><p>透明度 <font color="gray">- 当前' + storage.getItem('mbg_opacity') + '%</font></p><input min="0" max="100" type="range" value="' + storage.getItem('mbg_opacity') + '" id="mbg_opacity_input" style="width: 98%;"><font>0%</font><font style="float: right;">100%</font><p>自定义挂件 <font color="gray">- 请填写图片链接(留空或null即不显示)</font></p><input id="mbg_border_top_input" value="'+ storage.getItem('mbg_border_top') +'" style="width: 98%;" ></div>',
                   'right',
                   '<div style="line-height:30px;"><img src="https://s2.ax1x.com/2020/02/25/3twNzq.png" width="20px"> 自定义背景</div>',
                   function() {
            storage["mbg_url"] = document.getElementById("mbg_url_input").value;
            storage["mbg_opacity"] = document.getElementById("mbg_opacity_input").value;
            storage["mbg_border_top"] = document.getElementById("mbg_border_top_input").value;
        }
                  );
    })


    mbg_url = "['" + storage.getItem('mbg_url') + "']";
    var n = mbg_url.split('\n').length - 1;
    for(var l=0;l<n;l++){
        mbg_url = mbg_url.replace('\n',"','");
        //console.log(mbg_url);
    }

    var mbg_urlList = eval("(" + mbg_url + ")");
    console.log(mbg_urlList);

    var hsv = mbg_urlList.length; // 获取数组长度
    var ran = Math.floor(Math.random()*hsv); // 取0至数组最大下标值中的随机数（因为floor是向下取整）


    // 判断是背景否为空
    if(mbg_urlList == null){
        mbg_urlList = ['https://www.mcbbs.net/template/mcbbs/image/body_bg.jpg'];
    }

    // 判断透明度是否为空
    if(mbg_opacity == null){
        mbg_opacity = 100;
    }

    // 判断挂件是否为空
    if(mbg_border_top != null){
        // 这个挂件是论坛自带的，但是被注释掉了
        // 泥潭吉祥物泥猪的路径地址：template/mcbbs/image/muddy_pig_subhero_updated6-19.png
        jq('<img class="mc_top" src="' + mbg_border_top + '" draggable="false"/>').insertBefore(".mc_map_border_top");
    }

    // 在head里添加css
    jq("head").append('<style id="mbg_css">img.mc_top{z-index:99;} #body_fixed_bg {background-image: url(' + mbg_urlList[ran] + '); background-position: center;} div.mc_map_wp { opacity: ' + mbg_opacity/100 + '; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } div.mc_map_wp:hover { opacity: 1; }</style>');

})();