重要事件倒计时
// ==UserScript==
// @name 重要事件倒计时
// @namespace https://example.com/
// @version 0.0.2
// @license GNU-GPLv3
// @description 提醒你距离目标时间节点的精确剩余时间
// @author Lemostic
// @match http*://*/*
// @grant GM_addStyle
// ==/UserScript==
// 默认样式变量
const defaultColor = "rgba(40, 82, 181, 0.8)";
const defaultFontSize = "1vw";
const defaultMarginTop = 70
const defaultMarginRight = 10
// 定义倒计时的事件名称
let eventName = "春节放假"
// 年
let targetTimeYear = 2024
// 月
let targetTimeMonth = 2
// 日
let targetTimeDay = 6
// 时
let targetTimeHour = 18
// 分
let targetTimeMinute = 0
// 秒
let targetTimeSecond = 0
// 用户自定义样式变量（如果为空，则采用默认值）
let userDefinedColor = null; // 用户自定义的组件背景色 | 文本 | 颜色
let userDefinedFontSize = null; // 用户自定义的字体大小 | 数值 | 单位vm（viewpoint width）
let userDefinedMarginTop = null; // 用户自定义的组件上边距 | 数值 | 单位px
let userDefinedMarginRight = null; // 用户自定义的组件右边距 | 数值 | 单位px
// 如果用户设置的值不存在或为空，则采用默认值
userDefinedColor = userDefinedColor || defaultColor;
userDefinedFontSize = userDefinedFontSize || defaultFontSize;
userDefinedMarginTop = userDefinedMarginTop || defaultMarginTop;
userDefinedMarginRight = userDefinedMarginRight || defaultMarginRight;
// 定义你的CSS样式，针对id为'important-countdown'的div
var customCSS = `
#important-countdown { /* 使用ID选择器 */
position: fixed;
top: ${userDefinedMarginTop}px;
right: 0;
margin-right: ${userDefinedMarginRight}px;
display: flex;
justify-content: center;
align-items: center;
color: ${userDefinedColor};
font-size: ${userDefinedFontSize};
border-radius: 5px 0 5px 5px; /* 设置圆角为10像素 */
background-color: rgba(0, 0, 0, 0.1); /* 这里是一个黑色半透明的例子，你可以替换颜色和透明度 */
padding: 5px; /* 设置四边内边距为5px */
pointer-events: none;
z-index: 9999
}
#important-countdown::before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 0;
border-bottom: ${userDefinedMarginRight}px solid transparent;
border-left: ${userDefinedMarginRight}px solid rgba(0, 0, 0, 0.1);
}
`;
// 注入样式到页面
GM_addStyle(customCSS);
// 创建DOM字符串并插入变量
let clockDom = `<div id="important-countdown"></div>`.trim();
document.querySelector('body').appendChild(creatDom(clockDom))
function creatDom(str) {
let wrapper = document.createElement('div')
wrapper.innerHTML = str
return wrapper.childNodes[0]
}
// 创建需要倒计时的目标时间，需要注意，月份的索引是从0开始的，索引范围是0 ~ 11
let nextTime = new Date(targetTimeYear, targetTimeMonth - 1, targetTimeDay, targetTimeHour, targetTimeMinute, targetTimeSecond)
setInterval(() => {
let now = Date.now();
if (now > nextTime.getTime()) {
document.querySelector('#important-countdown').innerHTML = "倒计时已过，请重新设置!";
return;
}
let diff = Math.floor((nextTime - now) / 1000); // 确保始终是整数
// 计算剩余天数、小时数、分钟数和秒数
let days = Math.floor(diff / (3600 * 24));
let hours = String(Math.floor((diff % (3600 * 24)) / 3600)).padStart(2, '0');
let minutes = String(Math.floor((diff % 3600) / 60)).padStart(2, '0');
let seconds = String(diff % 60).padStart(2, '0');
//document.querySelector('#important-countdown').innerHTML = `距离 ${eventName} 还有${days}天${hours}时${minutes}分${seconds}秒`;
document.querySelector('#important-countdown').innerHTML = `
<div>
距离 <span style="font-weight: bold; color: #2ea7a6;"><strong>${eventName}</strong></span> 还有<span style="font-weight: bold;">${days}天${hours}小时${minutes}分${seconds}秒</span>
</div>
`;
}, 1000);