☰

定时关闭网页

拖拽弹窗，滑块设置分钟+秒，右上角显示剩余时间

当前为 2025-08-18 提交的版本，查看 最新版本。

// ==UserScript==
// @name         定时关闭网页
// @namespace    https://github.com/yingchen6
// @version      1.8.7.7
// @description  拖拽弹窗，滑块设置分钟+秒，右上角显示剩余时间
// @author       yingchen6
// @match        *://*/*
// @grant        GM_registerMenuCommand
// @license MIT
// @require      https://unpkg.com/sweetalert/dist/sweetalert.min.js
// ==/UserScript==

(function(){
    'use strict';

    let timerId=null;
    let remainingSeconds=0;
    let totalSeconds=0;
    let ball=null;
    let canvas=null;
    let paused=false;
    let theme='green'; // 默认主题

    // 主题定义
    const THEMES={
        green:{bg:'rgba(150,180,160,0.6)',progress:'#5B7A63',panel:'rgba(150,180,160,0.5)',label:'#ffffff',btnBg:'#8DA897',btnText:'#fff'},
        bluegray:{bg:'rgba(120,140,160,0.6)',progress:'#3E586C',panel:'rgba(120,140,160,0.5)',label:'#ffffff',btnBg:'#708090',btnText:'#fff'},
        yellow:{bg:'rgba(200,180,120,0.6)',progress:'#A1864D',panel:'rgba(200,180,120,0.5)',label:'#ffffff',btnBg:'#BFA76F',btnText:'#fff'},
        purple:{bg:'rgba(160,140,180,0.6)',progress:'#7A637A',panel:'rgba(160,140,180,0.5)',label:'#ffffff',btnBg:'#8F7090',btnText:'#fff'}
    };

    function formatTime(seconds){
        const m=Math.floor(seconds/60);
        const s=seconds%60;
        return `${m}:${s.toString().padStart(2,'0')}`;
    }

    function createBall(minutes){
        totalSeconds=remainingSeconds=minutes*60;
        paused=false;

        if(ball) ball.remove();

        ball=document.createElement("div");
        ball.id="timer-ball";
        Object.assign(ball.style,{
            position:"fixed",top:"20px",left:"20px",width:"120px",height:"120px",
            borderRadius:"50%",zIndex:"999999",cursor:"grab",display:"flex",
            justifyContent:"center",alignItems:"center",userSelect:"none",
            background:THEMES[theme].bg,boxShadow:"0 8px 25px rgba(0,0,0,0.5)"
        });
        document.body.appendChild(ball);

        canvas=document.createElement("canvas");
        canvas.width=120;canvas.height=120;
        canvas.style.position="absolute";canvas.style.top="0";canvas.style.left="0";
        ball.appendChild(canvas);

        const label=document.createElement("div");
        label.id="timer-label";
        Object.assign(label.style,{position:"absolute",color:THEMES[theme].label,fontWeight:"bold",fontSize:"20px"});
        ball.appendChild(label);

        const pauseBtn=document.createElement("div");
        pauseBtn.id="pause-btn";
        Object.assign(pauseBtn.style,{
            position:"absolute",bottom:"5px",fontSize:"14px",color:THEMES[theme].btnText,
            background:THEMES[theme].btnBg,borderRadius:"8px",padding:"4px 10px",cursor:"pointer"
        });
        pauseBtn.textContent="暂停";
        ball.appendChild(pauseBtn);

        pauseBtn.addEventListener("click",e=>{
            e.stopPropagation();
            paused=!paused;
            pauseBtn.textContent=paused?"继续":"暂停";
        });

        // 拖拽 + 双击打开剩余时间设置
        let isDown=false,isDragging=false,startX=0,startY=0,downTime=0;
        ball.addEventListener("mousedown",e=>{
            if(e.target===pauseBtn) return; // 点击按钮不拖拽
            isDown=true;isDragging=false;
            startX=e.clientX-ball.offsetLeft;startY=e.clientY-ball.offsetTop;
            downTime=Date.now();
            ball.style.cursor="grabbing";
        });

        document.addEventListener("mousemove",e=>{
            if(!isDown) return;
            const dx=e.clientX-startX-ball.offsetLeft;
            const dy=e.clientY-startY-ball.offsetTop;
            if(Math.sqrt(dx*dx+dy*dy)>5)isDragging=true;
            if(isDragging){
                ball.style.left=(e.clientX-startX)+"px";
                ball.style.top=(e.clientY-startY)+"px";
            }
        });

        document.addEventListener("mouseup",e=>{
            if(!isDown) return;
            isDown=false;
            ball.style.cursor="grab";
            const elapsed=Date.now()-downTime;
            if(!isDragging && elapsed<400){
                showTimeSetting(); // 双击小球内部打开设置
            }
        });

        startCountdown(minutes);
    }

    function startCountdown(minutes){
        totalSeconds=remainingSeconds=minutes*60;
        paused=false;
        if(timerId) clearInterval(timerId);

        timerId=setInterval(()=>{
            if(!paused){
                remainingSeconds--;
                if(remainingSeconds<=0){clearInterval(timerId);window.location.href="about:blank";return;}
                const label=document.getElementById("timer-label");
                label.textContent=formatTime(remainingSeconds);

                const ctx=canvas.getContext("2d");
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.beginPath();
                ctx.arc(canvas.width/2,canvas.height/2,50,0,2*Math.PI);
                ctx.strokeStyle="rgba(255,255,255,0.2)";
                ctx.lineWidth=10;ctx.stroke();

                const fraction=remainingSeconds/totalSeconds;
                ctx.beginPath();
                ctx.arc(canvas.width/2,canvas.height/2,50,-Math.PI/2,-Math.PI/2+2*Math.PI*fraction);
                ctx.strokeStyle=THEMES[theme].progress;
                ctx.lineWidth=10;ctx.lineCap="round";ctx.stroke();
            }
        },1000);
    }

    function showTimeSetting(){
        const wrapper=document.createElement("div");
        Object.assign(wrapper.style,{
            display:"flex",flexDirection:"column",alignItems:"center",gap:"10px",
            padding:"15px",borderRadius:"12px",background:THEMES[theme].panel
        });

        wrapper.innerHTML=`
            <div style="font-size:20px;font-weight:bold;color:${THEMES[theme].label};margin-bottom:10px;">设置倒计时</div>
            <label>分钟: <input id="timeMin" type="range" min="0" max="180" step="1" value="${Math.floor(remainingSeconds/60)}"></label>
            <span id="minLabel">${Math.floor(remainingSeconds/60)}</span> 分钟
            <label>秒: <input id="timeSec" type="range" min="0" max="59" step="1" value="${remainingSeconds%60}"></label>
            <span id="secLabel">${remainingSeconds%60}</span> 秒
            <div style="display:flex;gap:10px;margin-top:10px;">
                <button id="confirmBtn" style="padding:6px 12px;border:none;border-radius:8px;background:${THEMES[theme].btnBg};color:${THEMES[theme].btnText};cursor:pointer;">确认</button>
                <button id="cancelBtn" style="padding:6px 12px;border:none;border-radius:8px;background:${THEMES[theme].btnBg};color:${THEMES[theme].btnText};cursor:pointer;">取消</button>
            </div>
        `;
        document.body.appendChild(wrapper);

        const minInput=wrapper.querySelector("#timeMin");
        const secInput=wrapper.querySelector("#timeSec");
        const minLabel=wrapper.querySelector("#minLabel");
        const secLabel=wrapper.querySelector("#secLabel");
        minInput.addEventListener("input",()=>{minLabel.textContent=minInput.value;});
        secInput.addEventListener("input",()=>{secLabel.textContent=secInput.value;});

        wrapper.querySelector("#confirmBtn").addEventListener("click",()=>{
            const min=parseInt(minInput.value);
            const sec=parseInt(secInput.value);
            remainingSeconds=totalSeconds=min*60+sec;
            wrapper.remove();
            createBall(Math.ceil(totalSeconds/60));
        });

        wrapper.querySelector("#cancelBtn").addEventListener("click",()=>{wrapper.remove();});
    }

    if(typeof GM_registerMenuCommand!=="undefined"){
        GM_registerMenuCommand("开始计时",()=>{showTimeSetting();});
    }

})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址