aimg Progress Bar

あいもげのスレ寿命をプログレスバーで表示します
目前為 2025-12-02 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         aimg Progress Bar
// @name:ja      あいもげプログレスバー
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  あいもげのスレ寿命をプログレスバーで表示します
// @author       nanasy
// @match        https://nijiurachan.net/*/thread.php*
// @icon         https://nijiurachan.net/favicon.ico
// @license      MIT
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    let wrap, fill, start, updater;

    // UI生成
    function createBar() {
        const bar = document.createElement('div');
        bar.id = "progressbar";
        bar.innerHTML = `<div class="wrap"><div class="fill"></div></div>`;
        document.body.appendChild(bar);
        wrap = document.querySelector('#progressbar .wrap');
        fill = document.querySelector('#progressbar .fill');

        const style = document.createElement('style');
        style.textContent = `
            #progressbar{ position: fixed; left: 0px; bottom: 4px; z-index: 200; }
            #progressbar .wrap{ display: flex; position: absolute; height: 4px; background: #222; }
            #progressbar .fill{ background: #e04000; transition: 1s ease-out; height: 4px; }
        `;
        document.head.appendChild(style);
    }

    // サイズ調整
    function adjustWidth() {
        const scrollbar = window.innerWidth - document.documentElement.clientWidth;
        wrap.style.width = `calc(100vw - ${scrollbar}px)`;
    }

    // 表示更新
    function updateBar() {
        adjustWidth();
        const t1 = document.querySelector('#contdisp');
        const t2 = document.querySelector('.thre > div > span:nth-child(8)');
        let text = (t1.textContent? t1: t2).textContent.trim();
        const now = new Date();
        let end = new Date();

        const [h, m] = text.slice(-10, -5).split(':').map(Number);
        end.setHours(h, m, 0, 0);
        if (!/^\d+:\d+/.test(text)) end.setDate(end.getDate() + 1);

        const ratio = (now - start) / (end - start);
        if (ratio > 1) {
            wrap.title = "まもなく消えます";
            fill.style.width = "100%";
            clearInterval(updater);
        } else {
            const min = Math.ceil((end - now) / 60000);
            wrap.title = min >= 60? `あと${Math.floor(min / 60)}時間`: `あと${min}分`;
            fill.style.width = ratio * 100 + "%";
        }
    }

    // 初回実行, タイマーセット
    function init() {
        const node = document.querySelector('.thre > div > span:nth-child(8)');
        if (/\d+:\d+/.test(node?.textContent) && !document.getElementById('progressbar')) {
            start = new Date(document.querySelector('.thre span.cnw').textContent.trim().replace(/\//g, '-'));
            createBar();
            updateBar();
            updater = setInterval(updateBar, 60000);
        }
    }
    setTimeout(init, 1000);
    window.addEventListener('resize', adjustWidth);
})();