Provide a seemingly useless clock in the corner of the screen.
目前為
// ==UserScript==
// @name Digital Clock Widget by Chua Nghi Ten
// @namespace http://tampermonkey.net/
// @version 2024-05-12_20.05
// @license GNU GPLv3
// @description Provide a seemingly useless clock in the corner of the screen.
// @author Chua Nghi Ten
// @match *://*/*
// @icon https://github.com/chuanghiten/chuanghiten.github.io/raw/main/favicon.ico
// @grant none
// ==/UserScript==
(() => {
"use strict";
window.addEventListener("load", () => {
let cfr = 0,
time = 0,
seconds = 0,
minutes = 0,
hours = 0,
oldSeconds,
oldMinutes,
oldHours,
menuActive = false,
widgetMove = false,
secondsHided = false,
smoothSeconds = true,
hour12 = true,
showAMPM = true;
const bodyElement = window.document.querySelector("html body"),
cntTimeWidget = window.document.createElement("div"),
cntStyle = window.document.createElement("style"),
windowSize = {
width: window.innerWidth,
height: window.innerHeight,
},
cntTimeOnWindowSize = {
width: 1,
height: 1,
},
updateSeconds = Object.freeze({
size: (clockWidth, clockHeight) => {
let w1 = clockWidth - 1,
h10d5 = clockHeight - 9,
h0d4 = clockHeight - 4.6,
w0d4 = clockWidth - 4.6,
h1 = clockHeight - 1,
w10d5 = clockWidth - 9;
window.document
.querySelectorAll(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntSecondsProgress svg path"
).forEach((c) => {
c.setAttribute(
"d",
`M 1 9 C 1 4.6 4.6 1 9 1 H ${w10d5} C ${
clockWidth - 4.6
} 1 ${w1} 4.6 ${w1} 9 V ${h10d5} C ${w1} ${h0d4} ${w0d4} ${h1} ${w10d5} ${h1} H 9 C 4.6 ${h1} 1 ${h0d4} 1 ${h10d5} Z`
);})
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntSecondsProgress svg"
)
.setAttribute("width", clockWidth);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntSecondsProgress svg"
)
.setAttribute("height", clockHeight);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntSecondsProgress svg"
)
.setAttribute("viewbox", `0 0 ${clockWidth} ${clockHeight}`);
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntSecondsProgress svg path + path"
).style.strokeDasharray = `${window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntSecondsProgress svg path + path"
)
.getTotalLength()}px`;
},
seconds: (s) => {
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntSecondsProgress svg path + path"
).style.strokeDashoffset = `${
(1 - s) *
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntSecondsProgress svg path + path"
)
.getTotalLength()
}px`;
},
}),
getViTriWidget = (wWidth, wHeight) => {
if (
(cntTimeWidget.getBoundingClientRect().left +
cntTimeWidget.getBoundingClientRect().width / 2) /
wWidth <
0.5
) {
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.removeAttribute("cntright");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.setAttribute("cntleft", "");
} else {
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.removeAttribute("cntleft");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.setAttribute("cntright", "");
}
if (
(cntTimeWidget.getBoundingClientRect().top +
cntTimeWidget.getBoundingClientRect().height / 2) /
wHeight <
0.5
) {
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.removeAttribute("cntbottom");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.setAttribute("cnttop", "");
} else {
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.removeAttribute("cnttop");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.setAttribute("cntbottom", "");
}
},
fr = 10,
updateTimeWithFPS = () => {
time = new Date();
if (cfr > fr) {
cfr = 0;
seconds = time.getSeconds();
if (seconds != oldSeconds) {
oldSeconds = seconds;
minutes = time.getMinutes();
if (minutes != oldMinutes) {
oldMinutes = minutes;
hours = time.getHours();
if (hours != oldHours) {
oldHours = hours;
if (hour12) {
if (hours <= 12)
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntHours"
).innerHTML = hours;
else
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntHours"
).innerHTML = hours - 12;
} else
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntHours"
).innerHTML = hours;
}
if (minutes < 10)
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntMinutes"
).innerHTML = `0${minutes}`;
else
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntMinutes"
).innerHTML = minutes;
if (showAMPM && hour12) {
if (hours * 60 + minutes < 720)
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntAmPm"
).innerHTML = " AM";
else
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntAmPm"
).innerHTML = " PM";
}
}
if (!secondsHided) {
if (seconds < 10)
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntSeconds"
).innerHTML = `:0${seconds}`;
else
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntSeconds"
).innerHTML = `:${seconds}`;
}
if (!smoothSeconds) updateSeconds.seconds(time.getSeconds() / 60);
updateSeconds.size(
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.getBoundingClientRect().width,
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.getBoundingClientRect().height
);
}
} else ++cfr;
if (smoothSeconds)
updateSeconds.seconds(
(time.getSeconds() + time.getMilliseconds() / 999) / 60
);
window.requestAnimationFrame(updateTimeWithFPS);
},
cookie = Object.freeze({
write: (key, value) => {
window.document.cookie = `${key}=${value};path=/`;
},
read: (key) => {
let ckString = window.document.cookie,
i = 0,
ar;
ar = ckString.split(";");
while (i < ar.length && ar[i].search(key) == -1) {
++i;
}
if (i < ar.length) return ar[i].slice(ar[i].indexOf("=") + 1);
return "";
},
remove: (key) => {
window.document.cookie = `${key}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
},
}),
setViTriWidget = (w, h) => {
if (h < 0.5) {
cntTimeWidget.style.bottom = "auto";
if (
h <
cntTimeWidget.getBoundingClientRect().height / windowSize.height
)
cntTimeWidget.style.top = "0";
else
cntTimeWidget.style.top = `${
windowSize.height * h -
cntTimeWidget.getBoundingClientRect().height / 2
}px`;
} else {
cntTimeWidget.style.top = "auto";
if (
h >
1 - cntTimeWidget.getBoundingClientRect().height / windowSize.height
)
cntTimeWidget.style.bottom = "0";
else
cntTimeWidget.style.bottom = `${
windowSize.height * (1 - h) -
cntTimeWidget.getBoundingClientRect().height / 2
}px`;
}
if (w < 0.5) {
cntTimeWidget.style.right = "auto";
if (
w <
cntTimeWidget.getBoundingClientRect().width / windowSize.width
)
cntTimeWidget.style.left = "0";
else
cntTimeWidget.style.left = `${
windowSize.width * w -
cntTimeWidget.getBoundingClientRect().width / 2
}px`;
} else {
cntTimeWidget.style.left = "auto";
if (
w >
1 - cntTimeWidget.getBoundingClientRect().width / windowSize.width
)
cntTimeWidget.style.right = "0";
else
cntTimeWidget.style.right = `${
windowSize.width * (1 - w) -
cntTimeWidget.getBoundingClientRect().width / 2
}px`;
}
},
mouseMoveOnDocumentEvent = (e) => {
if (widgetMove) {
cntTimeOnWindowSize.width = e.clientX / windowSize.width;
cntTimeOnWindowSize.height = e.clientY / windowSize.height;
setViTriWidget(cntTimeOnWindowSize.width, cntTimeOnWindowSize.height);
}
},
blockHoverDoubleClick = (e) => {
if (widgetMove) {
e.preventDefault();
widgetMove = false;
getViTriWidget(windowSize.width, windowSize.height);
cookie.write("cntWidgetWidth", cntTimeOnWindowSize.width);
cookie.write("cntWidgetHeight", cntTimeOnWindowSize.height);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntBlockHover"
)
.removeAttribute("active");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntMoveButton"
)
.removeEventListener("click", cntMoveButtonClicked);
window.document.removeEventListener(
"mousemove",
mouseMoveOnDocumentEvent
);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu"
)
.removeAttribute("active");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntMoveButton"
)
.removeEventListener("click", cntMoveButtonClicked);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown span"
)
.removeEventListener("click", cntSecondDropdownClicked);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntShowSecondsSwitch"
)
.removeEventListener("click", cntShowSecondsClicked);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntSmoothSecondsSwitch"
)
.removeEventListener("click", cntSmoothSecondsClicked);
if (
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul"
).attributes.length == 1
)
cntSecondDropdownClicked();
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.hour12Switch"
)
.removeEventListener("click", hour12SwitchClicked);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.cntShowAMPMSwitch.cntSwitch"
)
.removeEventListener("click", showAMPMClicked);
}
},
cntMoveButtonClicked = () => {
widgetMove = true;
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu"
)
.removeAttribute("active");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntBlockHover"
)
.setAttribute("active", "");
menuActive = false;
window.document.addEventListener("mousemove", mouseMoveOnDocumentEvent);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntBlockHover"
)
.addEventListener("dblclick", blockHoverDoubleClick, { once: true });
},
cntShowSecondsClicked = () => {
if (!secondsHided) {
cookie.write("cntHideSeconds", "1");
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntSeconds"
).style.display = "none";
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntShowSecondsSwitch"
)
.removeAttribute("active");
} else {
cookie.write("cntHideSeconds", "0");
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntSeconds"
).style.display = "inline";
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntShowSecondsSwitch"
)
.setAttribute("active", "");
}
updateSeconds.size(
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.getBoundingClientRect().width,
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.getBoundingClientRect().height
);
secondsHided = !secondsHided;
},
cntSmoothSecondsClicked = () => {
if (smoothSeconds) {
smoothSeconds = false;
cookie.write("cntSmoothSeconds", "0");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntSmoothSecondsSwitch"
)
.removeAttribute("active");
} else {
smoothSeconds = true;
cookie.write("cntSmoothSeconds", "1");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntSmoothSecondsSwitch"
)
.setAttribute("active", "");
}
},
cntSecondDropdownClicked = () => {
if (
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul"
).attributes.length == 1
) {
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul"
)
.removeAttribute("active");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntShowSecondsSwitch"
)
.removeEventListener("click", cntShowSecondsClicked);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntSmoothSecondsSwitch"
)
.removeEventListener("click", cntSmoothSecondsClicked);
} else {
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul"
)
.setAttribute("active", "");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntShowSecondsSwitch"
)
.addEventListener("click", cntShowSecondsClicked);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntSmoothSecondsSwitch"
)
.addEventListener("click", cntSmoothSecondsClicked);
}
},
showAMPMClicked = () => {
if (showAMPM) {
showAMPM = false;
cookie.write("cntShowAMPM", "0");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.cntShowAMPMSwitch.cntSwitch"
)
.removeAttribute("active");
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntAmPm"
).style.display = "none";
} else {
showAMPM = true;
cookie.write("cntShowAMPM", "1");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.cntShowAMPMSwitch.cntSwitch"
)
.setAttribute("active", "");
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntAmPm"
).style.display = "inline";
if (hours * 60 + minutes < 720)
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntAmPm"
).innerHTML = " AM";
else
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntAmPm"
).innerHTML = " PM";
}
updateSeconds.size(
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.getBoundingClientRect().width,
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.getBoundingClientRect().height
);
},
hour12SwitchClicked = () => {
if (hour12) {
hour12 = false;
cookie.write("cnt12Hour", "0");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.hour12Switch"
)
.removeAttribute("active");
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntHours"
).innerHTML = hours;
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntShowAMPM ul"
)
.removeAttribute("active");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.cntShowAMPMSwitch.cntSwitch"
)
.removeEventListener("click", showAMPMClicked);
if (!showAMPM) showAMPM = !showAMPM;
showAMPMClicked();
} else {
hour12 = true;
cookie.write("cnt12Hour", "1");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.hour12Switch"
)
.setAttribute("active", "");
if (hours <= 12)
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntHours"
).innerHTML = hours;
else
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntHours"
).innerHTML = hours - 12;
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntShowAMPM ul"
)
.setAttribute("active", "");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.cntShowAMPMSwitch.cntSwitch"
)
.addEventListener("click", showAMPMClicked);
if (showAMPM) {
showAMPM = !showAMPM;
showAMPMClicked();
}
}
updateSeconds.size(
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.getBoundingClientRect().width,
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.getBoundingClientRect().height
);
},
cntButtonMenuClicked = () => {
if (!menuActive) {
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu"
)
.setAttribute("active", "");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntMoveButton"
)
.addEventListener("click", cntMoveButtonClicked);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown span"
)
.addEventListener("click", cntSecondDropdownClicked);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.hour12Switch"
)
.addEventListener("click", hour12SwitchClicked);
if (hour12)
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.cntShowAMPMSwitch.cntSwitch"
)
.addEventListener("click", showAMPMClicked);
} else {
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu"
)
.removeAttribute("active");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntMoveButton"
)
.removeEventListener("click", cntMoveButtonClicked);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown span"
)
.removeEventListener("click", cntSecondDropdownClicked);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntShowSecondsSwitch"
)
.removeEventListener("click", cntShowSecondsClicked);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntSmoothSecondsSwitch"
)
.removeEventListener("click", cntSmoothSecondsClicked);
if (
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul"
).attributes.length == 1
)
cntSecondDropdownClicked();
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.hour12Switch"
)
.removeEventListener("click", hour12SwitchClicked);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.cntShowAMPMSwitch.cntSwitch"
)
.removeEventListener("click", showAMPMClicked);
}
menuActive = !menuActive;
},
mouseEnterCntClock = () => {
updateSeconds.size(
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.getBoundingClientRect().width,
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.getBoundingClientRect().height
);
updateSeconds.seconds(
(time.getSeconds() + time.getMilliseconds() / 999) / 60
);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.addEventListener("mouseleave", mouseLeaveCntClock, { once: true });
window.document
.querySelectorAll(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntButtonMenu"
)
.forEach((c) => {
c.addEventListener("click", cntButtonMenuClicked);
});
},
mouseLeaveCntClock = () => {
updateSeconds.size(
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.getBoundingClientRect().width,
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.getBoundingClientRect().height
);
updateSeconds.seconds(
(time.getSeconds() + time.getMilliseconds() / 999) / 60
);
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.addEventListener("mouseenter", mouseEnterCntClock, { once: true });
window.document
.querySelectorAll(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntButtonMenu"
)
.forEach((c) => {
c.removeEventListener("click", cntButtonMenuClicked);
});
};
cntTimeWidget.setAttribute("class", "Chua Nghi Ten Digital Clock Widget");
cntStyle.innerHTML =
'html body .Chua.Nghi.Ten.Digital.Clock.Widget, html body .Chua.Nghi.Ten.Digital.Clock.Widget * {margin: 0; padding: 0; border: 0; box-sizing: border-box; position: relative; display: block; font-family: Roboto, Arial, sans-serif; font-size: 16px; line-height: 19px; user-select: none} html body .Chua.Nghi.Ten.Digital.Clock.Widget span {display: inline} html body .Chua.Nghi.Ten.Digital.Clock.Widget {position: fixed; padding: 10px; z-index: 2147483647} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock {background: #0009; color: #fff; border-radius: 10px; padding: 6px 10px; box-shadow: 0 0 15px 0 #00000044; min-width: 20px; min-height: 20px; backdrop-filter: blur(5px)} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntButtonMenu {display: none} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntButtonMenu span {cursor: pointer} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock[cntright]:hover .cntleftButtonMenu {display: inline} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock[cntleft]:hover .cntrightButtonMenu {display: inline} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntSecondsProgress {position: absolute; top: 0; left: 0; width: 100%; height: 100%} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntSecondsProgress svg {width: 100%; height: 100%} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntSecondsProgress svg path {fill: #0000; stroke-width: 2px; stroke: #fff} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntSecondsProgress svg path:first-child {stroke: #fff3} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu {position: absolute; background: #0009; border-radius: 10px; box-shadow: 0 0 15px 0 #00000044; backdrop-filter: blur(5px); border: 2px solid #fff; padding: 6px 10px; color: #fff; display: none} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu[active] {display: block} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock[cntleft][cnttop] + .cntMenu[active] {top: 100%; left: 10px} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock[cntright][cnttop] + .cntMenu[active] {top: 100%; right: 10px} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock[cntleft][cntbottom] + .cntMenu[active] {bottom: 100%; left: 10px} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock[cntright][cntbottom] + .cntMenu[active] {bottom: 100%; right: 10px} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li {cursor: pointer; border-bottom: 1px solid #fff; white-space: nowrap; padding-bottom: 5px; margin-bottom: 5px} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li:hover {background: #fff2} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li:last-child {border: 0; padding: 0; margin: 0} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntBlockHover {width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntBlockHover[active] {display: block; cursor: all-scroll} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText {white-space: nowrap} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li ul {margin: 5px 0 5px 20px; display: none} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li ul[active] {display: block} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li > span {display: flex; justify-content: space-between} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li > span span + span {margin-left: 50px} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntSwitch, html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.cntSwitch {width: 35px; height: 20px; border: 2px solid #fff; border-radius: 10px; display: flex; justify-content: flex-start} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntSwitch[active], html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.cntSwitch[active] {justify-content: flex-end} html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntSwitch:before, html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.cntSwitch:before {content: ""; display: block; position: relative; width: 12px; height: 12px; border-radius: 50%; background: #fff; margin: 2px}';
cntTimeWidget.innerHTML =
'<div class="cntClock" cntleft cntright><div class="cntSecondsProgress"><svg><path stroke-linecap="round" stroke-linejoin="round"></path><path stroke-linecap="round" stroke-linejoin="round"></path></svg></div><span class="cntleftButtonMenu cntButtonMenu"><span>•••</span> | </span><span class="cntClockText"><span class="cntHours">88</span>:<span class="cntMinutes">88</span><span class="cntSeconds">:88</span><span class="cntAmPm"></span></span><span class="cntrightButtonMenu cntButtonMenu"> | <span>•••</span></span></div><div class="cntMenu"><ul><li class="cntMoveButton">Move</li><li class="cntSecondsDropdown"><span><span>Seconds</span><span>•••</span></span><ul><li><span><span>Show Seconds</span><span class="cntShowSecondsSwitch cntSwitch"></span></span></li><li><span><span>Smooth Seconds Progress Bar</span><span class="cntSmoothSecondsSwitch cntSwitch"></span></span></li></ul></li><li class="cntShowAMPM"><span><span>12 - Hour time</span><span class="hour12Switch cntSwitch"></span></span><ul><li><span><span>Show AM / PM</span><span class="cntShowAMPMSwitch cntSwitch"></span></span></li></ul></li></ul></div><div class="cntBlockHover"></div>';
bodyElement.appendChild(cntTimeWidget);
window.document.querySelector("html").appendChild(cntStyle);
updateSeconds.size(
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.getBoundingClientRect().width,
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock"
)
.getBoundingClientRect().height
);
window.document
.querySelector("html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock")
.addEventListener("mouseenter", mouseEnterCntClock, { once: true });
window.document
.querySelector("html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock")
.addEventListener("mouseleave", mouseLeaveCntClock, { once: true });
if (cookie.read("cntHideSeconds") != "")
secondsHided = Number(cookie.read("cntHideSeconds"));
if (cookie.read("cntSmoothSeconds") != "")
smoothSeconds = Number(cookie.read("cntSmoothSeconds"));
if (smoothSeconds)
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntSmoothSecondsSwitch"
)
.setAttribute("active", "");
if (cookie.read("cnt12Hour") != "")
hour12 = Number(cookie.read("cnt12Hour"));
if (hour12) {
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.hour12Switch"
)
.setAttribute("active", "");
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntShowAMPM ul"
)
.setAttribute("active", "");
}
if (secondsHided) {
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntSeconds"
).style.display = "none";
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntShowSecondsSwitch"
)
.removeAttribute("active");
} else
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li.cntSecondsDropdown ul li span span.cntShowSecondsSwitch"
)
.setAttribute("active", "");
if (cookie.read("cntShowAMPM") != "")
showAMPM = Number(cookie.read("cntShowAMPM"));
window.requestAnimationFrame(updateTimeWithFPS);
if (showAMPM) {
if (hours * 60 + minutes < 720)
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntAmPm"
).innerHTML = " AM";
else
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntAmPm"
).innerHTML = " PM";
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.cntShowAMPMSwitch.cntSwitch"
)
.setAttribute("active", "");
} else {
window.document.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntClock .cntClockText .cntAmPm"
).style.display = "none";
window.document
.querySelector(
"html body .Chua.Nghi.Ten.Digital.Clock.Widget .cntMenu ul li span span.cntShowAMPMSwitch.cntSwitch"
)
.removeAttribute("active");
}
if (cookie.read("cntWidgetWidth") != "")
cntTimeOnWindowSize.width = Number(cookie.read("cntWidgetWidth"));
if (cookie.read("cntWidgetHeight") != "")
cntTimeOnWindowSize.height = Number(cookie.read("cntWidgetHeight"));
setViTriWidget(cntTimeOnWindowSize.width, cntTimeOnWindowSize.height);
getViTriWidget(windowSize.width, windowSize.height);
});
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址