拖拽弹窗，滑块设置分钟+秒，右上角显示剩余时间
目前為
// ==UserScript==
// @name 定时关闭网页
// @namespace https://github.com/yingchen6
// @version 1.8.3
// @description 拖拽弹窗，滑块设置分钟+秒，右上角显示剩余时间
// @author yingchen6
// @match *://*/*
// @grant GM_registerMenuCommand
// @license MIT
// ==/UserScript==
(function(){
'use strict';
let timerId = null;
let remainingSeconds = 0;
let countdownDisplay = null;
function formatTime(seconds){
const m = Math.floor(seconds/60);
const s = seconds % 60;
return `${m}:${s.toString().padStart(2,'0')}`;
}
function startCountdown(minutes, seconds){
remainingSeconds = minutes*60 + seconds;
// 创建右上角倒计时显示
if(!countdownDisplay){
countdownDisplay = document.createElement("div");
countdownDisplay.id = "countdown-display";
countdownDisplay.style.position = "fixed";
countdownDisplay.style.top = "10px";
countdownDisplay.style.right = "10px";
countdownDisplay.style.background = "rgba(0,0,0,0.6)";
countdownDisplay.style.color = "#fff";
countdownDisplay.style.fontSize = "16px";
countdownDisplay.style.padding = "6px 10px";
countdownDisplay.style.borderRadius = "6px";
countdownDisplay.style.zIndex = "999999";
countdownDisplay.style.fontFamily = "sans-serif";
countdownDisplay.style.cursor = "pointer";
countdownDisplay.title = "点击重新设置时间";
document.body.appendChild(countdownDisplay);
countdownDisplay.addEventListener("click", showTimeSetting);
}
if(timerId) clearInterval(timerId);
countdownDisplay.textContent = "剩余: " + formatTime(remainingSeconds);
timerId = setInterval(()=>{
remainingSeconds--;
countdownDisplay.textContent = "剩余: " + formatTime(remainingSeconds);
if(remainingSeconds <= 0){
clearInterval(timerId);
window.location.href = "about:blank";
}
},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";
// 拖拽条
const dragBar = document.createElement("div");
dragBar.style.width = "100%";
dragBar.style.height = "25px";
dragBar.style.cursor = "move";
dragBar.style.marginBottom = "10px";
dragBar.style.background = "rgba(255,255,255,0.1)";
dragBar.style.borderRadius = "6px";
wrapper.appendChild(dragBar);
// 内容 HTML
const contentHTML = `
<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>
`;
wrapper.innerHTML += contentHTML;
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; });
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;
dragBar.addEventListener("mousedown", e=>{
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);
}
})();