拖拽弹窗，滑块设置分钟+秒，右上角显示剩余时间
目前為
// ==UserScript==
// @name 定时关闭网页
// @namespace https://github.com/yingchen6
// @version 1.8.4
// @description 拖拽弹窗，滑块设置分钟+秒，右上角显示剩余时间
// @author yingchen6
// @match *://*/*
// @grant GM_registerMenuCommand
// @license MIT
// ==/UserScript==
// ==UserScript==
// @name 定时关闭网页
// @namespace https://github.com/yingchen6
// @version 1.7
// @description 弹出可拖动倒计时设置页面（分钟+秒），支持开始/暂停，倒计时结束自动关闭网页
// @author yingchen6
// @match *://*/*
// @grant GM_registerMenuCommand
// @license MIT
// ==/UserScript==
(function() {
'use strict';
let timerId = null;
let remainingSeconds = 0;
let paused = false;
function formatTime(seconds){
const m = Math.floor(seconds/60);
const s = seconds%60;
return `${m}:${s.toString().padStart(2,'0')}`;
}
function startCountdown(min, sec){
remainingSeconds = min*60 + sec;
paused = false;
if(timerId) clearInterval(timerId);
timerId = setInterval(()=>{
if(!paused){
remainingSeconds--;
if(remainingSeconds<=0){
clearInterval(timerId);
window.location.href="about:blank";
return;
}
}
},1000);
}
function showTimeSetting(){
const wrapper = document.createElement("div");
wrapper.style.position = "fixed";
wrapper.style.top = "50%";
wrapper.style.left = "50%";
wrapper.style.transform = "translate(-50%,-50%)";
wrapper.style.background = "#222";
wrapper.style.color = "#fff";
wrapper.style.padding = "20px";
wrapper.style.borderRadius = "10px";
wrapper.style.boxShadow = "0 0 15px rgba(0,0,0,0.5)";
wrapper.style.zIndex = "999999";
wrapper.style.display = "flex";
wrapper.style.flexDirection = "column";
wrapper.style.alignItems = "center";
wrapper.style.cursor = "move";
wrapper.innerHTML = `
<h3>设置倒计时</h3>
<div style="margin-bottom:10px;">
<label>分钟: <span id="minLabel">30</span></label>
<input id="minRange" type="range" min="0" max="180" step="1" value="30" style="width:200px;">
</div>
<div style="margin-bottom:10px;">
<label>秒: <span id="secLabel">0</span></label>
<input id="secRange" type="range" min="0" max="59" step="1" value="0" style="width:200px;">
</div>
<div style="margin-top:10px;">
<button id="confirmBtn">确定</button>
<button id="cancelBtn">取消</button>
</div>
`;
document.body.appendChild(wrapper);
const minRange = wrapper.querySelector("#minRange");
const secRange = wrapper.querySelector("#secRange");
const minLabel = wrapper.querySelector("#minLabel");
const secLabel = wrapper.querySelector("#secLabel");
const confirmBtn = wrapper.querySelector("#confirmBtn");
const cancelBtn = wrapper.querySelector("#cancelBtn");
minRange.addEventListener("input", ()=>{ minLabel.textContent = minRange.value; });
secRange.addEventListener("input", ()=>{ secLabel.textContent = secRange.value; });
// 阻止滑块拖动冒泡到 wrapper
minRange.addEventListener("mousedown", e=>e.stopPropagation());
secRange.addEventListener("mousedown", e=>e.stopPropagation());
confirmBtn.addEventListener("click", ()=>{
const m = parseInt(minRange.value);
const s = parseInt(secRange.value);
document.body.removeChild(wrapper);
startCountdown(m,s);
});
cancelBtn.addEventListener("click", ()=>{ document.body.removeChild(wrapper); });
// 整个弹窗拖拽
let isDown=false, offsetX=0, offsetY=0;
wrapper.addEventListener("mousedown", e=>{
if(e.target.tagName==="INPUT" || e.target.tagName==="BUTTON") return;
isDown=true;
offsetX = e.clientX - wrapper.offsetLeft;
offsetY = e.clientY - wrapper.offsetTop;
});
document.addEventListener("mousemove", e=>{
if(isDown){
wrapper.style.left = (e.clientX-offsetX)+"px";
wrapper.style.top = (e.clientY-offsetY)+"px";
}
});
document.addEventListener("mouseup", ()=>{ isDown=false; });
}
// 注册菜单命令
if(typeof GM_registerMenuCommand !== "undefined"){
GM_registerMenuCommand("开始计时", ()=>{
showTimeSetting();
});
}
})();