Greasy Fork is available in English.
在页面左下角添加计时器
当前为
// ==UserScript==
// @name 简易赛事计时器
// @namespace http://xiezheyuan.github.io/
// @version 0.2
// @description 在页面左下角添加计时器
// @author xiezheyuan
// @license MIT
// @match *://*/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=luogu.com.cn
// @grant none
// ==/UserScript==
(function () {
'use strict';
const countdown_config = [
{
id: "countdown-to-noip",
date: "2024-11-30T08:00:00Z",
text: "NOIP 2024",
},
{
id: "countdown-to-hnoi",
date: "2025-03-01T08:00:00Z",
text: "HNOI 2025",
}
];
const time2str = (countDownDate, now) => {
let distance = countDownDate - now;
if (distance < 0) {
return "已经开始";
}
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
return days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒 ";
}
const init = () => {
let sticky = document.createElement("div");
sticky.id = "sticky-countdown";
sticky.style.position = "fixed";
sticky.style.bottom = "0px";
sticky.style.left = "10px";
sticky.style.backgroundColor = "rgba(240, 240, 240, 0.6)";
sticky.style.padding = "10px";
sticky.style.borderRadius = "3px";
sticky.style.zIndex = "999";
sticky.style.display = "flex";
sticky.style.flexDirection = "column";
sticky.style.gap = "5px";
sticky.style.fontFamily = "Arial, sans-serif";
sticky.style.color = "#333";
sticky.style.transition = "max-height 0.3s ease";
sticky.style.minHeight = "14px";
sticky.style.maxHeight = "0";
for (let i = 0; i < countdown_config.length; i++) {
sticky.innerHTML += `
<div style="display: flex; align-items: center; gap: 5px;">
距离 <b>${countdown_config[i].text}</b> 还剩下
<b id="${countdown_config[i].id}">Loading</b>
</div>
`;
}
sticky.innerHTML += `<div>
<p>简易赛事计时器 © xiezheyuan 保留所有权利</p>
</div>`
document.body.appendChild(sticky);
let isMouseOver = false;
let timeoutId;
sticky.addEventListener('mouseenter', () => {
clearTimeout(timeoutId);
isMouseOver = true;
timeoutId = setTimeout(() => {
if (isMouseOver) {
sticky.style.maxHeight = `${sticky.scrollHeight}px`;
}
}, 100);
});
sticky.addEventListener('mouseleave', () => {
isMouseOver = false;
timeoutId = setTimeout(() => {
if (!isMouseOver) {
sticky.style.maxHeight = "0";
}
}, 500);
});
const interval = () => {
const now = new Date().getTime();
for (let i = 0; i < countdown_config.length; i++) {
let countDownDate = new Date(countdown_config[i].date).getTime();
document.getElementById(countdown_config[i].id).textContent = time2str(countDownDate, now);
}
};
interval();
setInterval(interval, 1000);
};
init();
})();