514 lines
18 KiB
HTML
514 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Analog Clock</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="clock-container">
|
||
<div class="clock">
|
||
<!-- Clock face numbers -->
|
||
<div class="number number-1"><span>1</span></div>
|
||
<div class="number number-2"><span>2</span></div>
|
||
<div class="number number-3"><span>3</span></div>
|
||
<div class="number number-4"><span>4</span></div>
|
||
<div class="number number-5"><span>5</span></div>
|
||
<div class="number number-6"><span>6</span></div>
|
||
<div class="number number-7"><span>7</span></div>
|
||
<div class="number number-8"><span>8</span></div>
|
||
<div class="number number-9"><span>9</span></div>
|
||
<div class="number number-10"><span>10</span></div>
|
||
<div class="number number-11"><span>11</span></div>
|
||
<div class="number number-12"><span>12</span></div>
|
||
|
||
<!-- Clock hands -->
|
||
<div class="hand hour-hand" id="hour-hand"></div>
|
||
<div class="hand minute-hand" id="minute-hand"></div>
|
||
<div class="hand second-hand" id="second-hand"></div>
|
||
|
||
<!-- Center pivot -->
|
||
<div class="center-pivot"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
|
||
<script>
|
||
/**
|
||
* Iframe 元素高亮注入脚本
|
||
* 需要在目标网站中引入此脚本来支持跨域 iframe 高亮功能
|
||
*
|
||
* 使用方法：
|
||
* 1. 将此脚本添加到目标网站的 HTML 中
|
||
* 2. 或通过浏览器扩展、用户脚本等方式注入
|
||
*/
|
||
|
||
(function () {
|
||
"use strict";
|
||
|
||
// 检查是否在 iframe 中
|
||
if (window.self === window.top) {
|
||
return; // 不在 iframe 中，不执行
|
||
}
|
||
|
||
// 检查是否已经初始化过
|
||
if (window.__iframeHighlightInitialized) {
|
||
return;
|
||
}
|
||
window.__iframeHighlightInitialized = true;
|
||
console.log("Iframe 高亮脚本已加载");
|
||
|
||
// 创建高亮覆盖层
|
||
var overlay = document.createElement("div");
|
||
overlay.id = "iframe-highlight-overlay";
|
||
overlay.style.cssText = "\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n pointer-events: none;\n z-index: 999999;\n overflow: hidden;\n ";
|
||
|
||
// 创建悬停高亮框（虚线边框）
|
||
var highlightBox = document.createElement("div");
|
||
highlightBox.id = "iframe-highlight-box";
|
||
highlightBox.style.cssText = "\n position: absolute;\n border: 2px dashed #007AFF;\n background: rgba(0, 122, 255, 0.08);\n pointer-events: none;\n display: none;\n transition: all 0.1s ease;\n box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);\n border-radius: 2px;\n ";
|
||
|
||
// 创建选中节点的常驻高亮框（实线边框）
|
||
var selectedBox = document.createElement("div");
|
||
selectedBox.id = "iframe-selected-box";
|
||
selectedBox.style.cssText = "\n position: absolute;\n border: 2px solid #007AFF;\n pointer-events: none;\n display: none;\n box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 107, 53, 0.4);\n border-radius: 2px;\n z-index: 1000000;\n ";
|
||
|
||
// 创建悬停标签显示
|
||
var tagLabel = document.createElement("div");
|
||
tagLabel.id = "iframe-tag-label";
|
||
tagLabel.style.cssText = "\n position: absolute;\n background: #007AFF;\n color: white;\n padding: 2px 6px;\n font-size: 11px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n border-radius: 2px;\n pointer-events: none;\n display: none;\n white-space: nowrap;\n z-index: 1000001;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n font-weight: 500;\n ";
|
||
|
||
// 创建选中节点标签
|
||
var selectedLabel = document.createElement("div");
|
||
selectedLabel.id = "iframe-selected-label";
|
||
selectedLabel.style.cssText = "\n position: absolute;\n background: #007AFF;\n color: white;\n padding: 3px 8px;\n font-size: 11px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n border-radius: 3px;\n pointer-events: none;\n display: none;\n white-space: nowrap;\n z-index: 1000002;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n font-weight: 600;\n ";
|
||
overlay.appendChild(highlightBox);
|
||
overlay.appendChild(selectedBox);
|
||
overlay.appendChild(tagLabel);
|
||
overlay.appendChild(selectedLabel);
|
||
document.body.appendChild(overlay);
|
||
|
||
// 存储当前选中的元素
|
||
var selectedElement = null;
|
||
var highlightEnabled = false;
|
||
|
||
// 更新选中元素的高亮显示
|
||
function updateSelectedHighlight(element) {
|
||
console.log("updateSelectedHighlight called with:", element);
|
||
if (!element) {
|
||
selectedBox.style.display = "none";
|
||
selectedLabel.style.display = "none";
|
||
selectedElement = null;
|
||
console.log("Cleared selected highlight");
|
||
return;
|
||
}
|
||
selectedElement = element;
|
||
var rect = element.getBoundingClientRect();
|
||
console.log("Selected element rect:", rect);
|
||
|
||
// 更新选中高亮框位置
|
||
selectedBox.style.display = "block";
|
||
selectedBox.style.left = "".concat(rect.left - 2, "px");
|
||
selectedBox.style.top = "".concat(rect.top - 2, "px");
|
||
selectedBox.style.width = "".concat(rect.width + 4, "px");
|
||
selectedBox.style.height = "".concat(rect.height + 4, "px");
|
||
|
||
// 更新选中标签位置和内容
|
||
selectedLabel.style.display = "block";
|
||
selectedLabel.textContent = "\u2713 <".concat(element.tagName.toLowerCase(), ">");
|
||
|
||
// 计算标签位置，确保不超出视窗
|
||
var labelTop = rect.top - 28;
|
||
var labelLeft = rect.left;
|
||
|
||
// 如果标签会超出顶部，显示在元素下方
|
||
if (labelTop < 5) {
|
||
labelTop = rect.bottom + 5;
|
||
}
|
||
|
||
// 如果标签会超出右侧，向左调整
|
||
var labelWidth = selectedLabel.offsetWidth || 100; // 预估宽度
|
||
if (labelLeft + labelWidth > window.innerWidth - 10) {
|
||
labelLeft = window.innerWidth - labelWidth - 10;
|
||
}
|
||
selectedLabel.style.left = "".concat(Math.max(5, labelLeft), "px");
|
||
selectedLabel.style.top = "".concat(labelTop, "px");
|
||
console.log("Selected highlight positioned at:", {
|
||
left: selectedBox.style.left,
|
||
top: selectedBox.style.top,
|
||
width: selectedBox.style.width,
|
||
height: selectedBox.style.height
|
||
});
|
||
}
|
||
function getElementSelector(element) {
|
||
if (!(element instanceof Element)) throw new Error('Argument must be a DOM element');
|
||
var segments = [];
|
||
var current = element;
|
||
while (current !== document.documentElement) {
|
||
var selector = '';
|
||
// 优先检查唯一ID
|
||
if (current.id && document.querySelectorAll("#".concat(current.id)).length === 1) {
|
||
segments.unshift("#".concat(current.id));
|
||
break; // ID唯一，无需继续向上
|
||
}
|
||
|
||
// 生成类名选择器（取第一个有效类名）
|
||
var classes = Array.from(current.classList).filter(function (c) {
|
||
return !c.startsWith('js-');
|
||
});
|
||
var className = classes.length > 0 ? ".".concat(classes[0]) : '';
|
||
|
||
// 生成位置索引（nth-child）
|
||
var tag = current.tagName.toLowerCase();
|
||
if (!className) {
|
||
var siblings = Array.from(current.parentNode.children);
|
||
var index = siblings.findIndex(function (el) {
|
||
return el === current;
|
||
}) + 1;
|
||
selector = "".concat(tag, ":nth-child(").concat(index, ")");
|
||
} else {
|
||
selector = className;
|
||
}
|
||
segments.unshift(selector);
|
||
current = current.parentElement;
|
||
}
|
||
|
||
// 处理根元素
|
||
if (current === document.documentElement) {
|
||
segments.unshift('html');
|
||
}
|
||
return segments.join(' > ');
|
||
}
|
||
|
||
// 获取元素文本内容
|
||
function getElementText(element) {
|
||
var _element$textContent;
|
||
if (element.tagName === "INPUT") {
|
||
return element.value || element.placeholder || "";
|
||
}
|
||
if (element.tagName === "TEXTAREA") {
|
||
return element.value || element.placeholder || "";
|
||
}
|
||
var text = ((_element$textContent = element.textContent) === null || _element$textContent === void 0 ? void 0 : _element$textContent.trim()) || "";
|
||
return text.length > 50 ? text.substring(0, 50) + "..." : text;
|
||
}
|
||
|
||
// 获取元素属性信息
|
||
function getElementAttributes(element) {
|
||
var attrs = {};
|
||
for (var i = 0; i < element.attributes.length; i++) {
|
||
var attr = element.attributes[i];
|
||
attrs[attr.name] = attr.value;
|
||
}
|
||
return attrs;
|
||
}
|
||
|
||
// 鼠标悬停事件处理
|
||
function handleMouseOver(e) {
|
||
if (!highlightEnabled) return;
|
||
var target = e.target;
|
||
if (!target || target === overlay || target === highlightBox || target === tagLabel || target === selectedBox || target === selectedLabel) {
|
||
return;
|
||
}
|
||
|
||
// 避免高亮 html 和 body 元素
|
||
if (target === document.documentElement || target === document.body) {
|
||
return;
|
||
}
|
||
|
||
// 如果是已选中的元素，不显示悬停高亮
|
||
if (target === selectedElement) {
|
||
highlightBox.style.display = "none";
|
||
tagLabel.style.display = "none";
|
||
return;
|
||
}
|
||
var rect = target.getBoundingClientRect();
|
||
var selector = getElementSelector(target);
|
||
var text = getElementText(target);
|
||
var attributes = getElementAttributes(target);
|
||
|
||
// 更新悬停高亮框位置
|
||
highlightBox.style.display = "block";
|
||
highlightBox.style.left = "".concat(rect.left - 2, "px");
|
||
highlightBox.style.top = "".concat(rect.top - 2, "px");
|
||
highlightBox.style.width = "".concat(rect.width + 4, "px");
|
||
highlightBox.style.height = "".concat(rect.height + 4, "px");
|
||
|
||
// 更新标签位置和内容
|
||
tagLabel.style.display = "block";
|
||
tagLabel.textContent = "<".concat(target.tagName.toLowerCase(), ">");
|
||
|
||
// 计算标签位置，确保不超出视窗
|
||
var labelTop = rect.top - 22;
|
||
var labelLeft = rect.left;
|
||
|
||
// 如果标签会超出顶部，显示在元素下方
|
||
if (labelTop < 0) {
|
||
labelTop = rect.bottom + 5;
|
||
}
|
||
|
||
// 如果标签会超出右侧，向左调整
|
||
if (labelLeft + tagLabel.offsetWidth > window.innerWidth) {
|
||
labelLeft = window.innerWidth - tagLabel.offsetWidth - 5;
|
||
}
|
||
tagLabel.style.left = "".concat(Math.max(0, labelLeft), "px");
|
||
tagLabel.style.top = "".concat(labelTop, "px");
|
||
|
||
// 发送消息到父窗口
|
||
var elementInfo = {
|
||
tagName: target.tagName.toLowerCase(),
|
||
rect: {
|
||
left: rect.left,
|
||
top: rect.top,
|
||
right: rect.right,
|
||
bottom: rect.bottom,
|
||
width: rect.width,
|
||
height: rect.height,
|
||
x: rect.x,
|
||
y: rect.y
|
||
},
|
||
selector: selector,
|
||
text: text,
|
||
attributes: attributes,
|
||
url: window.location.href,
|
||
path: window.location.pathname,
|
||
timestamp: Date.now()
|
||
};
|
||
try {
|
||
window.parent.postMessage({
|
||
type: "iframe-element-hover",
|
||
data: elementInfo,
|
||
source: "iframe-highlight-injector"
|
||
}, "*");
|
||
} catch (error) {
|
||
console.warn("无法发送消息到父窗口:", error);
|
||
}
|
||
}
|
||
|
||
// 鼠标离开事件处理
|
||
function handleMouseOut(e) {
|
||
if (!highlightEnabled) return;
|
||
var relatedTarget = e.relatedTarget;
|
||
|
||
// 如果鼠标移动到高亮相关元素上，不隐藏高亮
|
||
if (relatedTarget && (relatedTarget === highlightBox || relatedTarget === tagLabel || relatedTarget === overlay || relatedTarget === selectedBox || relatedTarget === selectedLabel)) {
|
||
return;
|
||
}
|
||
highlightBox.style.display = "none";
|
||
tagLabel.style.display = "none";
|
||
try {
|
||
window.parent.postMessage({
|
||
type: "iframe-element-hover",
|
||
data: null,
|
||
source: "iframe-highlight-injector"
|
||
}, "*");
|
||
} catch (error) {
|
||
console.warn("无法发送消息到父窗口:", error);
|
||
}
|
||
}
|
||
|
||
// 点击事件处理
|
||
function handleClick(e) {
|
||
var target = e.target;
|
||
if (!target || target === overlay || target === highlightBox || target === tagLabel || target === selectedBox || target === selectedLabel) {
|
||
return;
|
||
}
|
||
|
||
// 避免处理 html 和 body 元素
|
||
if (target === document.documentElement || target === document.body) {
|
||
return;
|
||
}
|
||
|
||
// 检查是否是交互元素，这些元素需要保留默认行为
|
||
var isInteractiveElement = ['input', 'textarea', 'select', 'button', 'a'].includes(target.tagName.toLowerCase());
|
||
|
||
// 如果高亮功能启用，对于非交互元素阻止默认行为和事件传播
|
||
if (highlightEnabled) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
var rect = target.getBoundingClientRect();
|
||
var selector = getElementSelector(target);
|
||
var text = getElementText(target);
|
||
var attributes = getElementAttributes(target);
|
||
console.log("Element clicked:", {
|
||
tagName: target.tagName,
|
||
selector: selector,
|
||
rect: rect
|
||
});
|
||
|
||
// 立即更新选中高亮
|
||
updateSelectedHighlight(target);
|
||
|
||
// 隐藏悬停高亮，因为现在是选中状态
|
||
highlightBox.style.display = "none";
|
||
tagLabel.style.display = "none";
|
||
var elementInfo = {
|
||
tagName: target.tagName.toLowerCase(),
|
||
rect: {
|
||
left: rect.left,
|
||
top: rect.top,
|
||
right: rect.right,
|
||
bottom: rect.bottom,
|
||
width: rect.width,
|
||
height: rect.height,
|
||
x: rect.x,
|
||
y: rect.y
|
||
},
|
||
selector: selector,
|
||
text: text,
|
||
attributes: attributes,
|
||
url: window.location.href,
|
||
path: window.location.pathname,
|
||
timestamp: Date.now()
|
||
};
|
||
try {
|
||
window.parent.postMessage({
|
||
type: "iframe-element-click",
|
||
data: elementInfo,
|
||
source: "iframe-highlight-injector"
|
||
}, "*");
|
||
} catch (error) {
|
||
console.warn("无法发送消息到父窗口:", error);
|
||
}
|
||
}
|
||
|
||
// 监听来自父窗口的消息
|
||
function handleParentMessage(event) {
|
||
console.log("Received message from parent:", event.data);
|
||
if (event.data.type === "iframe-highlight-toggle") {
|
||
var enabled = event.data.enabled;
|
||
console.log("Highlight toggle:", enabled);
|
||
if (enabled) {
|
||
enableHighlight();
|
||
} else {
|
||
disableHighlight();
|
||
}
|
||
} else if (event.data.type === "enable-iframe-highlight") {
|
||
console.log("Enable iframe highlight");
|
||
enableHighlight();
|
||
} else if (event.data.type === "disable-iframe-highlight") {
|
||
console.log("Disable iframe highlight");
|
||
disableHighlight();
|
||
} else if (event.data.type === "toggle-iframe-highlight") {
|
||
var _enabled = event.data.enabled !== undefined ? event.data.enabled : !highlightEnabled;
|
||
console.log("Toggle iframe highlight to:", _enabled);
|
||
if (_enabled) {
|
||
enableHighlight();
|
||
} else {
|
||
disableHighlight();
|
||
}
|
||
} else if (event.data.type === "update-selected-element") {
|
||
var selector = event.data.selector;
|
||
console.log("Update selected element with selector:", selector);
|
||
if (selector) {
|
||
try {
|
||
var element = document.querySelector(selector);
|
||
console.log("Found element by selector:", element);
|
||
updateSelectedHighlight(element);
|
||
} catch (error) {
|
||
console.warn("Failed to select element:", error);
|
||
updateSelectedHighlight(null);
|
||
}
|
||
} else {
|
||
updateSelectedHighlight(null);
|
||
}
|
||
} else if (event.data.type === "clear-selected-element") {
|
||
console.log("Clear selected element");
|
||
updateSelectedHighlight(null);
|
||
}
|
||
}
|
||
|
||
// 启用高亮功能
|
||
function enableHighlight() {
|
||
console.log("Enabling highlight");
|
||
document.addEventListener("mouseover", handleMouseOver, true);
|
||
document.addEventListener("mouseout", handleMouseOut, true);
|
||
document.addEventListener("click", handleClick, true);
|
||
highlightEnabled = true;
|
||
overlay.style.display = "block";
|
||
}
|
||
|
||
// 禁用高亮功能
|
||
function disableHighlight() {
|
||
console.log("Disabling highlight");
|
||
highlightEnabled = false;
|
||
// 保持事件监听器，但通过 highlightEnabled 变量控制行为
|
||
// 这样可以保留选中状态的显示
|
||
highlightBox.style.display = "none";
|
||
tagLabel.style.display = "none";
|
||
// 不隐藏 selectedBox 和 selectedLabel，保留选中状态
|
||
}
|
||
|
||
// 完全禁用高亮功能（移除所有监听器）
|
||
function fullyDisableHighlight() {
|
||
console.log("Fully disabling highlight");
|
||
highlightEnabled = false;
|
||
document.removeEventListener("mouseover", handleMouseOver, true);
|
||
document.removeEventListener("mouseout", handleMouseOut, true);
|
||
document.removeEventListener("click", handleClick, true);
|
||
overlay.style.display = "none";
|
||
highlightBox.style.display = "none";
|
||
tagLabel.style.display = "none";
|
||
selectedBox.style.display = "none";
|
||
selectedLabel.style.display = "none";
|
||
}
|
||
|
||
// 添加事件监听
|
||
enableHighlight();
|
||
window.addEventListener("message", handleParentMessage);
|
||
|
||
// 暴露全局函数供外部调用
|
||
window.__iframeHighlightControl = {
|
||
enable: enableHighlight,
|
||
disable: disableHighlight,
|
||
fullyDisable: fullyDisableHighlight,
|
||
isEnabled: function isEnabled() {
|
||
return highlightEnabled;
|
||
},
|
||
getSelectedElement: function getSelectedElement() {
|
||
return selectedElement;
|
||
},
|
||
updateSelected: updateSelectedHighlight,
|
||
// 通过消息发送开关控制
|
||
sendToggleMessage: function sendToggleMessage(enabled) {
|
||
window.parent.postMessage({
|
||
type: 'iframe-highlight-status',
|
||
enabled: enabled || highlightEnabled,
|
||
source: 'iframe-highlight-injector'
|
||
}, '*');
|
||
}
|
||
};
|
||
|
||
// 通知父窗口脚本已加载
|
||
try {
|
||
window.parent.postMessage({
|
||
type: "iframe-highlight-ready",
|
||
data: {
|
||
url: window.location.href,
|
||
userAgent: navigator.userAgent,
|
||
timestamp: Date.now()
|
||
},
|
||
source: "iframe-highlight-injector"
|
||
}, "*");
|
||
} catch (error) {
|
||
console.warn("无法发送就绪消息到父窗口:", error);
|
||
}
|
||
|
||
// 清理函数
|
||
window.__iframeHighlightCleanup = function () {
|
||
fullyDisableHighlight();
|
||
window.removeEventListener("message", handleParentMessage);
|
||
if (overlay.parentElement) {
|
||
overlay.parentElement.removeChild(overlay);
|
||
}
|
||
delete window.__iframeHighlightInitialized;
|
||
delete window.__iframeHighlightCleanup;
|
||
};
|
||
})();
|
||
|
||
</script>
|
||
</body>
|
||
</html> |