Clock \u7b97\u6cd5\u6f14\u793a (\u4fee\u590d\u7248)<\/title>\n <style>\n :root {\n --bg-color: #1a1a2e;\n --panel-bg: #16213e;\n --accent: #e94560;\n --text-main: #ecf0f1;\n --ref-1: #2ecc71;\n --ref-0: #95a5a6;\n --pointer: #f1c40f;\n --slot-size: 60px;\n --clock-radius: 180px; \/* \u5706\u76d8\u534a\u5f84 *\/\n }\n\n * { box-sizing: border-box; }\n\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: var(--bg-color);\n color: var(--text-main);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding: 20px;\n }\n\n h1 { margin-bottom: 30px; letter-spacing: 2px; }\n\n \/* \u4e3b\u5bb9\u5668\uff1a\u6539\u4e3a\u5c45\u4e2d\uff0c\u5141\u8bb8\u6362\u884c *\/\n .main-container {\n display: flex;\n flex-wrap: wrap; \/* \u5173\u952e\uff1a\u5141\u8bb8\u7a84\u5c4f\u6362\u884c *\/\n justify-content: center;\n align-items: center; \/* \u5782\u76f4\u5c45\u4e2d *\/\n gap: 60px;\n width: 100%;\n max-width: 1200px;\n }\n\n \/* \u5de6\u4fa7\uff1a\u5706\u76d8\u821e\u53f0 *\/\n .clock-wrapper {\n \/* \u5f3a\u5236\u4e0d\u7f29\u5c0f\uff0c\u9632\u6b62\u9519\u4f4d *\/\n flex-shrink: 0; \n width: 400px;\n height: 400px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n }\n\n .clock-circle {\n width: 380px;\n height: 380px;\n background: var(--panel-bg);\n border-radius: 50%;\n border: 6px solid #303a52;\n position: relative;\n box-shadow: 0 10px 40px rgba(0,0,0,0.5);\n }\n\n \/* \u4e2d\u5fc3\u70b9 *\/\n .center-dot {\n width: 24px; height: 24px;\n background: var(--pointer);\n border-radius: 50%;\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n z-index: 20;\n box-shadow: 0 0 15px var(--pointer);\n }\n\n \/* \u6307\u9488\uff1a\u4f7f\u7528\u7edd\u5bf9\u5b9a\u4f4d\u5b9a\u6b7b\u5728\u4e2d\u95f4 *\/\n .hand-container {\n position: absolute;\n top: 50%; left: 50%;\n width: 0; height: 0;\n z-index: 10;\n transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n .hand {\n width: 6px;\n height: 140px; \/* \u6307\u9488\u957f\u5ea6 *\/\n background: var(--pointer);\n position: absolute;\n \/* \u8ba9\u6307\u9488\u4ece\u4e2d\u5fc3\u5411\u4e0a\u5ef6\u4f38 *\/\n bottom: 0; \n left: -3px; \/* \u5c45\u4e2d\u4fee\u6b63 (\u5bbd\u5ea6\u7684\u4e00\u534a) *\/\n border-radius: 4px;\n }\n .hand::after {\n content: '';\n position: absolute;\n top: -15px; left: -7px; \/* \u7bad\u5934\u4f4d\u7f6e\u4fee\u6b63 *\/\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-bottom: 20px solid var(--pointer);\n }\n\n \/* \u69fd\u4f4d *\/\n .slot {\n width: var(--slot-size);\n height: var(--slot-size);\n background: #253550;\n border-radius: 12px;\n position: absolute;\n top: 50%; left: 50%; \n \/* \u521d\u59cb\u5c45\u4e2d\uff0c\u540e\u9762\u901a\u8fc7 JS \u8ba1\u7b97 translate \u504f\u79fb *\/\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 1.2rem;\n z-index: 15;\n box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n border: 2px solid transparent;\n transition: all 0.3s;\n }\n\n .slot .badge {\n font-size: 0.6rem;\n background: #555;\n padding: 2px 6px;\n border-radius: 10px;\n margin-top: 2px;\n transition: 0.3s;\n }\n\n .slot.active-hit { background: #f1c40f; color: #000; transform: scale(1.2) !important; }\n .slot.target { border-color: var(--accent); box-shadow: 0 0 15px var(--accent); }\n .slot.dimmed { opacity: 0.4; }\n\n \/* \u53f3\u4fa7\uff1a\u63a7\u5236\u9762\u677f *\/\n .control-panel {\n flex: 1; \/* \u5360\u636e\u5269\u4f59\u7a7a\u95f4 *\/\n min-width: 320px; \/* \u6700\u5c0f\u5bbd\u5ea6\uff0c\u9632\u6b62\u592a\u7a84 *\/\n max-width: 500px;\n background: rgba(255, 255, 255, 0.05);\n padding: 25px;\n border-radius: 16px;\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255,255,255,0.1);\n }\n\n .btn-group { display: flex; gap: 10px; margin-bottom: 20px; }\n \n button {\n flex: 1;\n padding: 12px;\n border: none;\n border-radius: 8px;\n font-weight: bold;\n cursor: pointer;\n transition: 0.2s;\n color: white;\n }\n .btn-next { background: var(--accent); }\n .btn-auto { background: var(--ref-1); }\n .btn-reset { background: #555; }\n button:disabled { opacity: 0.5; cursor: not-allowed; }\n button:active { transform: scale(0.98); }\n\n \/* \u65e5\u5fd7\u533a *\/\n .log-container {\n height: 250px;\n overflow-y: auto;\n background: rgba(0,0,0,0.4);\n border-radius: 8px;\n padding: 10px;\n font-family: monospace;\n font-size: 0.9rem;\n border-left: 4px solid var(--accent);\n }\n .log-line { margin-bottom: 8px; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 4px; }\n .log-hl { color: var(--pointer); font-weight: bold; }\n\n \/* \u5e8f\u5217\u6761 *\/\n .seq-bar {\n display: flex; gap: 8px; overflow-x: auto; padding-bottom: 15px; margin-bottom: 15px;\n border-bottom: 1px solid rgba(255,255,255,0.1);\n }\n .seq-item {\n min-width: 32px; height: 32px;\n background: rgba(255,255,255,0.1);\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 0.8rem; opacity: 0.5;\n }\n .seq-item.current { background: var(--accent); opacity: 1; transform: scale(1.1); font-weight: bold; }\n\n <\/style>\n<\/head>\n<body>\n\n <h1>Clock \u7b97\u6cd5\u53ef\u89c6\u5316 (\u4fee\u6b63\u7248)<\/h1>\n\n <div class=\"main-container\">\n \n \n <div class=\"clock-wrapper\">\n <div class=\"clock-circle\" id=\"circle\">\n <div class=\"center-dot\"><\/div>\n <div class=\"hand-container\" id=\"handContainer\">\n <div class=\"hand\"><\/div>\n <\/div>\n \n <\/div>\n <\/div>\n\n \n <div class=\"control-panel\">\n <div class=\"seq-bar\" id=\"seqBar\"><\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn-next\" id=\"btnNext\" onclick=\"step()\">\u4e0b\u4e00\u6b65<\/button>\n <button class=\"btn-auto\" id=\"btnAuto\" onclick=\"toggleAuto()\">\u81ea\u52a8\u64ad\u653e<\/button>\n <button class=\"btn-reset\" onclick=\"reset()\">\u91cd\u7f6e<\/button>\n <\/div>\n\n <div class=\"log-container\" id=\"logBox\">\n <div class=\"log-line\">\u7cfb\u7edf\u5c31\u7eea...<\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <script>\n \/\/ === \u914d\u7f6e ===\n const CAPACITY = 5;\n const RADIUS = 145; \/\/ \u69fd\u4f4d\u8ddd\u79bb\u5706\u5fc3\u7684\u8ddd\u79bb\n const SEQ_DATA = [\"A\", \"B\", \"C\", \"D\", \"E\", \"A\", \"B\", \"F\", \"G\", \"A\", \"H\"];\n \n \/\/ === \u72b6\u6001 ===\n let cache = new Array(CAPACITY).fill(null); \/\/ { val, ref }\n let pointer = 0; \/\/ 0 ~ 4\n let cursor = 0; \/\/ \u5e8f\u5217\u8fdb\u5ea6\n let isAuto = false;\n let isProcessing = false;\n\n \/\/ === \u521d\u59cb\u5316 ===\n function init() {\n renderClockSlots();\n renderSeq();\n updateHand();\n }\n\n function renderClockSlots() {\n const circle = document.getElementById('circle');\n \/\/ \u6e05\u9664\u65e7slot\uff0c\u4fdd\u7559 dot \u548c hand\n document.querySelectorAll('.slot').forEach(e => e.remove());\n\n for (let i = 0; i < CAPACITY; i++) {\n const slot = document.createElement('div');\n slot.className = 'slot';\n slot.id = `slot-${i}`;\n \n \/\/ \u6570\u5b66\u5b9a\u4f4d\uff1a\n \/\/ 0\u53f7\u4f4d\u5728\u6b63\u4e0a\u65b9 (-90\u5ea6)\n \/\/ \u89d2\u5ea6 = i * (360 \/ N) - 90\n const deg = i * (360 \/ CAPACITY) - 90;\n const rad = deg * (Math.PI \/ 180);\n\n \/\/ \u8ba1\u7b97\u504f\u79fb\u91cf\n const x = RADIUS * Math.cos(rad);\n const y = RADIUS * Math.sin(rad);\n\n \/\/ \u4f7f\u7528 translate \u5b9a\u4f4d\uff0c\u57fa\u51c6\u70b9\u662f center (top:50%, left:50%)\n slot.style.transform = `translate(calc(-50% + ${x}px), calc(-50% + ${y}px))`;\n\n slot.innerHTML = `<div class=\"val\">-<\/div><div class=\"badge\">EMPTY<\/div>`;\n circle.appendChild(slot);\n }\n }\n\n \/\/ === \u6838\u5fc3\u903b\u8f91 ===\n async function step() {\n if(isProcessing || cursor >= SEQ_DATA.length) return;\n isProcessing = true;\n document.getElementById('btnNext').disabled = true;\n\n const targetVal = SEQ_DATA[cursor];\n highlightSeq(cursor);\n log(`\u8bf7\u6c42\u8bbf\u95ee: ${targetVal}`);\n\n \/\/ 1. \u67e5\u627e\u662f\u5426\u5b58\u5728\n const existIdx = cache.findIndex(item => item && item.val === targetVal);\n\n if (existIdx !== -1) {\n \/\/ Hit\n await handleHit(existIdx);\n } else {\n \/\/ Miss\n await handleMiss(targetVal);\n }\n\n cursor++;\n isProcessing = false;\n document.getElementById('btnNext').disabled = false;\n \n if(cursor >= SEQ_DATA.length) {\n log(\"\u5e8f\u5217\u7ed3\u675f\u3002\", true);\n isAuto = false;\n } else if (isAuto) {\n setTimeout(step, 1000);\n }\n }\n\n async function handleHit(idx) {\n log(`-> \u547d\u4e2d! \u4f4d\u7f6e ${idx}\u3002Ref\u4f4d\u8bbe\u4e3a 1 (\u590d\u6d3b)\u3002`, true);\n \n \/\/ \u52a8\u753b\n const slot = document.getElementById(`slot-${idx}`);\n slot.classList.add('active-hit');\n \n \/\/ \u66f4\u65b0\u6570\u636e\n cache[idx].ref = 1;\n updateSlotUI(idx);\n\n await sleep(600);\n slot.classList.remove('active-hit');\n }\n\n async function handleMiss(val) {\n log(`-> \u672a\u547d\u4e2d\u3002\u5bfb\u627e\u63d2\u5165\u4f4d\u7f6e...`);\n \n while(true) {\n \/\/ \u9ad8\u4eae\u6307\u9488\u76ee\u6807\n updateHand(); \n const currentSlot = document.getElementById(`slot-${pointer}`);\n currentSlot.classList.add('target');\n \n const item = cache[pointer];\n \n \/\/ Case 1: \u7a7a\u4f4d\n if (item === null) {\n log(`-> \u6307\u9488\u6307\u5728 ${pointer} (\u7a7a)\u3002\u76f4\u63a5\u63d2\u5165\u3002`);\n await sleep(500);\n insertData(pointer, val);\n currentSlot.classList.remove('target');\n advancePointer();\n break;\n }\n\n \/\/ Case 2: Ref = 1 (\u7ed9\u673a\u4f1a)\n if (item.ref === 1) {\n log(`-> \u6307\u9488\u6307\u5728 ${pointer} [${item.val}] (R=1)\u3002\u7ed9\u4e88\u4e8c\u6b21\u673a\u4f1a\uff0cR\u53d80\uff0c\u6307\u9488\u4e0b\u79fb\u3002`);\n item.ref = 0;\n updateSlotUI(pointer);\n currentSlot.classList.add('dimmed'); \/\/ \u89c6\u89c9\u53cd\u9988\n await sleep(800);\n currentSlot.classList.remove('dimmed');\n currentSlot.classList.remove('target');\n advancePointer();\n } \n \/\/ Case 3: Ref = 0 (\u6dd8\u6c70)\n else {\n log(`-> \u6307\u9488\u6307\u5728 ${pointer} [${item.val}] (R=0)\u3002<span style=\"color:#e74c3c\">\u6dd8\u6c70\u6b64\u9875!<\/span>`, true);\n await sleep(500);\n insertData(pointer, val);\n currentSlot.classList.remove('target');\n advancePointer();\n break;\n }\n \n await sleep(200); \/\/ \u5faa\u73af\u95f4\u6b47\n }\n }\n\n function insertData(idx, val) {\n cache[idx] = { val: val, ref: 1 };\n updateSlotUI(idx);\n \n \/\/ \u63d2\u5165\u52a8\u753b\n const slot = document.getElementById(`slot-${idx}`);\n slot.animate([\n { transform: slot.style.transform + ' scale(0.5)', opacity: 0 },\n { transform: slot.style.transform + ' scale(1.1)', opacity: 1 },\n { transform: slot.style.transform + ' scale(1)', opacity: 1 }\n ], { duration: 400 });\n }\n\n function advancePointer() {\n pointer = (pointer + 1) % CAPACITY;\n updateHand();\n }\n\n \/\/ === UI \u66f4\u65b0 ===\n function updateSlotUI(idx) {\n const el = document.getElementById(`slot-${idx}`);\n const item = cache[idx];\n const valDiv = el.querySelector('.val');\n const badge = el.querySelector('.badge');\n\n if(item) {\n valDiv.innerText = item.val;\n badge.innerText = `R=${item.ref}`;\n badge.style.background = item.ref === 1 ? 'var(--ref-1)' : 'var(--ref-0)';\n badge.style.color = item.ref === 1 ? 'white' : '#333';\n } else {\n valDiv.innerText = '-';\n badge.innerText = 'EMPTY';\n badge.style.background = '#555';\n }\n }\n\n function updateHand() {\n \/\/ 0\u53f7\u4f4d\u5bf9\u5e94 0\u5ea6 (12\u70b9\u949f)\n const deg = pointer * (360 \/ CAPACITY);\n document.getElementById('handContainer').style.transform = `translate(-50%, -50%) rotate(${deg}deg)`;\n }\n\n function renderSeq() {\n const bar = document.getElementById('seqBar');\n bar.innerHTML = '';\n SEQ_DATA.forEach((v, i) => {\n const div = document.createElement('div');\n div.className = 'seq-item';\n div.id = `seq-${i}`;\n div.innerText = v;\n bar.appendChild(div);\n });\n }\n\n function highlightSeq(idx) {\n document.querySelectorAll('.seq-item').forEach(e => e.classList.remove('current'));\n const cur = document.getElementById(`seq-${idx}`);\n if(cur) {\n cur.classList.add('current');\n cur.scrollIntoView({behavior: \"smooth\", inline: \"center\"});\n }\n }\n\n function log(msg, highlight=false) {\n const box = document.getElementById('logBox');\n const div = document.createElement('div');\n div.className = 'log-line';\n if(highlight) div.classList.add('log-hl');\n div.innerHTML = msg;\n box.prepend(div);\n }\n\n function toggleAuto() {\n if(isProcessing) return;\n isAuto = !isAuto;\n const btn = document.getElementById('btnAuto');\n btn.innerText = isAuto ? \"\u505c\u6b62\" : \"\u81ea\u52a8\u64ad\u653e\";\n btn.style.background = isAuto ? \"#e74c3c\" : \"var(--ref-1)\";\n if(isAuto) step();\n }\n\n function reset() {\n location.reload();\n }\n\n const sleep = ms => new Promise(r => setTimeout(r, ms));\n\n \/\/ Start\n init();\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Clock \u7b97\u6cd5\u6f14\u793a (\u4fee\u590d\u7248) Clock \u7b97\u6cd5\u53ef\u89c6\u5316 (\u4fee\u6b63\u7248) \u4e0b\u4e00\u6b65 \u81ea\u52a8\u64ad\u653e \u91cd\u7f6e \u7cfb\u7edf\u5c31\u7eea...<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"emotion":"","emotion_color":"","title_style":"","license":""},"class_list":["post-332","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/index.cmiteam.cn\/index.php\/wp-json\/wp\/v2\/pages\/332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/index.cmiteam.cn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/index.cmiteam.cn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/index.cmiteam.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/index.cmiteam.cn\/index.php\/wp-json\/wp\/v2\/comments?post=332"}],"version-history":[{"count":0,"href":"https:\/\/index.cmiteam.cn\/index.php\/wp-json\/wp\/v2\/pages\/332\/revisions"}],"wp:attachment":[{"href":"https:\/\/index.cmiteam.cn\/index.php\/wp-json\/wp\/v2\/media?parent=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":332,"date":"2025-11-28T15:37:56","date_gmt":"2025-11-28T07:37:56","guid":{"rendered":"https:\/\/index.cmiteam.cn\/?page_id=332"},"modified":"2025-11-28T16:06:56","modified_gmt":"2025-11-28T08:06:56","slug":"332-2","status":"publish","type":"page","link":"https:\/\/index.cmiteam.cn\/index.php\/332-2\/","title":{"rendered":"\u64cd\u4f5c\u7cfb\u7edf\u6f14\u793aclock"},"content":{"rendered":"\n\n\n\n \n \n Clock \u7b97\u6cd5\u6f14\u793a (\u4fee\u590d\u7248)<\/title>\n <style>\n :root {\n --bg-color: #1a1a2e;\n --panel-bg: #16213e;\n --accent: #e94560;\n --text-main: #ecf0f1;\n --ref-1: #2ecc71;\n --ref-0: #95a5a6;\n --pointer: #f1c40f;\n --slot-size: 60px;\n --clock-radius: 180px; \/* \u5706\u76d8\u534a\u5f84 *\/\n }\n\n * { box-sizing: border-box; }\n\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: var(--bg-color);\n color: var(--text-main);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding: 20px;\n }\n\n h1 { margin-bottom: 30px; letter-spacing: 2px; }\n\n \/* \u4e3b\u5bb9\u5668\uff1a\u6539\u4e3a\u5c45\u4e2d\uff0c\u5141\u8bb8\u6362\u884c *\/\n .main-container {\n display: flex;\n flex-wrap: wrap; \/* \u5173\u952e\uff1a\u5141\u8bb8\u7a84\u5c4f\u6362\u884c *\/\n justify-content: center;\n align-items: center; \/* \u5782\u76f4\u5c45\u4e2d *\/\n gap: 60px;\n width: 100%;\n max-width: 1200px;\n }\n\n \/* \u5de6\u4fa7\uff1a\u5706\u76d8\u821e\u53f0 *\/\n .clock-wrapper {\n \/* \u5f3a\u5236\u4e0d\u7f29\u5c0f\uff0c\u9632\u6b62\u9519\u4f4d *\/\n flex-shrink: 0; \n width: 400px;\n height: 400px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n }\n\n .clock-circle {\n width: 380px;\n height: 380px;\n background: var(--panel-bg);\n border-radius: 50%;\n border: 6px solid #303a52;\n position: relative;\n box-shadow: 0 10px 40px rgba(0,0,0,0.5);\n }\n\n \/* \u4e2d\u5fc3\u70b9 *\/\n .center-dot {\n width: 24px; height: 24px;\n background: var(--pointer);\n border-radius: 50%;\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n z-index: 20;\n box-shadow: 0 0 15px var(--pointer);\n }\n\n \/* \u6307\u9488\uff1a\u4f7f\u7528\u7edd\u5bf9\u5b9a\u4f4d\u5b9a\u6b7b\u5728\u4e2d\u95f4 *\/\n .hand-container {\n position: absolute;\n top: 50%; left: 50%;\n width: 0; height: 0;\n z-index: 10;\n transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n .hand {\n width: 6px;\n height: 140px; \/* \u6307\u9488\u957f\u5ea6 *\/\n background: var(--pointer);\n position: absolute;\n \/* \u8ba9\u6307\u9488\u4ece\u4e2d\u5fc3\u5411\u4e0a\u5ef6\u4f38 *\/\n bottom: 0; \n left: -3px; \/* \u5c45\u4e2d\u4fee\u6b63 (\u5bbd\u5ea6\u7684\u4e00\u534a) *\/\n border-radius: 4px;\n }\n .hand::after {\n content: '';\n position: absolute;\n top: -15px; left: -7px; \/* \u7bad\u5934\u4f4d\u7f6e\u4fee\u6b63 *\/\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-bottom: 20px solid var(--pointer);\n }\n\n \/* \u69fd\u4f4d *\/\n .slot {\n width: var(--slot-size);\n height: var(--slot-size);\n background: #253550;\n border-radius: 12px;\n position: absolute;\n top: 50%; left: 50%; \n \/* \u521d\u59cb\u5c45\u4e2d\uff0c\u540e\u9762\u901a\u8fc7 JS \u8ba1\u7b97 translate \u504f\u79fb *\/\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 1.2rem;\n z-index: 15;\n box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n border: 2px solid transparent;\n transition: all 0.3s;\n }\n\n .slot .badge {\n font-size: 0.6rem;\n background: #555;\n padding: 2px 6px;\n border-radius: 10px;\n margin-top: 2px;\n transition: 0.3s;\n }\n\n .slot.active-hit { background: #f1c40f; color: #000; transform: scale(1.2) !important; }\n .slot.target { border-color: var(--accent); box-shadow: 0 0 15px var(--accent); }\n .slot.dimmed { opacity: 0.4; }\n\n \/* \u53f3\u4fa7\uff1a\u63a7\u5236\u9762\u677f *\/\n .control-panel {\n flex: 1; \/* \u5360\u636e\u5269\u4f59\u7a7a\u95f4 *\/\n min-width: 320px; \/* \u6700\u5c0f\u5bbd\u5ea6\uff0c\u9632\u6b62\u592a\u7a84 *\/\n max-width: 500px;\n background: rgba(255, 255, 255, 0.05);\n padding: 25px;\n border-radius: 16px;\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255,255,255,0.1);\n }\n\n .btn-group { display: flex; gap: 10px; margin-bottom: 20px; }\n \n button {\n flex: 1;\n padding: 12px;\n border: none;\n border-radius: 8px;\n font-weight: bold;\n cursor: pointer;\n transition: 0.2s;\n color: white;\n }\n .btn-next { background: var(--accent); }\n .btn-auto { background: var(--ref-1); }\n .btn-reset { background: #555; }\n button:disabled { opacity: 0.5; cursor: not-allowed; }\n button:active { transform: scale(0.98); }\n\n \/* \u65e5\u5fd7\u533a *\/\n .log-container {\n height: 250px;\n overflow-y: auto;\n background: rgba(0,0,0,0.4);\n border-radius: 8px;\n padding: 10px;\n font-family: monospace;\n font-size: 0.9rem;\n border-left: 4px solid var(--accent);\n }\n .log-line { margin-bottom: 8px; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 4px; }\n .log-hl { color: var(--pointer); font-weight: bold; }\n\n \/* \u5e8f\u5217\u6761 *\/\n .seq-bar {\n display: flex; gap: 8px; overflow-x: auto; padding-bottom: 15px; margin-bottom: 15px;\n border-bottom: 1px solid rgba(255,255,255,0.1);\n }\n .seq-item {\n min-width: 32px; height: 32px;\n background: rgba(255,255,255,0.1);\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 0.8rem; opacity: 0.5;\n }\n .seq-item.current { background: var(--accent); opacity: 1; transform: scale(1.1); font-weight: bold; }\n\n <\/style>\n<\/head>\n<body>\n\n <h1>Clock \u7b97\u6cd5\u53ef\u89c6\u5316 (\u4fee\u6b63\u7248)<\/h1>\n\n <div class=\"main-container\">\n \n \n <div class=\"clock-wrapper\">\n <div class=\"clock-circle\" id=\"circle\">\n <div class=\"center-dot\"><\/div>\n <div class=\"hand-container\" id=\"handContainer\">\n <div class=\"hand\"><\/div>\n <\/div>\n \n <\/div>\n <\/div>\n\n \n <div class=\"control-panel\">\n <div class=\"seq-bar\" id=\"seqBar\"><\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn-next\" id=\"btnNext\" onclick=\"step()\">\u4e0b\u4e00\u6b65<\/button>\n <button class=\"btn-auto\" id=\"btnAuto\" onclick=\"toggleAuto()\">\u81ea\u52a8\u64ad\u653e<\/button>\n <button class=\"btn-reset\" onclick=\"reset()\">\u91cd\u7f6e<\/button>\n <\/div>\n\n <div class=\"log-container\" id=\"logBox\">\n <div class=\"log-line\">\u7cfb\u7edf\u5c31\u7eea...<\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <script>\n \/\/ === \u914d\u7f6e ===\n const CAPACITY = 5;\n const RADIUS = 145; \/\/ \u69fd\u4f4d\u8ddd\u79bb\u5706\u5fc3\u7684\u8ddd\u79bb\n const SEQ_DATA = [\"A\", \"B\", \"C\", \"D\", \"E\", \"A\", \"B\", \"F\", \"G\", \"A\", \"H\"];\n \n \/\/ === \u72b6\u6001 ===\n let cache = new Array(CAPACITY).fill(null); \/\/ { val, ref }\n let pointer = 0; \/\/ 0 ~ 4\n let cursor = 0; \/\/ \u5e8f\u5217\u8fdb\u5ea6\n let isAuto = false;\n let isProcessing = false;\n\n \/\/ === \u521d\u59cb\u5316 ===\n function init() {\n renderClockSlots();\n renderSeq();\n updateHand();\n }\n\n function renderClockSlots() {\n const circle = document.getElementById('circle');\n \/\/ \u6e05\u9664\u65e7slot\uff0c\u4fdd\u7559 dot \u548c hand\n document.querySelectorAll('.slot').forEach(e => e.remove());\n\n for (let i = 0; i < CAPACITY; i++) {\n const slot = document.createElement('div');\n slot.className = 'slot';\n slot.id = `slot-${i}`;\n \n \/\/ \u6570\u5b66\u5b9a\u4f4d\uff1a\n \/\/ 0\u53f7\u4f4d\u5728\u6b63\u4e0a\u65b9 (-90\u5ea6)\n \/\/ \u89d2\u5ea6 = i * (360 \/ N) - 90\n const deg = i * (360 \/ CAPACITY) - 90;\n const rad = deg * (Math.PI \/ 180);\n\n \/\/ \u8ba1\u7b97\u504f\u79fb\u91cf\n const x = RADIUS * Math.cos(rad);\n const y = RADIUS * Math.sin(rad);\n\n \/\/ \u4f7f\u7528 translate \u5b9a\u4f4d\uff0c\u57fa\u51c6\u70b9\u662f center (top:50%, left:50%)\n slot.style.transform = `translate(calc(-50% + ${x}px), calc(-50% + ${y}px))`;\n\n slot.innerHTML = `<div class=\"val\">-<\/div><div class=\"badge\">EMPTY<\/div>`;\n circle.appendChild(slot);\n }\n }\n\n \/\/ === \u6838\u5fc3\u903b\u8f91 ===\n async function step() {\n if(isProcessing || cursor >= SEQ_DATA.length) return;\n isProcessing = true;\n document.getElementById('btnNext').disabled = true;\n\n const targetVal = SEQ_DATA[cursor];\n highlightSeq(cursor);\n log(`\u8bf7\u6c42\u8bbf\u95ee: ${targetVal}`);\n\n \/\/ 1. \u67e5\u627e\u662f\u5426\u5b58\u5728\n const existIdx = cache.findIndex(item => item && item.val === targetVal);\n\n if (existIdx !== -1) {\n \/\/ Hit\n await handleHit(existIdx);\n } else {\n \/\/ Miss\n await handleMiss(targetVal);\n }\n\n cursor++;\n isProcessing = false;\n document.getElementById('btnNext').disabled = false;\n \n if(cursor >= SEQ_DATA.length) {\n log(\"\u5e8f\u5217\u7ed3\u675f\u3002\", true);\n isAuto = false;\n } else if (isAuto) {\n setTimeout(step, 1000);\n }\n }\n\n async function handleHit(idx) {\n log(`-> \u547d\u4e2d! \u4f4d\u7f6e ${idx}\u3002Ref\u4f4d\u8bbe\u4e3a 1 (\u590d\u6d3b)\u3002`, true);\n \n \/\/ \u52a8\u753b\n const slot = document.getElementById(`slot-${idx}`);\n slot.classList.add('active-hit');\n \n \/\/ \u66f4\u65b0\u6570\u636e\n cache[idx].ref = 1;\n updateSlotUI(idx);\n\n await sleep(600);\n slot.classList.remove('active-hit');\n }\n\n async function handleMiss(val) {\n log(`-> \u672a\u547d\u4e2d\u3002\u5bfb\u627e\u63d2\u5165\u4f4d\u7f6e...`);\n \n while(true) {\n \/\/ \u9ad8\u4eae\u6307\u9488\u76ee\u6807\n updateHand(); \n const currentSlot = document.getElementById(`slot-${pointer}`);\n currentSlot.classList.add('target');\n \n const item = cache[pointer];\n \n \/\/ Case 1: \u7a7a\u4f4d\n if (item === null) {\n log(`-> \u6307\u9488\u6307\u5728 ${pointer} (\u7a7a)\u3002\u76f4\u63a5\u63d2\u5165\u3002`);\n await sleep(500);\n insertData(pointer, val);\n currentSlot.classList.remove('target');\n advancePointer();\n break;\n }\n\n \/\/ Case 2: Ref = 1 (\u7ed9\u673a\u4f1a)\n if (item.ref === 1) {\n log(`-> \u6307\u9488\u6307\u5728 ${pointer} [${item.val}] (R=1)\u3002\u7ed9\u4e88\u4e8c\u6b21\u673a\u4f1a\uff0cR\u53d80\uff0c\u6307\u9488\u4e0b\u79fb\u3002`);\n item.ref = 0;\n updateSlotUI(pointer);\n currentSlot.classList.add('dimmed'); \/\/ \u89c6\u89c9\u53cd\u9988\n await sleep(800);\n currentSlot.classList.remove('dimmed');\n currentSlot.classList.remove('target');\n advancePointer();\n } \n \/\/ Case 3: Ref = 0 (\u6dd8\u6c70)\n else {\n log(`-> \u6307\u9488\u6307\u5728 ${pointer} [${item.val}] (R=0)\u3002<span style=\"color:#e74c3c\">\u6dd8\u6c70\u6b64\u9875!<\/span>`, true);\n await sleep(500);\n insertData(pointer, val);\n currentSlot.classList.remove('target');\n advancePointer();\n break;\n }\n \n await sleep(200); \/\/ \u5faa\u73af\u95f4\u6b47\n }\n }\n\n function insertData(idx, val) {\n cache[idx] = { val: val, ref: 1 };\n updateSlotUI(idx);\n \n \/\/ \u63d2\u5165\u52a8\u753b\n const slot = document.getElementById(`slot-${idx}`);\n slot.animate([\n { transform: slot.style.transform + ' scale(0.5)', opacity: 0 },\n { transform: slot.style.transform + ' scale(1.1)', opacity: 1 },\n { transform: slot.style.transform + ' scale(1)', opacity: 1 }\n ], { duration: 400 });\n }\n\n function advancePointer() {\n pointer = (pointer + 1) % CAPACITY;\n updateHand();\n }\n\n \/\/ === UI \u66f4\u65b0 ===\n function updateSlotUI(idx) {\n const el = document.getElementById(`slot-${idx}`);\n const item = cache[idx];\n const valDiv = el.querySelector('.val');\n const badge = el.querySelector('.badge');\n\n if(item) {\n valDiv.innerText = item.val;\n badge.innerText = `R=${item.ref}`;\n badge.style.background = item.ref === 1 ? 'var(--ref-1)' : 'var(--ref-0)';\n badge.style.color = item.ref === 1 ? 'white' : '#333';\n } else {\n valDiv.innerText = '-';\n badge.innerText = 'EMPTY';\n badge.style.background = '#555';\n }\n }\n\n function updateHand() {\n \/\/ 0\u53f7\u4f4d\u5bf9\u5e94 0\u5ea6 (12\u70b9\u949f)\n const deg = pointer * (360 \/ CAPACITY);\n document.getElementById('handContainer').style.transform = `translate(-50%, -50%) rotate(${deg}deg)`;\n }\n\n function renderSeq() {\n const bar = document.getElementById('seqBar');\n bar.innerHTML = '';\n SEQ_DATA.forEach((v, i) => {\n const div = document.createElement('div');\n div.className = 'seq-item';\n div.id = `seq-${i}`;\n div.innerText = v;\n bar.appendChild(div);\n });\n }\n\n function highlightSeq(idx) {\n document.querySelectorAll('.seq-item').forEach(e => e.classList.remove('current'));\n const cur = document.getElementById(`seq-${idx}`);\n if(cur) {\n cur.classList.add('current');\n cur.scrollIntoView({behavior: \"smooth\", inline: \"center\"});\n }\n }\n\n function log(msg, highlight=false) {\n const box = document.getElementById('logBox');\n const div = document.createElement('div');\n div.className = 'log-line';\n if(highlight) div.classList.add('log-hl');\n div.innerHTML = msg;\n box.prepend(div);\n }\n\n function toggleAuto() {\n if(isProcessing) return;\n isAuto = !isAuto;\n const btn = document.getElementById('btnAuto');\n btn.innerText = isAuto ? \"\u505c\u6b62\" : \"\u81ea\u52a8\u64ad\u653e\";\n btn.style.background = isAuto ? \"#e74c3c\" : \"var(--ref-1)\";\n if(isAuto) step();\n }\n\n function reset() {\n location.reload();\n }\n\n const sleep = ms => new Promise(r => setTimeout(r, ms));\n\n \/\/ Start\n init();\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Clock \u7b97\u6cd5\u6f14\u793a (\u4fee\u590d\u7248) Clock \u7b97\u6cd5\u53ef\u89c6\u5316 (\u4fee\u6b63\u7248) \u4e0b\u4e00\u6b65 \u81ea\u52a8\u64ad\u653e \u91cd\u7f6e \u7cfb\u7edf\u5c31\u7eea...<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"emotion":"","emotion_color":"","title_style":"","license":""},"class_list":["post-332","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/index.cmiteam.cn\/index.php\/wp-json\/wp\/v2\/pages\/332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/index.cmiteam.cn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/index.cmiteam.cn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/index.cmiteam.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/index.cmiteam.cn\/index.php\/wp-json\/wp\/v2\/comments?post=332"}],"version-history":[{"count":0,"href":"https:\/\/index.cmiteam.cn\/index.php\/wp-json\/wp\/v2\/pages\/332\/revisions"}],"wp:attachment":[{"href":"https:\/\/index.cmiteam.cn\/index.php\/wp-json\/wp\/v2\/media?parent=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}