☰

B站视频在线观看人数

添加一个跳转在线播放视频的按钮

// ==UserScript==
// @name         B站视频在线观看人数
// @namespace    http://tampermonkey.net/
// @version      1.2.0
// @description  添加一个跳转在线播放视频的按钮
// @author       Kirari
// @match        https://www.bilibili.com/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=openuserjs.org
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';
    var url = [
        "https://www.bilibili.com/video/online.html",
        "https://www.bilibili.com/video/online.html?spm_id_from=333.851.b_7265706f7274466972737432.14"
    ];
    var randomIndex = Math.floor(Math.random() * url.length);
    var randomUrl = url[randomIndex];
    var newDiv = document.createElement("div");
    newDiv.id = "online_button_container";
    var newButton = document.createElement("button");
    newButton.textContent = "在线人数";

    newButton.onclick = function() {
        window.open(randomUrl, '_blank');
    };

    newDiv.appendChild(newButton);

    var browserWidth = window.innerWidth;
    if(browserWidth > 1560){
      newDiv.style.width = '70px';
      newDiv.style.padding = '16px';
      newDiv.style.fontSize = '16px'; // 修改后的正确语句
      newDiv.style.borderRadius = '25px';

      newDiv.style.left = browserWidth - 75 + 'px';
    } else {
      newDiv.style.width = '55px';
      newDiv.style.height = '55px';
      newDiv.style.padding = '8px';
      newDiv.style.borderRadius = '25px';

      newDiv.style.left = browserWidth - 40 + 'px';
    }

    newDiv.style.position = 'sticky';
    newDiv.style.bottom = '30px';

    newDiv.style.zIndex = '1000';
    newDiv.style.border = '2px solid rgb(34, 34, 34)';
    newDiv.style.borderRadius = '20px';
    newDiv.style.background = 'rgb(152, 211, 227)';
    newDiv.style.boxShadow = 'rgb(152, 211, 227) 3px 3px 1px 1px';

    var parentElement = document.body;

    parentElement.appendChild(newDiv);

    var style = document.createElement('style');
    style.innerHTML = `
      @media(min-width:1560px) {
        width: 70px;
        padding: 16px;
        font-size: 16px;
        border-radius: 25px;
        transition: top 1s ease;
      }
      @media(max-width:1560px) {
        width: 40px;
        height: 40px;
        transition: top 1s ease;
      }
      @media(min-width: 601px) {
        #online_button_container {
          bottom: 10px;
          right: 10px;
        }
      }
    `;
    document.head.appendChild(style);

    window.addEventListener('scroll', () => {
        var scrollY = window.scrollY || document.documentElement.scrollTop;
        if(scrollY >= 700 && browserWidth <= 1560) {
          newDiv.style.bottom = '220px';
        } else {
          newDiv.style.bottom = '30px';
        }
    });

    window.addEventListener('resize', () => {
      browserWidth = window.innerWidth;
      if(browserWidth > 1560){
        newDiv.style.width = '70px';
        newDiv.style.height = '70px';
        newDiv.style.padding = '16px';
        newDiv.style.fontSize = '16px';
        newDiv.style.borderRadius = '25px';
        newDiv.style.left = browserWidth - 75 + 'px';
      } else {
        newDiv.style.width = '55px';
        newDiv.style.height = '55px';
        newDiv.style.padding = '8px';
        newDiv.style.left = browserWidth - 40 + 'px';
      }
    });
})();