{"id":48969,"date":"2026-09-16T10:02:18","date_gmt":"2026-09-16T02:02:18","guid":{"rendered":"https:\/\/www.qiusir.com\/?p=48969"},"modified":"2026-10-22T11:05:16","modified_gmt":"2026-10-22T03:05:16","slug":"nyec-2605","status":"publish","type":"post","link":"https:\/\/www.qiusir.com\/?p=48969","title":{"rendered":"NEYC-2605"},"content":{"rendered":"\r\n<div>\r\n<p><img decoding=\"async\" class=\"framed\" src=\"https:\/\/www.qiusir.com\/wp-content\/gallery\/neyc\/NEYC2605H1.jpg\" alt=\"\" width=\"580\"><\/p>\r\n\r\n\r\n\r\n<style>\r\n    .v-class-five-system {\r\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        background-color: #f8f9fa;\r\n        padding: 25px 15px;\r\n        border-radius: 12px;\r\n        box-shadow: inset 0 0 20px rgba(0,0,0,0.02);\r\n        margin: 20px auto;\r\n        box-sizing: border-box;\r\n        width: 100%;\r\n        max-width: 800px; \r\n        overflow: visible; \r\n    }\r\n\r\n    \/* \u6838\u5fc3\u753b\u5e03\u5305\u88f9\u5bb9\u5668 *\/\r\n    .v-canvas-wrapper {\r\n        position: relative;\r\n        width: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        margin-bottom: 15px; \r\n    }\r\n\r\n    \/* 17\u5217 x 7\u884c \u7684\u7ecf\u5178\u8212\u5c55 V \u5f62\u753b\u5e03 *\/\r\n    .v-class-five-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(17, minmax(0, 1fr));\r\n        grid-template-rows: repeat(7, auto);\r\n        gap: 3px;\r\n        width: 100%;\r\n        box-sizing: border-box;\r\n        margin-bottom: 12px;\r\n    }\r\n\r\n    \/* V \u5b57\u6b63\u4e0b\u65b9\u7684\u201c5\u201d\u5706\u5f62\u5fbd\u6807 *\/\r\n    .class-badge-five {\r\n        width: 42px;\r\n        height: 42px;\r\n        background: #ffffff;\r\n        border: 2.5px solid #4caf50;\r\n        color: #4caf50;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 1.5rem;\r\n        font-weight: 800;\r\n        line-height: 1;\r\n        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.25);\r\n        user-select: none;\r\n    }\r\n\r\n    .name-cell {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 6px 1px;\r\n        border-radius: 5px;\r\n        font-size: 0.65rem;\r\n        font-weight: 600;\r\n        text-align: center;\r\n        box-shadow: 0 1px 3px rgba(0,0,0,0.06);\r\n        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n        white-space: nowrap;\r\n        cursor: default;\r\n        border: 1.5px solid transparent;\r\n        box-sizing: border-box;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n        position: relative;\r\n    }\r\n\r\n    \/* \u4e13\u5c5e\u5fae\u7f29\u540d\u5b57\u6837\u5f0f\uff1a\u9488\u5bf9\u5b57\u6570\u8f83\u957f\u7684\u540d\u5b57\u9ed8\u8ba4\u7f29\u5c0f\u5b57\u53f7 *\/\r\n    .name-cell.long-name {\r\n        font-size: 0.48rem;\r\n        padding: 6px 0px;\r\n        letter-spacing: -0.5px;\r\n    }\r\n\r\n    .name-cell.boy { background-color: #e3f2fd; color: #1565c0; border-color: #bbdefb; }\r\n    .name-cell.girl { background-color: #fce4ec; color: #c2185b; border-color: #f8bbd0; }\r\n\r\n    \/* \u9f20\u6807\u653e\u5230\u540d\u5b57\u4e0a\u65f6\uff0c\u653e\u5927\u5e76\u5b8c\u6574\u663e\u793a\u3001\u53d6\u6d88\u622a\u65ad *\/\r\n    .name-cell:hover:not(.active):not(.selected) {\r\n        transform: scale(1.35); \r\n        box-shadow: 0 8px 25px rgba(0,0,0,0.2);\r\n        z-index: 100; \r\n        white-space: nowrap !important;\r\n        overflow: visible !important;\r\n        text-overflow: clip !important;\r\n        font-size: 0.75rem !important; \r\n        padding: 6px 6px !important;\r\n    }\r\n\r\n    \/* \u8d70\u9a6c\u706f\u968f\u673a\u70b9\u540d\u65f6\u7684\u52a8\u6001\u9ad8\u4eae\u72b6\u6001\uff08\u9ec4\u8272\u8df3\u52a8\uff09 *\/\r\n    .name-cell.active {\r\n        background-color: #ffeb3b !important;\r\n        color: #333 !important;\r\n        border-color: #fbc02d !important;\r\n        transform: scale(1.25);\r\n        box-shadow: 0 6px 18px rgba(0,0,0,0.2);\r\n        z-index: 110;\r\n        white-space: nowrap !important;\r\n        overflow: visible !important;\r\n        font-size: 0.75rem !important;\r\n        padding: 6px 6px !important;\r\n    }\r\n\r\n    \/* \u6700\u7ec8\u9009\u4e2d\u7684\u72b6\u6001\uff08\u7eff\u8272\u9501\u5b9a\uff09 *\/\r\n    .name-cell.selected {\r\n        background-color: #4caf50 !important;\r\n        color: white !important;\r\n        border-color: #388e3c !important;\r\n        transform: scale(1.3);\r\n        box-shadow: 0 8px 22px rgba(76, 175, 80, 0.4);\r\n        z-index: 120;\r\n        white-space: nowrap !important;\r\n        overflow: visible !important;\r\n        font-size: 0.78rem !important;\r\n        padding: 6px 8px !important;\r\n    }\r\n\r\n    \/* \u5e95\u90e8\u63a7\u5236\u533a\uff1a\u7d27\u51d1\u8bbe\u8ba1 *\/\r\n    .bottom-controls {\r\n        text-align: center;\r\n        width: 100%;\r\n        max-width: 420px;\r\n        background: #ffffff;\r\n        padding: 15px 20px;\r\n        border-radius: 10px;\r\n        box-shadow: 0 4px 15px rgba(0,0,0,0.05);\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    #v-result-display {\r\n        font-size: 2.2rem;\r\n        font-weight: bold;\r\n        color: #4caf50; \r\n        height: 46px;\r\n        margin-bottom: 8px; \r\n        letter-spacing: 2px;\r\n    }\r\n\r\n    #v-pick-btn {\r\n        background-color: #4caf50; \r\n        color: white;\r\n        border: none;\r\n        padding: 8px 24px;\r\n        font-size: 1.2rem; \r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        transition: transform 0.1s, background-color 0.3s, box-shadow 0.3s;\r\n        box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3); \r\n        font-weight: 700;\r\n        width: auto; \r\n        display: inline-block;\r\n    }\r\n\r\n    #v-pick-btn:hover:not(:disabled) {\r\n        background-color: #43a047; \r\n    }\r\n\r\n    #v-pick-btn:active { transform: scale(0.96); }\r\n    #v-pick-btn:disabled { \r\n        background-color: #a5d6a7; \r\n        cursor: not-allowed; \r\n        transform: none; \r\n        box-shadow: none;\r\n    }\r\n\r\n    \/* \u624b\u673a\u7aef\u9632\u6ea2\u51fa\u5fae\u8c03 *\/\r\n    @media (max-width: 500px) {\r\n        .v-class-five-system { padding: 15px 8px; }\r\n        .v-class-five-grid { gap: 2px; }\r\n        .name-cell { font-size: 0.38rem; padding: 4px 0px; }\r\n        .name-cell.long-name { font-size: 0.28rem; }\r\n        #v-result-display { font-size: 1.5rem; height: 38px; margin-bottom: 6px; }\r\n        #v-pick-btn { font-size: 1.05rem; padding: 6px 18px; }\r\n        .class-badge-five { width: 34px; height: 34px; font-size: 1.25rem; border-width: 2px; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"v-class-five-system\">\r\n    <!-- \u5305\u88f9\u5bb9\u5668\uff1a\u627f\u8f7d V \u5f62\u7f51\u683c\u4e0e\u6b63\u4e0b\u65b9\u7684\u201c5\u201d\u5fbd\u6807 -->\r\n    <div class=\"v-canvas-wrapper\">\r\n        <div class=\"v-class-five-grid\" id=\"v-five-container\"><\/div>\r\n        <div class=\"class-badge-five\">5<\/div>\r\n    <\/div>\r\n\r\n    <!-- \u5e95\u90e8\u63a7\u5236\u4e0e\u663e\u793a\u533a\u57df -->\r\n    <div class=\"bottom-controls\">\r\n        <div id=\"v-result-display\">\u6c42\u5e08\u5f97<\/div>\r\n        <button id=\"v-pick-btn\">\u4ee5\u5df1\u4e3a\u5e08<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n    \/\/ 5\u73ed 47 \u4f4d\u540c\u5b66\u539f\u59cb\u540d\u5355\uff08\u6700\u540e\u4e00\u4e2a\u540d\u5b57\u201c\u91d1\u5723\u6db5\u201d\u72ec\u7acb\u843d\u5165\u7b2c 7 \u884c\u6b63\u4e2d\u592e\u7684\u5c16\u7aef\u5e95\u90e8\uff09\r\n    const rawData = \"\u9648\u5e05\u6587\u2642 \u9648\u5b50\u6602\u2642 \u675c\u601d\u51dd\u2640 \u51af\u6d77\u6d0b\u2642 \u845b\u817e\u6cfd\u2642 \u4faf\u51a0\u5b87\u2642 \u91d1\u5723\u6db5\u2642 \u674e\u627f\u5b87\u2642 \u674e\u6d4e\u5e06\u2642 \u674e\u6c90\u7fb2\u2640 \u674e\u6c9b\u5bb8\u2642 \u674e\u601d\u7ff0\u2642 \u674e\u6cf0\u8f69\u2642 \u674e\u5fc3\u6021\u2640 \u674e\u6615\u84ec\u2642 \u674e\u96e8\u8fb0\u2642 \u674e\u79b9\u660a\u2642 \u674e\u5219\u6f58\u2642 \u5218\u8463\u5b50\u4f9d\u2640 \u5218\u6db5\u2642 \u5218\u4f73\u660a\u2642 \u5218\u77e5\u6da6\u2642 \u725f\u6631\u83f2\u2640 \u94b1\u79b9\u5b81\u2642 \u77f3\u5cfb\u5b87\u2642 \u77f3\u82ae\u5f64\u2640 \u5b59\u6d69\u7136\u2642 \u5b59\u8fce\u6850\u2640 \u5b59\u5b87\u7c19\u2640 \u738b\u56fd\u745e\u2642 \u738b\u5723\u8fea\u2642 \u738b\u5b87\u8f69\u2642 \u738b\u7949\u4e3a\u2642 \u4ef5\u6cd3\u9716\u2642 \u960e\u4f20\u8f69\u2642 \u6768\u4f73\u6cfd\u2642 \u5f20\u535a\u60df\u2642 \u5f20\u7693\u8f69\u2642 \u5f20\u9e64\u8bd1\u2642 \u5f20\u6714\u745e\u2642 \u5f20\u827a\u6735\u2640 \u5f20\u8018\u7855\u2642 \u8d75\u95eb\u58f9\u2642 \u90d1\u4e01\u9e23\u2642 \u90b9\u5609\u8574\u2640 \u5de6\u5929\u59ff\u2640 \u5de6\u7fbd\u5e0c\u2640 \u91d1\u5723\u6db5\u2642\";\r\n    \r\n    const items = rawData.split(' ').map(item => {\r\n        const name = item.slice(0, -1);\r\n        return { \r\n            name: name, \r\n            gender: item.slice(-1) === '\u2642' ? 'boy' : 'girl',\r\n            isLong: name.length >= 5 \r\n        };\r\n    });\r\n\r\n    \/\/ \u7ecf\u5178\u8212\u5c55 V \u5b57\u659c\u8fb9\u5750\u6807\u77e9\u9635\uff08\u5e95\u90e8\u7b2c7\u884c\u8c03\u6574\u4e3a\u5de6\u53f3\u4e24\u4e2a\uff0c\u6700\u5e95\u90e8\u5c16\u7aef\u7531\u6570\u7ec4\u6700\u540e\u4e00\u4e2a\u72ec\u7acb\u540d\u5b57\u843d\u5165 col:9, row:7\uff09\r\n    let vCoordinates = [\r\n        {row:1, col:1}, {row:1, col:2}, {row:1, col:16}, {row:1, col:17},\r\n        {row:2, col:2}, {row:2, col:3}, {row:2, col:15}, {row:2, col:16},\r\n        {row:3, col:4}, {row:3, col:5}, {row:3, col:13}, {row:3, col:14},\r\n        {row:4, col:6}, {row:4, col:7}, {row:4, col:11}, {row:4, col:12},\r\n        {row:5, col:8}, {row:5, col:9}, {row:5, col:10}, \r\n        {row:6, col:8}, {row:6, col:9}, {row:6, col:10},\r\n        \/\/ \u7b2c7\u884c\u5e95\u90e8\uff1a\u6539\u4e3a\u5de6\u53f3\u4e24\u4e2a\uff08\u79fb\u9664\u4e86\u4e2d\u95f4\u7684\u4e00\u4e2a\uff0c\u7559\u7ed9\u6700\u540e\u4e00\u4e2a\u540d\u5b57\u72ec\u5360\u5c16\u7aef\uff09\r\n        {row:7, col:8}, {row:7, col:10},\r\n\r\n        {row:1, col:3}, {row:1, col:15},\r\n        {row:2, col:3}, {row:2, col:4}, {row:2, col:14}, {row:2, col:15},\r\n        {row:3, col:3}, {row:3, col:6}, {row:3, col:12}, {row:3, col:15},\r\n        {row:4, col:5}, {row:4, col:8}, {row:4, col:10}, {row:4, col:13},\r\n        {row:5, col:6}, {row:5, col:7}, {row:5, col:11}, {row:5, col:12},\r\n        {row:6, col:6}, {row:6, col:7}, {row:6, col:11}, {row:6, col:12},\r\n        {row:7, col:7}, {row:7, col:11},\r\n        {row:3, col:7}, {row:3, col:11},\r\n        {row:4, col:9},\r\n        \/\/ \u6700\u540e\u4e00\u4e2a\u540d\u5b57\u4e13\u5c5e\u843d\u811a\u70b9\uff1aV \u5b57\u6700\u5e95\u90e8\u7684\u7edd\u5bf9\u4e2d\u5fc3\uff08\u7b2c7\u884c\uff0c\u7b2c9\u5217\uff09\r\n        {row:7, col:9}\r\n    ];\r\n\r\n    let studentNodes = []; \r\n    let studentsMap = [];\r\n    let isPicking = false;\r\n\r\n    function initSystem() {\r\n        const gridContainer = document.getElementById('v-five-container');\r\n        const pickBtn = document.getElementById('v-pick-btn');\r\n        const resultDisplay = document.getElementById('v-result-display');\r\n        \r\n        if (!gridContainer || !pickBtn || gridContainer.innerHTML !== \"\") return; \r\n\r\n        let renderQueue = [];\r\n        let totalCount = Math.min(items.length, vCoordinates.length);\r\n        for(let i = 0; i < totalCount; i++) {\r\n            renderQueue.push({ student: items[i], coord: vCoordinates[i] });\r\n        }\r\n\r\n        renderQueue.forEach((item, index) => {\r\n            const cell = document.createElement('div');\r\n            cell.className = `name-cell ${item.student.gender} ${item.student.isLong ? 'long-name' : ''}`;\r\n            cell.textContent = item.student.name;\r\n            cell.dataset.index = index;\r\n            \r\n            cell.style.gridRow = item.coord.row;\r\n            cell.style.gridColumn = item.coord.col;\r\n\r\n            studentsMap.push(item.student);\r\n            studentNodes.push(cell);\r\n            gridContainer.appendChild(cell);\r\n        });\r\n\r\n        pickBtn.addEventListener('click', function() {\r\n            if (isPicking) return;\r\n            isPicking = true;\r\n            pickBtn.disabled = true;\r\n            \r\n            resultDisplay.style.color = '#4caf50';\r\n            studentNodes.forEach(node => node.classList.remove('selected', 'active'));\r\n            \r\n            let jumps = 0;\r\n            const totalSteps = 35 + Math.floor(Math.random() * 15); \r\n            let currentIndex = -1;\r\n\r\n            function jumpStep() {\r\n                if (currentIndex !== -1 && studentNodes[currentIndex]) {\r\n                    studentNodes[currentIndex].classList.remove('active');\r\n                }\r\n                \r\n                let nextIndex;\r\n                do {\r\n                    nextIndex = Math.floor(Math.random() * studentNodes.length);\r\n                } while (nextIndex === currentIndex && studentNodes.length > 1);\r\n                \r\n                currentIndex = nextIndex;\r\n                \r\n                if (studentNodes[currentIndex]) {\r\n                    studentNodes[currentIndex].classList.add('active');\r\n                    resultDisplay.textContent = studentsMap[currentIndex].name;\r\n                }\r\n                \r\n                jumps++;\r\n                \r\n                if (jumps < totalSteps) {\r\n                    let currentSpeed = 40;\r\n                    if (jumps > totalSteps * 0.5) currentSpeed = 80;\r\n                    if (jumps > totalSteps * 0.75) currentSpeed = 150;\r\n                    if (jumps > totalSteps * 0.9) currentSpeed = 250;\r\n                    \r\n                    setTimeout(jumpStep, currentSpeed);\r\n                } else {\r\n                    if (studentNodes[currentIndex]) {\r\n                        studentNodes[currentIndex].classList.remove('active');\r\n                        studentNodes[currentIndex].classList.add('selected');\r\n                        const finalStudent = studentsMap[currentIndex];\r\n                        \r\n                        resultDisplay.style.color = '#4caf50';\r\n                        resultDisplay.innerHTML = `${finalStudent.name} <span style=\"font-size:1.4rem; color:#81c784;\">(${finalStudent.gender === 'boy' ? '\u2642' : '\u2640'})<\/span>`;\r\n                    }\r\n                    \r\n                    isPicking = false;\r\n                    pickBtn.disabled = false;\r\n                    pickBtn.textContent = \"\u4ee5\u5df1\u4e3a\u5e08\";\r\n                }\r\n            }\r\n\r\n            jumpStep();\r\n        });\r\n    }\r\n\r\n    if (document.readyState === 'loading') {\r\n        document.addEventListener('DOMContentLoaded', initSystem);\r\n    } else {\r\n        initSystem();\r\n    }\r\n})();\r\n<\/script>\r\n<\/div>\r\n\r\n<blockquote class=\"wp-embedded-content\" data-secret=\"Jill8tBIbP\"><a href=\"https:\/\/www.qiusir.com\/?p=49059\">NEYC-2610<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"\u300a NEYC-2610 \u300b\u2014\u6c42\u5e08\u5f97\u6559\u80b2\u5b9e\u9a8c\u5ba4\" src=\"https:\/\/www.qiusir.com\/?p=49059&amp;embed=true#?secret=Z9qGiJwq61#?secret=Jill8tBIbP\" data-secret=\"Jill8tBIbP\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>","protected":false},"excerpt":{"rendered":"<p>5 \u6c42\u5e08\u5f97 \u4ee5\u5df1\u4e3a\u5e08 NEYC-2610<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[2,13],"tags":[259,14,252],"class_list":["post-48969","post","type-post","status-publish","format-image","hentry","category-team","category-miniblog","tag-class","tag-neyc","tag-students","post_format-post-format-image"],"_links":{"self":[{"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/posts\/48969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=48969"}],"version-history":[{"count":52,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/posts\/48969\/revisions"}],"predecessor-version":[{"id":49469,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/posts\/48969\/revisions\/49469"}],"wp:attachment":[{"href":"https:\/\/www.qiusir.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=48969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=48969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=48969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}