\u968f\u673a\u98df\u7269\u9009\u62e9\u5668<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n \n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#FF6B35', \/\/ \u98df\u7269\u4e3b\u9898\u8272-\u6a59\u8272\n secondary: '#4ECDC4', \/\/ \u8f85\u52a9\u8272-\u9752\u8272\n accent: '#FFD166', \/\/ \u5f3a\u8c03\u8272-\u9ec4\u8272\n dark: '#292F36', \/\/ \u6df1\u8272\n light: '#F7FFF7', \/\/ \u6d45\u8272\n },\n fontFamily: {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n },\n animation: {\n 'bounce-random': 'bounce 0.3s infinite alternate',\n 'pop-in': 'popIn 0.5s ease-out forwards',\n },\n keyframes: {\n popIn: {\n '0%': { transform: 'scale(0.8)', opacity: '0' },\n '70%': { transform: 'scale(1.1)' },\n '100%': { transform: 'scale(1)', opacity: '1' },\n }\n }\n },\n }\n }\n <\/script>\n \n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.2);\n }\n .bg-gradient-food {\n background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);\n }\n .food-item {\n @apply px-4 py-2 rounded-full bg-white\/90 backdrop-blur-sm shadow-md transition-all duration-300 hover:shadow-lg hover:scale-105;\n }\n .food-item-active {\n @apply bg-primary text-white shadow-lg scale-110;\n }\n .btn-primary {\n @apply px-8 py-3 rounded-full bg-primary text-white font-bold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-primary\/50;\n }\n .btn-secondary {\n @apply px-8 py-3 rounded-full bg-white text-primary font-bold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-primary\/50;\n }\n }\n <\/style>\n<\/head>\n\n<body class=\"bg-light min-h-screen flex flex-col overflow-hidden\">\n \n \n \n \n <div class=\"flex-1 flex flex-col items-center justify-center p-4 md:p-8 relative\">\n \n <div class=\"text-center mb-12 animate-pop-in\">\n <h1 class=\"text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark text-shadow-lg mb-2\">\n \u968f\u673a\u98df\u7269\u9009\u62e9\u5668\n <\/h1>\n <p class=\"text-[clamp(1rem,2vw,1.25rem)] text-gray-600 max-w-2xl mx-auto\">\n \u70b9\u51fb\u5f00\u59cb\u6309\u94ae\uff0c\u8ba9\u7cfb\u7edf\u968f\u673a\u8df3\u52a8\u98df\u7269\u540d\u79f0\uff0c\u518d\u6b21\u70b9\u51fb\u505c\u6b62\uff0c\u9009\u62e9\u4f60\u7684\u7f8e\u98df\uff01\n <\/p>\n <\/div>\n \n \n <div id=\"food-container\" class=\"w-full max-w-4xl h-[300px] md:h-[350px] bg-white\/80 backdrop-blur-md rounded-2xl shadow-xl flex flex-col items-center justify-center p-6 relative overflow-hidden mb-10 border border-gray-100\">\n \n <div class=\"absolute top-0 right-0 w-32 h-32 bg-primary\/10 rounded-bl-full\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-24 h-24 bg-secondary\/10 rounded-tr-full\"><\/div>\n \n \n <div id=\"food-display\" class=\"text-[clamp(2.5rem,8vw,4rem)] font-bold text-primary text-shadow transition-all duration-300\">\n \u51c6\u5907\u5f00\u59cb\n <\/div>\n \n \n <div id=\"status-indicator\" class=\"mt-6 text-gray-500 text-lg\">\n <i class=\"fa fa-info-circle mr-2\"><\/i> \u70b9\u51fb\u4e0b\u65b9\u6309\u94ae\u5f00\u59cb\n <\/div>\n <\/div>\n \n \n <div class=\"flex flex-wrap gap-4 justify-center mt-4 animate-pop-in\" style=\"animation-delay: 0.2s\">\n <button id=\"control-btn\" class=\"btn-primary flex items-center gap-2\">\n <i class=\"fa fa-play\"><\/i>\n <span>\u5f00\u59cb<\/span>\n <\/button>\n <button id=\"reset-btn\" class=\"btn-secondary flex items-center gap-2\">\n <i class=\"fa fa-refresh\"><\/i>\n <span>\u91cd\u7f6e<\/span>\n <\/button>\n <\/div>\n \n \n <div id=\"history-container\" class=\"w-full max-w-4xl mt-10 animate-pop-in\" style=\"animation-delay: 0.4s\">\n <h3 class=\"text-lg font-semibold text-gray-700 mb-3 flex items-center\">\n <i class=\"fa fa-history mr-2 text-primary\"><\/i> \u6700\u8fd1\u9009\u62e9\n <\/h3>\n <div id=\"history-list\" class=\"flex flex-wrap gap-2\">\n \n <span class=\"text-gray-400 italic\">\u6682\u65e0\u8bb0\u5f55<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n \n \n \n \n <div class=\"fixed -top-20 -right-20 w-64 h-64 bg-accent\/10 rounded-full blur-3xl\"><\/div>\n <div class=\"fixed -bottom-32 -left-32 w-96 h-96 bg-primary\/10 rounded-full blur-3xl\"><\/div>\n\n <script>\n \/\/ \u98df\u7269\u540d\u79f0\u6570\u7ec4\n const foodNames = [\n \"\u6c49\u5821\", \"\u62ab\u8428\", \"\u5bff\u53f8\", \"\u725b\u6392\", \"\u706b\u9505\", \"\u70e4\u8089\", \"\u62c9\u9762\", \"\u9ebb\u8fa3\u70eb\", \"\u70b8\u9e21\", \"\u70e4\u9c7c\",\n \"\u6c99\u62c9\", \"\u4e09\u660e\u6cbb\", \" tacos\", \"\u610f\u9762\", \"\u7092\u996d\", \"\u997a\u5b50\", \"\u9762\u6761\", \"\u5bff\u53f8\u5377\", \"\u70e4\u8089\u4e32\", \"\u70e4\u80a0\",\n \"\u6625\u5377\", \"\u5305\u5b50\", \"\u9992\u5934\", \"\u6cb9\u6761\", \"\u8c46\u6d46\", \"\u714e\u997c\", \"\u7ca5\", \"\u7c73\u996d\", \"\u9762\u5305\", \"\u86cb\u7cd5\",\n \"\u51b0\u6dc7\u6dcb\", \"\u5de7\u514b\u529b\", \"\u6c34\u679c\u6c99\u62c9\", \"\u9178\u5976\", \"\u679c\u6c41\", \"\u5976\u8336\", \"\u5496\u5561\", \"\u8336\", \"\u53ef\u4e50\", \"\u96ea\u78a7\",\n \"\u85af\u7247\", \"\u575a\u679c\", \"\u997c\u5e72\", \"\u7cd6\u679c\", \"\u5de7\u514b\u529b\", \"\u6c49\u5821\u5305\", \"\u85af\u6761\", \"\u70b8\u9e21\u5757\", \"\u70ed\u72d7\", \"\u4e09\u660e\u6cbb\"\n ];\n \n \/\/ DOM\u5143\u7d20\n const controlBtn = document.getElementById('control-btn');\n const resetBtn = document.getElementById('reset-btn');\n const foodDisplay = document.getElementById('food-display');\n const statusIndicator = document.getElementById('status-indicator');\n const historyList = document.getElementById('history-list');\n \n \/\/ \u72b6\u6001\u53d8\u91cf\n let isRunning = false;\n let animationInterval;\n let selectedFoods = [];\n \n \/\/ \u968f\u673a\u83b7\u53d6\u98df\u7269\u540d\u79f0\n function getRandomFood() {\n const randomIndex = Math.floor(Math.random() * foodNames.length);\n return foodNames[randomIndex];\n }\n \n \/\/ \u66f4\u65b0\u98df\u7269\u663e\u793a\n function updateFoodDisplay() {\n const randomFood = getRandomFood();\n foodDisplay.textContent = randomFood;\n \n \/\/ \u968f\u673a\u989c\u8272\u6548\u679c\n const hue = Math.floor(Math.random() * 360);\n foodDisplay.style.color = `hsl(${hue}, 80%, 50%)`;\n \n \/\/ \u968f\u673a\u5927\u5c0f\u6548\u679c\n const scale = 0.9 + Math.random() * 0.2;\n foodDisplay.style.transform = `scale(${scale})`;\n }\n \n \/\/ \u63a7\u5236\u6309\u94ae\u70b9\u51fb\u4e8b\u4ef6\n controlBtn.addEventListener('click', () => {\n if (isRunning) {\n \/\/ \u505c\u6b62\u72b6\u6001\n clearInterval(animationInterval);\n controlBtn.innerHTML = '<i class=\"fa fa-play\"><\/i> <span>\u5f00\u59cb<\/span>';\n controlBtn.classList.remove('btn-secondary');\n controlBtn.classList.add('btn-primary');\n \n \/\/ \u8bb0\u5f55\u9009\u4e2d\u7684\u98df\u7269\n const selectedFood = foodDisplay.textContent;\n selectedFoods.unshift(selectedFood);\n if (selectedFoods.length > 8) {\n selectedFoods.pop();\n }\n \n \/\/ \u66f4\u65b0\u5386\u53f2\u8bb0\u5f55\n updateHistoryList();\n \n \/\/ \u66f4\u65b0\u72b6\u6001\u63d0\u793a\n statusIndicator.innerHTML = `<i class=\"fa fa-check-circle mr-2 text-green-500\"><\/i> \u5df2\u9009\u4e2d: <span class=\"font-bold text-primary\">${selectedFood}<\/span>`;\n \n \/\/ \u6dfb\u52a0\u9009\u4e2d\u52a8\u753b\n foodDisplay.classList.add('food-item-active');\n setTimeout(() => {\n foodDisplay.classList.remove('food-item-active');\n }, 500);\n \n } else {\n \/\/ \u5f00\u59cb\u72b6\u6001\n animationInterval = setInterval(updateFoodDisplay, 100);\n controlBtn.innerHTML = '<i class=\"fa fa-stop\"><\/i> <span>\u505c\u6b62<\/span>';\n controlBtn.classList.remove('btn-primary');\n controlBtn.classList.add('btn-secondary');\n \n \/\/ \u66f4\u65b0\u72b6\u6001\u63d0\u793a\n statusIndicator.innerHTML = '<i class=\"fa fa-spinner fa-spin mr-2\"><\/i> \u968f\u673a\u9009\u62e9\u4e2d...';\n \n \/\/ \u79fb\u9664\u9009\u4e2d\u6837\u5f0f\n foodDisplay.classList.remove('food-item-active');\n }\n \n isRunning = !isRunning;\n });\n \n \/\/ \u91cd\u7f6e\u6309\u94ae\u70b9\u51fb\u4e8b\u4ef6\n resetBtn.addEventListener('click', () => {\n \/\/ \u505c\u6b62\u52a8\u753b\n if (isRunning) {\n clearInterval(animationInterval);\n isRunning = false;\n controlBtn.innerHTML = '<i class=\"fa fa-play\"><\/i> <span>\u5f00\u59cb<\/span>';\n controlBtn.classList.remove('btn-secondary');\n controlBtn.classList.add('btn-primary');\n }\n \n \/\/ \u91cd\u7f6e\u663e\u793a\n foodDisplay.textContent = '\u51c6\u5907\u5f00\u59cb';\n foodDisplay.style.color = '#FF6B35';\n foodDisplay.style.transform = 'scale(1)';\n \n \/\/ \u91cd\u7f6e\u72b6\u6001\u63d0\u793a\n statusIndicator.innerHTML = '<i class=\"fa fa-info-circle mr-2\"><\/i> \u70b9\u51fb\u4e0b\u65b9\u6309\u94ae\u5f00\u59cb';\n \n \/\/ \u6e05\u7a7a\u5386\u53f2\u8bb0\u5f55\n selectedFoods = [];\n updateHistoryList();\n });\n \n \/\/ \u66f4\u65b0\u5386\u53f2\u8bb0\u5f55\u5217\u8868\n function updateHistoryList() {\n historyList.innerHTML = '';\n \n if (selectedFoods.length === 0) {\n historyList.innerHTML = '<span class=\"text-gray-400 italic\">\u6682\u65e0\u8bb0\u5f55<\/span>';\n return;\n }\n \n selectedFoods.forEach((food, index) => {\n const foodTag = document.createElement('span');\n foodTag.className = 'px-3 py-1 bg-gray-100 rounded-full text-gray-700 text-sm flex items-center';\n foodTag.innerHTML = `\n <span>${food}<\/span>\n <button class=\"ml-1 text-gray-400 hover:text-red-500 transition-colors\" \n onclick=\"removeHistoryItem(${index})\">\n <i class=\"fa fa-times-circle\"><\/i>\n <\/button>\n `;\n historyList.appendChild(foodTag);\n });\n }\n \n \/\/ \u79fb\u9664\u5386\u53f2\u8bb0\u5f55\u9879\n window.removeHistoryItem = function(index) {\n selectedFoods.splice(index, 1);\n updateHistoryList();\n };\n \n \/\/ \u9875\u9762\u52a0\u8f7d\u65f6\u9ed8\u8ba4\u6700\u5927\u5316\n window.addEventListener('load', () => {\n if (screenfull.isEnabled) {\n screenfull.request();\n }\n });\n \n \/\/ \u5168\u5c4f\u5207\u6362\u652f\u6301\n document.addEventListener('keydown', (e) => {\n if (e.key === 'F11') {\n e.preventDefault();\n if (screenfull.isEnabled) {\n screenfull.toggle();\n }\n }\n });\n <\/script>\n \n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/screenfull@6.0.2\/dist\/screenfull.min.js\"><\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u968f\u673a\u98df\u7269\u9009\u62e9\u5668 \u968f\u673a\u98df\u7269\u9009\u62e9\u5668 \u70b9\u51fb\u5f00\u59cb\u6309\u94ae\uff0c\u8ba9\u7cfb\u7edf\u968f\u673a\u8df3\u52a8\u98df\u7269\u540d\u79f0\uff0c\u518d\u6b21\u70b9\u51fb\u505c\u6b62\uff0c\u9009\u62e9\u4f60\u7684\u7f8e\u98df\uff01 \u51c6\u5907\u5f00\u59cb \u70b9\u51fb\u4e0b\u65b9\u6309\u94ae\u5f00\u59cb \u5f00\u59cb \u91cd\u7f6e \u6700\u8fd1\u9009\u62e9 \u6682\u65e0\u8bb0\u5f55<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"pages\/full.php","meta":{"footnotes":""},"class_list":["post-72","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.splwl.com\/index.php?rest_route=\/wp\/v2\/pages\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.splwl.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.splwl.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.splwl.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.splwl.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=72"}],"version-history":[{"count":7,"href":"https:\/\/www.splwl.com\/index.php?rest_route=\/wp\/v2\/pages\/72\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/www.splwl.com\/index.php?rest_route=\/wp\/v2\/pages\/72\/revisions\/83"}],"wp:attachment":[{"href":"https:\/\/www.splwl.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":72,"date":"2025-12-02T00:58:46","date_gmt":"2025-12-01T16:58:46","guid":{"rendered":"https:\/\/www.splwl.com\/?page_id=72"},"modified":"2025-12-02T01:32:37","modified_gmt":"2025-12-01T17:32:37","slug":"%e5%90%83%e4%bb%80%e4%b9%88","status":"publish","type":"page","link":"https:\/\/www.splwl.com\/?page_id=72","title":{"rendered":"\u5403\u4ec0\u4e48"},"content":{"rendered":"\n\n\n\n \n \n \u968f\u673a\u98df\u7269\u9009\u62e9\u5668<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n \n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#FF6B35', \/\/ \u98df\u7269\u4e3b\u9898\u8272-\u6a59\u8272\n secondary: '#4ECDC4', \/\/ \u8f85\u52a9\u8272-\u9752\u8272\n accent: '#FFD166', \/\/ \u5f3a\u8c03\u8272-\u9ec4\u8272\n dark: '#292F36', \/\/ \u6df1\u8272\n light: '#F7FFF7', \/\/ \u6d45\u8272\n },\n fontFamily: {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n },\n animation: {\n 'bounce-random': 'bounce 0.3s infinite alternate',\n 'pop-in': 'popIn 0.5s ease-out forwards',\n },\n keyframes: {\n popIn: {\n '0%': { transform: 'scale(0.8)', opacity: '0' },\n '70%': { transform: 'scale(1.1)' },\n '100%': { transform: 'scale(1)', opacity: '1' },\n }\n }\n },\n }\n }\n <\/script>\n \n \n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n .text-shadow-lg {\n text-shadow: 0 4px 8px rgba(0,0,0,0.2);\n }\n .bg-gradient-food {\n background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);\n }\n .food-item {\n @apply px-4 py-2 rounded-full bg-white\/90 backdrop-blur-sm shadow-md transition-all duration-300 hover:shadow-lg hover:scale-105;\n }\n .food-item-active {\n @apply bg-primary text-white shadow-lg scale-110;\n }\n .btn-primary {\n @apply px-8 py-3 rounded-full bg-primary text-white font-bold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-primary\/50;\n }\n .btn-secondary {\n @apply px-8 py-3 rounded-full bg-white text-primary font-bold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-primary\/50;\n }\n }\n <\/style>\n<\/head>\n\n<body class=\"bg-light min-h-screen flex flex-col overflow-hidden\">\n \n \n \n \n <div class=\"flex-1 flex flex-col items-center justify-center p-4 md:p-8 relative\">\n \n <div class=\"text-center mb-12 animate-pop-in\">\n <h1 class=\"text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark text-shadow-lg mb-2\">\n \u968f\u673a\u98df\u7269\u9009\u62e9\u5668\n <\/h1>\n <p class=\"text-[clamp(1rem,2vw,1.25rem)] text-gray-600 max-w-2xl mx-auto\">\n \u70b9\u51fb\u5f00\u59cb\u6309\u94ae\uff0c\u8ba9\u7cfb\u7edf\u968f\u673a\u8df3\u52a8\u98df\u7269\u540d\u79f0\uff0c\u518d\u6b21\u70b9\u51fb\u505c\u6b62\uff0c\u9009\u62e9\u4f60\u7684\u7f8e\u98df\uff01\n <\/p>\n <\/div>\n \n \n <div id=\"food-container\" class=\"w-full max-w-4xl h-[300px] md:h-[350px] bg-white\/80 backdrop-blur-md rounded-2xl shadow-xl flex flex-col items-center justify-center p-6 relative overflow-hidden mb-10 border border-gray-100\">\n \n <div class=\"absolute top-0 right-0 w-32 h-32 bg-primary\/10 rounded-bl-full\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-24 h-24 bg-secondary\/10 rounded-tr-full\"><\/div>\n \n \n <div id=\"food-display\" class=\"text-[clamp(2.5rem,8vw,4rem)] font-bold text-primary text-shadow transition-all duration-300\">\n \u51c6\u5907\u5f00\u59cb\n <\/div>\n \n \n <div id=\"status-indicator\" class=\"mt-6 text-gray-500 text-lg\">\n <i class=\"fa fa-info-circle mr-2\"><\/i> \u70b9\u51fb\u4e0b\u65b9\u6309\u94ae\u5f00\u59cb\n <\/div>\n <\/div>\n \n \n <div class=\"flex flex-wrap gap-4 justify-center mt-4 animate-pop-in\" style=\"animation-delay: 0.2s\">\n <button id=\"control-btn\" class=\"btn-primary flex items-center gap-2\">\n <i class=\"fa fa-play\"><\/i>\n <span>\u5f00\u59cb<\/span>\n <\/button>\n <button id=\"reset-btn\" class=\"btn-secondary flex items-center gap-2\">\n <i class=\"fa fa-refresh\"><\/i>\n <span>\u91cd\u7f6e<\/span>\n <\/button>\n <\/div>\n \n \n <div id=\"history-container\" class=\"w-full max-w-4xl mt-10 animate-pop-in\" style=\"animation-delay: 0.4s\">\n <h3 class=\"text-lg font-semibold text-gray-700 mb-3 flex items-center\">\n <i class=\"fa fa-history mr-2 text-primary\"><\/i> \u6700\u8fd1\u9009\u62e9\n <\/h3>\n <div id=\"history-list\" class=\"flex flex-wrap gap-2\">\n \n <span class=\"text-gray-400 italic\">\u6682\u65e0\u8bb0\u5f55<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n \n \n \n \n <div class=\"fixed -top-20 -right-20 w-64 h-64 bg-accent\/10 rounded-full blur-3xl\"><\/div>\n <div class=\"fixed -bottom-32 -left-32 w-96 h-96 bg-primary\/10 rounded-full blur-3xl\"><\/div>\n\n <script>\n \/\/ \u98df\u7269\u540d\u79f0\u6570\u7ec4\n const foodNames = [\n \"\u6c49\u5821\", \"\u62ab\u8428\", \"\u5bff\u53f8\", \"\u725b\u6392\", \"\u706b\u9505\", \"\u70e4\u8089\", \"\u62c9\u9762\", \"\u9ebb\u8fa3\u70eb\", \"\u70b8\u9e21\", \"\u70e4\u9c7c\",\n \"\u6c99\u62c9\", \"\u4e09\u660e\u6cbb\", \" tacos\", \"\u610f\u9762\", \"\u7092\u996d\", \"\u997a\u5b50\", \"\u9762\u6761\", \"\u5bff\u53f8\u5377\", \"\u70e4\u8089\u4e32\", \"\u70e4\u80a0\",\n \"\u6625\u5377\", \"\u5305\u5b50\", \"\u9992\u5934\", \"\u6cb9\u6761\", \"\u8c46\u6d46\", \"\u714e\u997c\", \"\u7ca5\", \"\u7c73\u996d\", \"\u9762\u5305\", \"\u86cb\u7cd5\",\n \"\u51b0\u6dc7\u6dcb\", \"\u5de7\u514b\u529b\", \"\u6c34\u679c\u6c99\u62c9\", \"\u9178\u5976\", \"\u679c\u6c41\", \"\u5976\u8336\", \"\u5496\u5561\", \"\u8336\", \"\u53ef\u4e50\", \"\u96ea\u78a7\",\n \"\u85af\u7247\", \"\u575a\u679c\", \"\u997c\u5e72\", \"\u7cd6\u679c\", \"\u5de7\u514b\u529b\", \"\u6c49\u5821\u5305\", \"\u85af\u6761\", \"\u70b8\u9e21\u5757\", \"\u70ed\u72d7\", \"\u4e09\u660e\u6cbb\"\n ];\n \n \/\/ DOM\u5143\u7d20\n const controlBtn = document.getElementById('control-btn');\n const resetBtn = document.getElementById('reset-btn');\n const foodDisplay = document.getElementById('food-display');\n const statusIndicator = document.getElementById('status-indicator');\n const historyList = document.getElementById('history-list');\n \n \/\/ \u72b6\u6001\u53d8\u91cf\n let isRunning = false;\n let animationInterval;\n let selectedFoods = [];\n \n \/\/ \u968f\u673a\u83b7\u53d6\u98df\u7269\u540d\u79f0\n function getRandomFood() {\n const randomIndex = Math.floor(Math.random() * foodNames.length);\n return foodNames[randomIndex];\n }\n \n \/\/ \u66f4\u65b0\u98df\u7269\u663e\u793a\n function updateFoodDisplay() {\n const randomFood = getRandomFood();\n foodDisplay.textContent = randomFood;\n \n \/\/ \u968f\u673a\u989c\u8272\u6548\u679c\n const hue = Math.floor(Math.random() * 360);\n foodDisplay.style.color = `hsl(${hue}, 80%, 50%)`;\n \n \/\/ \u968f\u673a\u5927\u5c0f\u6548\u679c\n const scale = 0.9 + Math.random() * 0.2;\n foodDisplay.style.transform = `scale(${scale})`;\n }\n \n \/\/ \u63a7\u5236\u6309\u94ae\u70b9\u51fb\u4e8b\u4ef6\n controlBtn.addEventListener('click', () => {\n if (isRunning) {\n \/\/ \u505c\u6b62\u72b6\u6001\n clearInterval(animationInterval);\n controlBtn.innerHTML = '<i class=\"fa fa-play\"><\/i> <span>\u5f00\u59cb<\/span>';\n controlBtn.classList.remove('btn-secondary');\n controlBtn.classList.add('btn-primary');\n \n \/\/ \u8bb0\u5f55\u9009\u4e2d\u7684\u98df\u7269\n const selectedFood = foodDisplay.textContent;\n selectedFoods.unshift(selectedFood);\n if (selectedFoods.length > 8) {\n selectedFoods.pop();\n }\n \n \/\/ \u66f4\u65b0\u5386\u53f2\u8bb0\u5f55\n updateHistoryList();\n \n \/\/ \u66f4\u65b0\u72b6\u6001\u63d0\u793a\n statusIndicator.innerHTML = `<i class=\"fa fa-check-circle mr-2 text-green-500\"><\/i> \u5df2\u9009\u4e2d: <span class=\"font-bold text-primary\">${selectedFood}<\/span>`;\n \n \/\/ \u6dfb\u52a0\u9009\u4e2d\u52a8\u753b\n foodDisplay.classList.add('food-item-active');\n setTimeout(() => {\n foodDisplay.classList.remove('food-item-active');\n }, 500);\n \n } else {\n \/\/ \u5f00\u59cb\u72b6\u6001\n animationInterval = setInterval(updateFoodDisplay, 100);\n controlBtn.innerHTML = '<i class=\"fa fa-stop\"><\/i> <span>\u505c\u6b62<\/span>';\n controlBtn.classList.remove('btn-primary');\n controlBtn.classList.add('btn-secondary');\n \n \/\/ \u66f4\u65b0\u72b6\u6001\u63d0\u793a\n statusIndicator.innerHTML = '<i class=\"fa fa-spinner fa-spin mr-2\"><\/i> \u968f\u673a\u9009\u62e9\u4e2d...';\n \n \/\/ \u79fb\u9664\u9009\u4e2d\u6837\u5f0f\n foodDisplay.classList.remove('food-item-active');\n }\n \n isRunning = !isRunning;\n });\n \n \/\/ \u91cd\u7f6e\u6309\u94ae\u70b9\u51fb\u4e8b\u4ef6\n resetBtn.addEventListener('click', () => {\n \/\/ \u505c\u6b62\u52a8\u753b\n if (isRunning) {\n clearInterval(animationInterval);\n isRunning = false;\n controlBtn.innerHTML = '<i class=\"fa fa-play\"><\/i> <span>\u5f00\u59cb<\/span>';\n controlBtn.classList.remove('btn-secondary');\n controlBtn.classList.add('btn-primary');\n }\n \n \/\/ \u91cd\u7f6e\u663e\u793a\n foodDisplay.textContent = '\u51c6\u5907\u5f00\u59cb';\n foodDisplay.style.color = '#FF6B35';\n foodDisplay.style.transform = 'scale(1)';\n \n \/\/ \u91cd\u7f6e\u72b6\u6001\u63d0\u793a\n statusIndicator.innerHTML = '<i class=\"fa fa-info-circle mr-2\"><\/i> \u70b9\u51fb\u4e0b\u65b9\u6309\u94ae\u5f00\u59cb';\n \n \/\/ \u6e05\u7a7a\u5386\u53f2\u8bb0\u5f55\n selectedFoods = [];\n updateHistoryList();\n });\n \n \/\/ \u66f4\u65b0\u5386\u53f2\u8bb0\u5f55\u5217\u8868\n function updateHistoryList() {\n historyList.innerHTML = '';\n \n if (selectedFoods.length === 0) {\n historyList.innerHTML = '<span class=\"text-gray-400 italic\">\u6682\u65e0\u8bb0\u5f55<\/span>';\n return;\n }\n \n selectedFoods.forEach((food, index) => {\n const foodTag = document.createElement('span');\n foodTag.className = 'px-3 py-1 bg-gray-100 rounded-full text-gray-700 text-sm flex items-center';\n foodTag.innerHTML = `\n <span>${food}<\/span>\n <button class=\"ml-1 text-gray-400 hover:text-red-500 transition-colors\" \n onclick=\"removeHistoryItem(${index})\">\n <i class=\"fa fa-times-circle\"><\/i>\n <\/button>\n `;\n historyList.appendChild(foodTag);\n });\n }\n \n \/\/ \u79fb\u9664\u5386\u53f2\u8bb0\u5f55\u9879\n window.removeHistoryItem = function(index) {\n selectedFoods.splice(index, 1);\n updateHistoryList();\n };\n \n \/\/ \u9875\u9762\u52a0\u8f7d\u65f6\u9ed8\u8ba4\u6700\u5927\u5316\n window.addEventListener('load', () => {\n if (screenfull.isEnabled) {\n screenfull.request();\n }\n });\n \n \/\/ \u5168\u5c4f\u5207\u6362\u652f\u6301\n document.addEventListener('keydown', (e) => {\n if (e.key === 'F11') {\n e.preventDefault();\n if (screenfull.isEnabled) {\n screenfull.toggle();\n }\n }\n });\n <\/script>\n \n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/screenfull@6.0.2\/dist\/screenfull.min.js\"><\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u968f\u673a\u98df\u7269\u9009\u62e9\u5668 \u968f\u673a\u98df\u7269\u9009\u62e9\u5668 \u70b9\u51fb\u5f00\u59cb\u6309\u94ae\uff0c\u8ba9\u7cfb\u7edf\u968f\u673a\u8df3\u52a8\u98df\u7269\u540d\u79f0\uff0c\u518d\u6b21\u70b9\u51fb\u505c\u6b62\uff0c\u9009\u62e9\u4f60\u7684\u7f8e\u98df\uff01 \u51c6\u5907\u5f00\u59cb \u70b9\u51fb\u4e0b\u65b9\u6309\u94ae\u5f00\u59cb \u5f00\u59cb \u91cd\u7f6e \u6700\u8fd1\u9009\u62e9 \u6682\u65e0\u8bb0\u5f55<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"pages\/full.php","meta":{"footnotes":""},"class_list":["post-72","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.splwl.com\/index.php?rest_route=\/wp\/v2\/pages\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.splwl.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.splwl.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.splwl.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.splwl.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=72"}],"version-history":[{"count":7,"href":"https:\/\/www.splwl.com\/index.php?rest_route=\/wp\/v2\/pages\/72\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/www.splwl.com\/index.php?rest_route=\/wp\/v2\/pages\/72\/revisions\/83"}],"wp:attachment":[{"href":"https:\/\/www.splwl.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}