{"id":98,"date":"2026-09-26T19:35:00","date_gmt":"2026-09-26T11:35:00","guid":{"rendered":"https:\/\/xwyer.lykns.cn\/?p=98"},"modified":"2026-10-03T22:16:42","modified_gmt":"2026-10-03T14:16:42","slug":"%e7%94%b1%e6%97%b6%e9%92%9f%e7%bb%84%e6%88%90%e7%9a%84%e6%97%b6%e9%92%9f","status":"publish","type":"post","link":"https:\/\/xwyer.lykns.cn\/?p=98","title":{"rendered":"\u7531\u65f6\u949f\u7ec4\u6210\u7684\u65f6\u949f"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n.clock-of-clocks-wrapper {\n    max-width: 900px;\n    margin: 40px auto;\n    padding: 30px 20px;\n    background: var(--base-3);\n    border-radius: 12px;\n    font-family: inherit;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 30px;\n}\n.clock-of-clocks-container {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 1.5rem;\n    width: 100%;\n    max-width: 700px;\n}\n.coc-circle-container {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    grid-template-rows: repeat(6, 1fr);\n    gap: 0.4rem;\n    aspect-ratio: 4 \/ 6;\n}\n.coc-span {\n    width: 100%;\n    aspect-ratio: 1 \/ 1;\n    border-radius: 50%;\n    display: block;\n    position: relative;\n    background: var(--base-2);\n    box-shadow: inset 1px -1px 3px 1px color-mix(in srgb, var(--contrast) 15%, transparent);\n    overflow: hidden;\n}\n.coc-span:before, .coc-span::after {\n    content: \"\";\n    position: absolute;\n    left: 0; right: 0;\n    margin: 0 auto;\n    bottom: 50%;\n    width: 8%; min-width: 2px; height: 42%;\n    background: var(--contrast);\n    border-radius: 2px;\n    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);\n    transform-origin: bottom center;\n}\n.coc-span::before { transform: rotate(var(--angle-1, 0deg)); }\n.coc-span::after { transform: rotate(var(--angle-2, 0deg)); opacity: 0.6; }\n.clock-of-clocks-footer {\n    display: flex; align-items: center; gap: 10px;\n    color: var(--contrast-2); font-size: 0.95rem;\n}\n.clock-of-clocks-footer .digital-time {\n    font-family: Consolas, \"Courier New\", monospace;\n    font-size: 1.5rem; font-weight: 700;\n    color: var(--accent); letter-spacing: 2px;\n}\n.clock-of-clocks-footer .separator { color: var(--base-3); font-size: 1.2rem; }\n.clock-of-clocks-footer .hint { color: var(--contrast-3); font-size: 0.85rem; }\n@media (max-width: 600px) {\n    .clock-of-clocks-wrapper { padding: 20px 10px; gap: 20px; }\n    .clock-of-clocks-container { gap: 0.8rem; }\n    .coc-circle-container { gap: 0.25rem; }\n    .clock-of-clocks-footer { flex-direction: column; gap: 5px; text-align: center; }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(function() {\n    document.addEventListener('DOMContentLoaded', function() {\n        var watchContainer = document.getElementById('cocWatchContainer');\n        var digitalTimeEl = document.getElementById('cocDigitalTime');\n        if (!watchContainer) return;\n\n        var NUM_CIRCLES = 4;\n        var SPANS_PER_CIRCLE = 24;\n\n        var digits = {\n            0:[[90,180],[90,270],[90,270],[180,270],[0,180],[90,180],[180,270],[0,180],[0,180],[0,180],[0,180],[0,180],[0,180],[0,180],[0,180],[0,180],[0,180],[0,90],[0,270],[0,180],[0,90],[90,270],[90,270],[0,270]],\n            1:[[90,180],[90,270],[180,270],[225,225],[0,90],[180,270],[180,0],[225,225],[225,225],[180,0],[180,0],[225,225],[225,225],[180,0],[180,0],[225,225],[90,180],[270,0],[0,90],[180,270],[90,0],[90,270],[270,90],[0,270]],\n            2:[[180,90],[90,270],[90,270],[270,180],[0,90],[90,270],[270,180],[180,0],[180,90],[270,90],[0,270],[180,0],[0,180],[180,90],[270,90],[270,0],[180,0],[0,90],[270,90],[180,270],[0,90],[270,90],[270,90],[270,0]],\n            3:[[180,90],[90,270],[90,270],[270,180],[0,90],[90,270],[270,180],[180,0],[180,90],[270,90],[0,270],[180,0],[90,0],[270,90],[180,270],[180,0],[90,180],[270,90],[0,270],[180,0],[0,90],[270,90],[270,90],[270,0]],\n            4:[[180,90],[180,270],[225,225],[225,225],[0,180],[180,0],[225,225],[225,225],[0,180],[180,0],[180,90],[180,270],[0,180],[0,90],[0,270],[180,0],[0,90],[270,90],[180,270],[180,0],[225,225],[225,225],[0,90],[270,0]],\n            5:[[180,90],[90,270],[90,270],[270,180],[180,0],[180,90],[90,270],[270,0],[0,180],[0,90],[90,270],[270,180],[0,90],[90,270],[270,180],[180,0],[180,90],[270,90],[0,270],[180,0],[0,90],[270,90],[270,90],[270,0]],\n            6:[[180,90],[90,270],[90,270],[270,180],[0,180],[90,180],[270,90],[0,270],[180,0],[0,90],[270,90],[180,270],[180,0],[90,180],[270,180],[0,180],[0,180],[0,90],[270,0],[180,0],[0,90],[270,90],[270,90],[270,0]],\n            7:[[180,90],[270,90],[270,90],[270,180],[90,0],[270,90],[270,225],[225,0],[225,225],[45,180],[45,180],[225,225],[225,225],[0,180],[0,180],[225,225],[225,225],[0,180],[0,180],[225,225],[225,225],[0,90],[0,270],[225,225]],\n            8:[[180,90],[90,270],[90,270],[270,180],[180,0],[90,180],[270,180],[180,0],[180,0],[90,0],[0,270],[180,0],[0,180],[180,90],[180,270],[0,180],[180,0],[90,0],[270,0],[180,0],[0,90],[90,270],[270,90],[270,0]],\n            9:[[180,90],[90,270],[90,270],[270,180],[0,180],[90,180],[270,180],[180,0],[180,0],[0,90],[0,270],[180,0],[0,90],[90,270],[180,270],[0,180],[90,180],[90,270],[0,270],[180,0],[0,90],[270,90],[270,90],[270,0]]\n        };\n\n        for (var i = 0; i < NUM_CIRCLES; i++) {\n            var circle = document.createElement('div');\n            circle.className = 'coc-circle-container';\n            circle.id = 'coc-watch-circle-' + i;\n            for (var j = 0; j < SPANS_PER_CIRCLE; j++) {\n                var span = document.createElement('span');\n                span.className = 'coc-span';\n                circle.appendChild(span);\n            }\n            watchContainer.appendChild(circle);\n        }\n\n        function updateClock() {\n            var now = new Date();\n            var h = String(now.getHours()).padStart(2, '0');\n            var m = String(now.getMinutes()).padStart(2, '0');\n            var timeArr = [h[0], h[1], m[0], m[1]];\n            if (digitalTimeEl) digitalTimeEl.textContent = h + ':' + m;\n\n            for (var i = 0; i < NUM_CIRCLES; i++) {\n                var digit = timeArr[i];\n                var el = document.getElementById('coc-watch-circle-' + i);\n                if (!el || !digits[digit]) continue;\n                var spans = el.querySelectorAll('.coc-span');\n                var angles = digits[digit];\n                var len = Math.min(spans.length, angles.length);\n                for (var k = 0; k < len; k++) {\n                    spans[k].style.setProperty('--angle-1', angles[k][0] + 'deg');\n                    spans[k].style.setProperty('--angle-2', angles[k][1] + 'deg');\n                }\n            }\n        }\n\n        updateClock();\n        setInterval(updateClock, 1000);\n    });\n})();\n<\/script>\n\n<div class=\"clock-of-clocks-wrapper\">\n    <div class=\"clock-of-clocks-container\" id=\"cocWatchContainer\"><\/div>\n    <div class=\"clock-of-clocks-footer\">\n        <span id=\"cocDigitalTime\" class=\"digital-time\">--:--<\/span>\n        <span class=\"separator\">\u00b7<\/span>\n        <span class=\"hint\">\u7531 96 \u4e2a\u72ec\u7acb\u65f6\u949f\u7ec4\u6210\u7684\u6570\u5b57\u65f6\u949f<\/span>\n    <\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8211;:&#8211; \u00b7 \u7531 96 \u4e2a\u72ec\u7acb\u65f6\u949f\u7ec4\u6210\u7684\u6570\u5b57\u65f6\u949f<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_ppma_block_editor_authors":""},"categories":[4],"tags":[],"ppma_author":[7],"class_list":["post-98","post","type-post","status-publish","format-standard","hentry","category-xwyer","author-captb"],"authors":[{"term_id":7,"user_id":1,"is_guest":0,"slug":"captb","display_name":"CaptB","avatar_url":{"url":"https:\/\/xwyer.lykns.cn\/wp-content\/uploads\/2026\/10\/CaptB.png","url2x":"https:\/\/xwyer.lykns.cn\/wp-content\/uploads\/2026\/10\/CaptB.png"},"avatar_alt":"","avatar_decorative":"","author_category":"1","first_name":"","last_name":"","user_url":"https:\/\/www.lykns.cn\/people\/captb\/","job_title":"LYKNS \u4e3b\u5e2d\u3001\u7ba1\u7406\u7ec4\u53ca\u8fd0\u8425\u7ec4\u6210\u5458","description":"<p>1966 \u5e74\u30012006 \u5e74\u4e24\u5ea6\u8363\u81ba\u300a\u65f6\u4ee3\u5468\u520a\u300b\u5e74\u5ea6\u98ce\u4e91\u4eba\u7269\uff1b2008 \u5e74\u83b7\u8bc4\u300a\u611f\u52a8\u4e2d\u56fd\u300b\u5e74\u5ea6\u4eba\u7269\uff1b2019 \u5e74\u83b7\u8054\u5408\u56fd\u201c\u5730\u7403\u536b\u58eb\u5956\u201d\u8054\u5408\u5956\uff1b2020 \u5e74\u83b7\u300a\u611f\u52a8\u4e2d\u56fd\u300b\u7279\u522b\u81f4\u656c\uff1b2022 \u5e74\u4e0e\u56e2\u961f\u5171\u83b7\u56fd\u9645\u5965\u59d4\u4f1a\u201c\u5965\u6797\u5339\u514b\u5956\u676f\u201d\u3002<\/p>"}],"_links":{"self":[{"href":"https:\/\/xwyer.lykns.cn\/index.php?rest_route=\/wp\/v2\/posts\/98","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xwyer.lykns.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xwyer.lykns.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xwyer.lykns.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xwyer.lykns.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=98"}],"version-history":[{"count":1,"href":"https:\/\/xwyer.lykns.cn\/index.php?rest_route=\/wp\/v2\/posts\/98\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/xwyer.lykns.cn\/index.php?rest_route=\/wp\/v2\/posts\/98\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/xwyer.lykns.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=98"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xwyer.lykns.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=98"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xwyer.lykns.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=98"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/xwyer.lykns.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fppma_author&post=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}