\u03b1\u7c92\u5b50\u6563\u5c04\u5b9e\u9a8c – \u539f\u5b50\u7ed3\u6784\u63a2\u7d22<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, #1a2a6c, #2c3e50);\n color: #fff;\n min-height: 100vh;\n padding: 20px;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n }\n \n header {\n text-align: center;\n padding: 20px 0;\n margin-bottom: 20px;\n background: rgba(0, 0, 0, 0.3);\n border-radius: 15px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(4px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n \n h1 {\n font-size: 2.5rem;\n margin-bottom: 10px;\n color: #4fc3f7;\n text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);\n }\n \n .subtitle {\n font-size: 1.2rem;\n opacity: 0.9;\n }\n \n .content {\n display: flex;\n gap: 20px;\n margin-bottom: 20px;\n }\n \n .control-panel {\n flex: 1;\n background: rgba(0, 0, 0, 0.3);\n border-radius: 15px;\n padding: 25px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(4px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n \n .control-panel h2 {\n color: #81d4fa;\n margin-bottom: 20px;\n text-align: center;\n font-size: 1.8rem;\n }\n \n .control-group {\n margin-bottom: 25px;\n }\n \n .control-group h3 {\n color: #4fc3f7;\n margin-bottom: 15px;\n font-size: 1.3rem;\n }\n \n .slider-container {\n margin-bottom: 15px;\n }\n \n label {\n display: block;\n margin-bottom: 8px;\n font-size: 1.1rem;\n }\n \n input[type=\"range\"] {\n width: 100%;\n height: 10px;\n background: #2c3e50;\n border-radius: 5px;\n outline: none;\n }\n \n .btn-group {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 10px;\n }\n \n button {\n flex: 1;\n min-width: 120px;\n padding: 12px 15px;\n background: linear-gradient(135deg, #2196f3, #0d47a1);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1.1rem;\n font-weight: 600;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n }\n \n button:hover {\n transform: translateY(-3px);\n box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);\n }\n \n button:active {\n transform: translateY(1px);\n }\n \n .btn-reset {\n background: linear-gradient(135deg, #f44336, #b71c1c);\n }\n \n .btn-slow {\n background: linear-gradient(135deg, #ff9800, #e65100);\n }\n \n .animation-area {\n flex: 2;\n background: rgba(0, 0, 0, 0.3);\n border-radius: 15px;\n overflow: hidden;\n position: relative;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(4px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n \n #animation-canvas {\n width: 100%;\n height: 100%;\n display: block;\n }\n \n .legend {\n position: absolute;\n bottom: 20px;\n left: 20px;\n background: rgba(0, 0, 0, 0.6);\n padding: 15px;\n border-radius: 10px;\n font-size: 0.9rem;\n }\n \n .legend-item {\n display: flex;\n align-items: center;\n margin-bottom: 8px;\n }\n \n .legend-color {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n margin-right: 10px;\n }\n \n .nucleus-color {\n background: radial-gradient(circle, #ff5252, #b71c1c);\n }\n \n .alpha-color {\n background: radial-gradient(circle, #4fc3f7, #0288d1);\n }\n \n .electron-color {\n background: radial-gradient(circle, #69f0ae, #00c853);\n }\n \n .knowledge-panel {\n background: rgba(0, 0, 0, 0.3);\n border-radius: 15px;\n padding: 25px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(4px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n \n .knowledge-panel h2 {\n color: #81d4fa;\n margin-bottom: 20px;\n text-align: center;\n font-size: 1.8rem;\n }\n \n .key-points {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n }\n \n .point-card {\n background: rgba(30, 30, 60, 0.5);\n border-radius: 10px;\n padding: 20px;\n transition: transform 0.3s ease;\n }\n \n .point-card:hover {\n transform: translateY(-5px);\n background: rgba(40, 40, 80, 0.6);\n }\n \n .point-card h3 {\n color: #4fc3f7;\n margin-bottom: 10px;\n font-size: 1.3rem;\n }\n \n .point-card p {\n line-height: 1.6;\n font-size: 1.1rem;\n }\n \n .highlight {\n color: #69f0ae;\n font-weight: 600;\n }\n \n @media (max-width: 900px) {\n .content {\n flex-direction: column;\n }\n \n .animation-area {\n min-height: 500px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>\u03b1\u7c92\u5b50\u6563\u5c04\u5b9e\u9a8c<\/h1>\n <p class=\"subtitle\">\u63a2\u7d22\u539f\u5b50\u7ed3\u6784\u7684\u91cc\u7a0b\u7891\u5b9e\u9a8c<\/p>\n <\/header>\n \n <div class=\"content\">\n <div class=\"control-panel\">\n <h2>\u5b9e\u9a8c\u63a7\u5236\u9762\u677f<\/h2>\n \n <div class=\"control-group\">\n <h3>\u5b9e\u9a8c\u53c2\u6570<\/h3>\n \n <div class=\"slider-container\">\n <label for=\"particle-count\">\u03b1\u7c92\u5b50\u6570\u91cf: <span id=\"count-value\">20<\/span><\/label>\n <input type=\"range\" id=\"particle-count\" min=\"5\" max=\"50\" value=\"20\">\n <\/div>\n \n <div class=\"slider-container\">\n <label for=\"particle-speed\">\u03b1\u7c92\u5b50\u901f\u5ea6: <span id=\"speed-value\">\u4e2d\u7b49<\/span><\/label>\n <input type=\"range\" id=\"particle-speed\" min=\"1\" max=\"3\" value=\"2\">\n <\/div>\n \n <div class=\"slider-container\">\n <label for=\"nucleus-size\">\u539f\u5b50\u6838\u5927\u5c0f: <span id=\"size-value\">\u4e2d\u7b49<\/span><\/label>\n <input type=\"range\" id=\"nucleus-size\" min=\"1\" max=\"3\" value=\"2\">\n <\/div>\n <\/div>\n \n <div class=\"control-group\">\n <h3>\u5b9e\u9a8c\u64cd\u4f5c<\/h3>\n <div class=\"btn-group\">\n <button id=\"btn-start\" class=\"btn-start\">\u5f00\u59cb\u5b9e\u9a8c<\/button>\n <button id=\"btn-pause\" class=\"btn-pause\">\u6682\u505c<\/button>\n <button id=\"btn-reset\" class=\"btn-reset\">\u91cd\u7f6e<\/button>\n <button id=\"btn-slow\" class=\"btn-slow\">\u6162\u52a8\u4f5c<\/button>\n <\/div>\n <\/div>\n \n <div class=\"control-group\">\n <h3>\u5b9e\u9a8c\u8bf4\u660e<\/h3>\n <p>\u672c\u52a8\u753b\u6a21\u62df\u4e86\u5362\u745f\u798f\u57281911\u5e74\u8fdb\u884c\u7684\u03b1\u7c92\u5b50\u6563\u5c04\u5b9e\u9a8c\u3002\u901a\u8fc7\u89c2\u5bdf\u5e26\u6b63\u7535\u7684\u03b1\u7c92\u5b50\u4e0e\u91d1\u539f\u5b50\u76f8\u4e92\u4f5c\u7528\u7684\u65b9\u5f0f\uff0c\u5362\u745f\u798f\u63a8\u7ffb\u4e86\u5f53\u65f6\u6d41\u884c\u7684”\u8461\u8404\u5e72\u5e03\u4e01”\u539f\u5b50\u6a21\u578b\uff0c\u63d0\u51fa\u4e86\u539f\u5b50\u6838\u5f0f\u7ed3\u6784\u6a21\u578b\u3002<\/p>\n <\/div>\n <\/div>\n \n <div class=\"animation-area\">\n <canvas id=\"animation-canvas\"><\/canvas>\n <div class=\"legend\">\n <div class=\"legend-item\">\n <div class=\"legend-color nucleus-color\"><\/div>\n <span>\u539f\u5b50\u6838\uff08\u5e26\u6b63\u7535\uff09<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-color alpha-color\"><\/div>\n <span>\u03b1\u7c92\u5b50\uff08\u6c26\u539f\u5b50\u6838\uff09<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-color electron-color\"><\/div>\n <span>\u7535\u5b50\uff08\u5e26\u8d1f\u7535\uff09<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"knowledge-panel\">\n <h2>\u5173\u952e\u77e5\u8bc6\u70b9<\/h2>\n <div class=\"key-points\">\n <div class=\"point-card\">\n <h3>\u5b9e\u9a8c\u80cc\u666f<\/h3>\n <p>\u5728\u5362\u745f\u798f\u5b9e\u9a8c\u4e4b\u524d\uff0c<span class=\"highlight\">J.J.\u6c64\u59c6\u900a<\/span>\u63d0\u51fa\u4e86”\u8461\u8404\u5e72\u5e03\u4e01”\u6a21\u578b\uff0c\u8ba4\u4e3a\u6b63\u7535\u8377\u5747\u5300\u5206\u5e03\u5728\u6574\u4e2a\u539f\u5b50\u4e2d\uff0c\u7535\u5b50\u9576\u5d4c\u5176\u4e2d\u3002<\/p>\n <\/div>\n \n <div class=\"point-card\">\n <h3>\u5b9e\u9a8c\u88c5\u7f6e<\/h3>\n <p>\u4f7f\u7528\u653e\u5c04\u6027\u7269\u8d28\u53d1\u5c04\u03b1\u7c92\u5b50\uff0c\u8ba9\u5b83\u4eec\u7a7f\u8fc7<span class=\"highlight\">\u6781\u8584\u7684\u91d1\u7b94<\/span>\uff08\u4ec5\u51e0\u767e\u4e2a\u539f\u5b50\u539a\uff09\uff0c\u7136\u540e\u7528\u8367\u5149\u5c4f\u68c0\u6d4b\u6563\u5c04\u7684\u7c92\u5b50\u3002<\/p>\n <\/div>\n \n <div class=\"point-card\">\n <h3>\u5b9e\u9a8c\u7ed3\u679c<\/h3>\n <p>\u5927\u591a\u6570\u03b1\u7c92\u5b50\u76f4\u63a5\u7a7f\u8fc7\u91d1\u7b94\uff0c\u5c11\u6570\u53d1\u751f\u8f83\u5927\u89d2\u5ea6\u504f\u8f6c\uff0c\u6781\u5c11\u6570\u88ab<span class=\"highlight\">\u53cd\u5f39\u56de\u6765<\/span>\u3002\u8fd9\u4e0e\u6c64\u59c6\u900a\u6a21\u578b\u7684\u9884\u6d4b\u5b8c\u5168\u4e0d\u7b26\u3002<\/p>\n <\/div>\n \n <div class=\"point-card\">\n <h3>\u5b9e\u9a8c\u7ed3\u8bba<\/h3>\n <p>\u5362\u745f\u798f\u63d0\u51fa<span class=\"highlight\">\u6838\u5f0f\u7ed3\u6784\u6a21\u578b<\/span>\uff1a\u539f\u5b50\u4e2d\u5fc3\u6709\u4e00\u4e2a\u5e26\u6b63\u7535\u7684\u3001\u4f53\u79ef\u5f88\u5c0f\u4f46\u8d28\u91cf\u5f88\u5927\u7684\u539f\u5b50\u6838\uff0c\u7535\u5b50\u5728\u6838\u5916\u7a7a\u95f4\u7ed5\u6838\u8fd0\u52a8\u3002<\/p>\n <\/div>\n \n <div class=\"point-card\">\n <h3>\u91cd\u8981\u610f\u4e49<\/h3>\n <p>\u8be5\u5b9e\u9a8c\u662f\u539f\u5b50\u7269\u7406\u5b66\u53d1\u5c55\u7684\u91cc\u7a0b\u7891\uff0c\u4e3a<span class=\"highlight\">\u91cf\u5b50\u529b\u5b66<\/span>\u548c<span class=\"highlight\">\u6838\u7269\u7406<\/span>\u7684\u53d1\u5c55\u5960\u5b9a\u4e86\u57fa\u7840\uff0c\u5f7b\u5e95\u6539\u53d8\u4e86\u4eba\u7c7b\u5bf9\u5fae\u89c2\u4e16\u754c\u7684\u8ba4\u8bc6\u3002<\/p>\n <\/div>\n \n <div class=\"point-card\">\n <h3>\u73b0\u4ee3\u5e94\u7528<\/h3>\n <p>\u03b1\u7c92\u5b50\u6563\u5c04\u539f\u7406\u5728\u73b0\u4ee3\u79d1\u5b66\u4e2d\u6709\u5e7f\u6cdb\u5e94\u7528\uff0c\u5305\u62ec<span class=\"highlight\">\u6750\u6599\u5206\u6790<\/span>\u3001<span class=\"highlight\">\u6838\u53cd\u5e94\u7814\u7a76<\/span>\u548c<span class=\"highlight\">\u7c92\u5b50\u52a0\u901f\u5668<\/span>\u8bbe\u8ba1\u7b49\u9886\u57df\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u83b7\u53d6Canvas\u5143\u7d20\u548c\u4e0a\u4e0b\u6587\n const canvas = document.getElementById('animation-canvas');\n const ctx = canvas.getContext('2d');\n \n \/\/ \u8bbe\u7f6eCanvas\u5c3a\u5bf8\n function setupCanvas() {\n const container = canvas.parentElement;\n canvas.width = container.clientWidth;\n canvas.height = container.clientHeight;\n }\n \n \/\/ \u521d\u59cb\u5316Canvas\u5c3a\u5bf8\n setupCanvas();\n window.addEventListener('resize', setupCanvas);\n \n \/\/ \u5b9e\u9a8c\u53c2\u6570\n let experimentRunning = false;\n let slowMotion = false;\n let particleCount = 20;\n let particleSpeed = 2; \/\/ 1=\u6162, 2=\u4e2d, 3=\u5feb\n let nucleusSize = 2; \/\/ 1=\u5c0f, 2=\u4e2d, 3=\u5927\n \n \/\/ \u7c92\u5b50\u6570\u7ec4\n let particles = [];\n \n \/\/ \u539f\u5b50\u6838\u5bf9\u8c61\n const nucleus = {\n x: 0,\n y: 0,\n radius: 0,\n charge: 79 \/\/ \u91d1\u539f\u5b50\u7684\u539f\u5b50\u5e8f\u6570\n };\n \n \/\/ \u7535\u5b50\u6570\u7ec4\n let electrons = [];\n \n \/\/ \u521d\u59cb\u5316\u5b9e\u9a8c\n function initExperiment() {\n \/\/ \u8bbe\u7f6e\u539f\u5b50\u6838\u4f4d\u7f6e\u548c\u5927\u5c0f\n nucleus.x = canvas.width * 0.7;\n nucleus.y = canvas.height \/ 2;\n nucleus.radius = nucleusSize * 10 + 20; \/\/ 20-50px\n \n \/\/ \u521b\u5efa\u7535\u5b50\n electrons = [];\n const electronCount = 79; \/\/ \u91d1\u539f\u5b50\u670979\u4e2a\u7535\u5b50\n const electronOrbitRadius = nucleus.radius + 80;\n \n for (let i = 0; i < electronCount; i++) {\n const angle = (i \/ electronCount) * Math.PI * 2;\n electrons.push({\n x: nucleus.x + Math.cos(angle) * electronOrbitRadius,\n y: nucleus.y + Math.sin(angle) * electronOrbitRadius,\n radius: 6,\n angle: angle,\n speed: 0.02\n });\n }\n \n \/\/ \u521b\u5efa\u03b1\u7c92\u5b50\n particles = [];\n for (let i = 0; i < particleCount; i++) {\n particles.push({\n x: 50,\n y: Math.random() * (canvas.height - 100) + 50,\n radius: 8,\n vx: (2 + Math.random() * 0.5) * particleSpeed,\n vy: (Math.random() - 0.5) * 0.5,\n color: '#4fc3f7',\n alpha: 1,\n path: []\n });\n }\n }\n \n \/\/ \u7ed8\u5236\u539f\u5b50\u6838\n function drawNucleus() {\n \/\/ \u539f\u5b50\u6838\n const gradient = ctx.createRadialGradient(\n nucleus.x, nucleus.y, 0,\n nucleus.x, nucleus.y, nucleus.radius\n );\n gradient.addColorStop(0, '#ff5252');\n gradient.addColorStop(1, '#b71c1c');\n \n ctx.beginPath();\n ctx.arc(nucleus.x, nucleus.y, nucleus.radius, 0, Math.PI * 2);\n ctx.fillStyle = gradient;\n ctx.fill();\n \n \/\/ \u539f\u5b50\u6838\u6807\u7b7e\n ctx.font = 'bold 18px Arial';\n ctx.fillStyle = 'white';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillText('\u539f\u5b50\u6838', nucleus.x, nucleus.y);\n }\n \n \/\/ \u7ed8\u5236\u7535\u5b50\n function drawElectrons() {\n electrons.forEach(electron => {\n const gradient = ctx.createRadialGradient(\n electron.x, electron.y, 0,\n electron.x, electron.y, electron.radius\n );\n gradient.addColorStop(0, '#69f0ae');\n gradient.addColorStop(1, '#00c853');\n \n ctx.beginPath();\n ctx.arc(electron.x, electron.y, electron.radius, 0, Math.PI * 2);\n ctx.fillStyle = gradient;\n ctx.fill();\n });\n }\n \n \/\/ \u7ed8\u5236\u03b1\u7c92\u5b50\n function drawParticles() {\n particles.forEach(particle => {\n \/\/ \u7ed8\u5236\u7c92\u5b50\u8f68\u8ff9\n if (particle.path.length > 1) {\n ctx.beginPath();\n ctx.moveTo(particle.path[0].x, particle.path[0].y);\n \n for (let i = 1; i < particle.path.length; i++) {\n ctx.lineTo(particle.path[i].x, particle.path[i].y);\n }\n \n ctx.strokeStyle = `rgba(79, 195, 247, ${particle.alpha * 0.3})`;\n ctx.lineWidth = 2;\n ctx.stroke();\n }\n \n \/\/ \u7ed8\u5236\u7c92\u5b50\n const gradient = ctx.createRadialGradient(\n particle.x, particle.y, 0,\n particle.x, particle.y, particle.radius\n );\n gradient.addColorStop(0, '#e1f5fe');\n gradient.addColorStop(1, particle.color);\n \n ctx.beginPath();\n ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);\n ctx.fillStyle = gradient;\n ctx.fill();\n \n \/\/ \u7c92\u5b50\u6807\u7b7e\n ctx.font = 'bold 14px Arial';\n ctx.fillStyle = 'white';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillText('\u03b1', particle.x, particle.y);\n });\n }\n \n \/\/ \u66f4\u65b0\u7535\u5b50\u4f4d\u7f6e\n function updateElectrons() {\n electrons.forEach(electron => {\n electron.angle += electron.speed;\n electron.x = nucleus.x + Math.cos(electron.angle) * (nucleus.radius + 80);\n electron.y = nucleus.y + Math.sin(electron.angle) * (nucleus.radius + 80);\n });\n }\n \n \/\/ \u66f4\u65b0\u7c92\u5b50\u4f4d\u7f6e\n function updateParticles() {\n particles.forEach(particle => {\n \/\/ \u4fdd\u5b58\u8def\u5f84\u70b9\uff08\u7528\u4e8e\u7ed8\u5236\u8f68\u8ff9\uff09\n if (particle.path.length > 20) {\n particle.path.shift();\n }\n particle.path.push({x: particle.x, y: particle.y});\n \n \/\/ \u66f4\u65b0\u4f4d\u7f6e\n particle.x += particle.vx;\n particle.y += particle.vy;\n \n \/\/ \u68c0\u6d4b\u4e0e\u539f\u5b50\u6838\u7684\u78b0\u649e\n const dx = particle.x - nucleus.x;\n const dy = particle.y - nucleus.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n \n if (distance < nucleus.radius + particle.radius) {\n \/\/ \u76f4\u63a5\u78b0\u649e - \u53cd\u5f39\n particle.vx = -particle.vx * 0.8;\n particle.vy = -particle.vy * 0.8;\n particle.color = '#ff5252';\n } else if (distance < nucleus.radius + 150) {\n \/\/ \u9760\u8fd1\u539f\u5b50\u6838 - \u53d7\u5e93\u4ed1\u65a5\u529b\u5f71\u54cd\n const force = 1000 \/ (distance * distance);\n const angle = Math.atan2(dy, dx);\n \n particle.vx += Math.cos(angle) * force;\n particle.vy += Math.sin(angle) * force;\n \n \/\/ \u7a0d\u5fae\u6539\u53d8\u989c\u8272\u8868\u793a\u53d7\u529b\n particle.color = '#29b6f6';\n }\n \n \/\/ \u7c92\u5b50\u6de1\u51fa\u6548\u679c\n if (particle.x > canvas.width + 50 || particle.x < -50 || \n particle.y > canvas.height + 50 || particle.y < -50) {\n particle.alpha -= 0.02;\n }\n });\n \n \/\/ \u79fb\u9664\u5b8c\u5168\u6de1\u51fa\u7684\u7c92\u5b50\n particles = particles.filter(p => p.alpha > 0);\n \n \/\/ \u6dfb\u52a0\u65b0\u7c92\u5b50\n if (particles.length < particleCount && Math.random() < 0.1) {\n particles.push({\n x: 50,\n y: Math.random() * (canvas.height - 100) + 50,\n radius: 8,\n vx: (2 + Math.random() * 0.5) * particleSpeed,\n vy: (Math.random() - 0.5) * 0.5,\n color: '#4fc3f7',\n alpha: 1,\n path: []\n });\n }\n }\n \n \/\/ \u7ed8\u5236\u5b9e\u9a8c\u88c5\u7f6e\n function drawApparatus() {\n \/\/ \u7ed8\u5236\u03b1\u7c92\u5b50\u6e90\n ctx.fillStyle = '#7e57c2';\n ctx.fillRect(20, canvas.height\/2 - 30, 30, 60);\n \n ctx.font = '14px Arial';\n ctx.fillStyle = 'white';\n ctx.textAlign = 'center';\n ctx.fillText('\u03b1\u7c92\u5b50\u6e90', 35, canvas.height\/2 + 50);\n \n \/\/ \u7ed8\u5236\u91d1\u7b94\n ctx.fillStyle = 'rgba(255, 215, 0, 0.3)';\n ctx.fillRect(canvas.width * 0.5 - 5, 50, 10, canvas.height - 100);\n \n ctx.font = '14px Arial';\n ctx.fillStyle = '#ffd700';\n ctx.textAlign = 'center';\n ctx.fillText('\u91d1\u7b94', canvas.width * 0.5, 30);\n \n \/\/ \u7ed8\u5236\u8367\u5149\u5c4f\n ctx.strokeStyle = '#81d4fa';\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.moveTo(canvas.width - 50, 50);\n ctx.lineTo(canvas.width - 50, canvas.height - 50);\n ctx.stroke();\n \n ctx.font = '14px Arial';\n ctx.fillStyle = '#81d4fa';\n ctx.textAlign = 'center';\n ctx.fillText('\u8367\u5149\u5c4f', canvas.width - 30, canvas.height\/2);\n }\n \n \/\/ \u52a8\u753b\u5faa\u73af\n function animate() {\n \/\/ \u6e05\u9664\u753b\u5e03\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n \/\/ \u7ed8\u5236\u5b9e\u9a8c\u88c5\u7f6e\n drawApparatus();\n \n \/\/ \u66f4\u65b0\u548c\u7ed8\u5236\u7c92\u5b50\n if (experimentRunning) {\n updateElectrons();\n updateParticles();\n }\n \n \/\/ \u7ed8\u5236\u539f\u5b50\n drawElectrons();\n drawNucleus();\n drawParticles();\n \n \/\/ \u7ee7\u7eed\u52a8\u753b\u5faa\u73af\n requestAnimationFrame(animate);\n }\n \n \/\/ \u521d\u59cb\u5316\u5b9e\u9a8c\n initExperiment();\n \n \/\/ \u5f00\u59cb\u52a8\u753b\n animate();\n \n \/\/ \u4e8b\u4ef6\u76d1\u542c\u5668\n document.getElementById('btn-start').addEventListener('click', function() {\n experimentRunning = true;\n });\n \n document.getElementById('btn-pause').addEventListener('click', function() {\n experimentRunning = false;\n });\n \n document.getElementById('btn-reset').addEventListener('click', function() {\n initExperiment();\n experimentRunning = true;\n slowMotion = false;\n });\n \n document.getElementById('btn-slow').addEventListener('click', function() {\n slowMotion = !slowMotion;\n this.textContent = slowMotion ? '\u6b63\u5e38\u901f\u5ea6' : '\u6162\u52a8\u4f5c';\n });\n \n \/\/ \u7c92\u5b50\u6570\u91cf\u6ed1\u5757\n const particleCountSlider = document.getElementById('particle-count');\n const countValue = document.getElementById('count-value');\n particleCountSlider.addEventListener('input', function() {\n particleCount = parseInt(this.value);\n countValue.textContent = particleCount;\n initExperiment();\n });\n \n \/\/ \u7c92\u5b50\u901f\u5ea6\u6ed1\u5757\n const particleSpeedSlider = document.getElementById('particle-speed');\n const speedValue = document.getElementById('speed-value');\n particleSpeedSlider.addEventListener('input', function() {\n const speeds = ['\u6162', '\u4e2d\u7b49', '\u5feb'];\n particleSpeed = parseInt(this.value);\n speedValue.textContent = speeds[particleSpeed - 1];\n initExperiment();\n });\n \n \/\/ \u539f\u5b50\u6838\u5927\u5c0f\u6ed1\u5757\n const nucleusSizeSlider = document.getElementById('nucleus-size');\n const sizeValue = document.getElementById('size-value');\n nucleusSizeSlider.addEventListener('input', function() {\n const sizes = ['\u5c0f', '\u4e2d\u7b49', '\u5927'];\n nucleusSize = parseInt(this.value);\n sizeValue.textContent = sizes[nucleusSize - 1];\n initExperiment();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p>\u70b9\u51fb\u94fe\u63a5\u5373\u53ef\u4e0b\u8f7d\u5e76\u89c2\u770b<\/p>\n\n\n\n<p><a href=\"https:\/\/yuanbao.tencent.com\/sc\/zxOT0rkLblkkfeH\">https:\/\/yuanbao.tencent.com\/sc\/zxOT0rkLblkkfeH<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u03b1\u7c92\u5b50\u6563\u5c04\u5b9e\u9a8c – \u539f\u5b50\u7ed3\u6784\u63a2\u7d22 \u03b1\u7c92\u5b50\u6563\u5c04\u5b9e\u9a8c \u63a2\u7d22\u539f\u5b50\u7ed3\u6784\u7684\u91cc\u7a0b\u7891\u5b9e\u9a8c \u5b9e\u9a8c\u63a7\u5236\u9762\u677f \u5b9e\u9a8c\u53c2\u6570 […]<\/p>\n","protected":false},"author":5,"featured_media":71,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-50","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-1"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.aihx.top\/index.php?rest_route=\/wp\/v2\/posts\/50","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aihx.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aihx.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aihx.top\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aihx.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=50"}],"version-history":[{"count":1,"href":"https:\/\/www.aihx.top\/index.php?rest_route=\/wp\/v2\/posts\/50\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/www.aihx.top\/index.php?rest_route=\/wp\/v2\/posts\/50\/revisions\/51"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.aihx.top\/index.php?rest_route=\/wp\/v2\/media\/71"}],"wp:attachment":[{"href":"https:\/\/www.aihx.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=50"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aihx.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=50"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aihx.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":50,"date":"2025-09-12T10:06:59","date_gmt":"2025-09-12T02:06:59","guid":{"rendered":"https:\/\/www.aihx.top\/?p=50"},"modified":"2025-09-12T11:23:40","modified_gmt":"2025-09-12T03:23:40","slug":"%ce%b1%e7%b2%92%e5%ad%90%e6%95%a3%e5%b0%84%e5%ae%9e%e9%aa%8c","status":"publish","type":"post","link":"https:\/\/www.aihx.top\/?p=50","title":{"rendered":"\u03b1\u7c92\u5b50\u6563\u5c04\u5b9e\u9a8c"},"content":{"rendered":"\n\n\n\n \n \n \u03b1\u7c92\u5b50\u6563\u5c04\u5b9e\u9a8c – \u539f\u5b50\u7ed3\u6784\u63a2\u7d22<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, #1a2a6c, #2c3e50);\n color: #fff;\n min-height: 100vh;\n padding: 20px;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n }\n \n header {\n text-align: center;\n padding: 20px 0;\n margin-bottom: 20px;\n background: rgba(0, 0, 0, 0.3);\n border-radius: 15px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(4px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n \n h1 {\n font-size: 2.5rem;\n margin-bottom: 10px;\n color: #4fc3f7;\n text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);\n }\n \n .subtitle {\n font-size: 1.2rem;\n opacity: 0.9;\n }\n \n .content {\n display: flex;\n gap: 20px;\n margin-bottom: 20px;\n }\n \n .control-panel {\n flex: 1;\n background: rgba(0, 0, 0, 0.3);\n border-radius: 15px;\n padding: 25px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(4px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n \n .control-panel h2 {\n color: #81d4fa;\n margin-bottom: 20px;\n text-align: center;\n font-size: 1.8rem;\n }\n \n .control-group {\n margin-bottom: 25px;\n }\n \n .control-group h3 {\n color: #4fc3f7;\n margin-bottom: 15px;\n font-size: 1.3rem;\n }\n \n .slider-container {\n margin-bottom: 15px;\n }\n \n label {\n display: block;\n margin-bottom: 8px;\n font-size: 1.1rem;\n }\n \n input[type=\"range\"] {\n width: 100%;\n height: 10px;\n background: #2c3e50;\n border-radius: 5px;\n outline: none;\n }\n \n .btn-group {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 10px;\n }\n \n button {\n flex: 1;\n min-width: 120px;\n padding: 12px 15px;\n background: linear-gradient(135deg, #2196f3, #0d47a1);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1.1rem;\n font-weight: 600;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n }\n \n button:hover {\n transform: translateY(-3px);\n box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);\n }\n \n button:active {\n transform: translateY(1px);\n }\n \n .btn-reset {\n background: linear-gradient(135deg, #f44336, #b71c1c);\n }\n \n .btn-slow {\n background: linear-gradient(135deg, #ff9800, #e65100);\n }\n \n .animation-area {\n flex: 2;\n background: rgba(0, 0, 0, 0.3);\n border-radius: 15px;\n overflow: hidden;\n position: relative;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(4px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n \n #animation-canvas {\n width: 100%;\n height: 100%;\n display: block;\n }\n \n .legend {\n position: absolute;\n bottom: 20px;\n left: 20px;\n background: rgba(0, 0, 0, 0.6);\n padding: 15px;\n border-radius: 10px;\n font-size: 0.9rem;\n }\n \n .legend-item {\n display: flex;\n align-items: center;\n margin-bottom: 8px;\n }\n \n .legend-color {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n margin-right: 10px;\n }\n \n .nucleus-color {\n background: radial-gradient(circle, #ff5252, #b71c1c);\n }\n \n .alpha-color {\n background: radial-gradient(circle, #4fc3f7, #0288d1);\n }\n \n .electron-color {\n background: radial-gradient(circle, #69f0ae, #00c853);\n }\n \n .knowledge-panel {\n background: rgba(0, 0, 0, 0.3);\n border-radius: 15px;\n padding: 25px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(4px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n \n .knowledge-panel h2 {\n color: #81d4fa;\n margin-bottom: 20px;\n text-align: center;\n font-size: 1.8rem;\n }\n \n .key-points {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n }\n \n .point-card {\n background: rgba(30, 30, 60, 0.5);\n border-radius: 10px;\n padding: 20px;\n transition: transform 0.3s ease;\n }\n \n .point-card:hover {\n transform: translateY(-5px);\n background: rgba(40, 40, 80, 0.6);\n }\n \n .point-card h3 {\n color: #4fc3f7;\n margin-bottom: 10px;\n font-size: 1.3rem;\n }\n \n .point-card p {\n line-height: 1.6;\n font-size: 1.1rem;\n }\n \n .highlight {\n color: #69f0ae;\n font-weight: 600;\n }\n \n @media (max-width: 900px) {\n .content {\n flex-direction: column;\n }\n \n .animation-area {\n min-height: 500px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>\u03b1\u7c92\u5b50\u6563\u5c04\u5b9e\u9a8c<\/h1>\n <p class=\"subtitle\">\u63a2\u7d22\u539f\u5b50\u7ed3\u6784\u7684\u91cc\u7a0b\u7891\u5b9e\u9a8c<\/p>\n <\/header>\n \n <div class=\"content\">\n <div class=\"control-panel\">\n <h2>\u5b9e\u9a8c\u63a7\u5236\u9762\u677f<\/h2>\n \n <div class=\"control-group\">\n <h3>\u5b9e\u9a8c\u53c2\u6570<\/h3>\n \n <div class=\"slider-container\">\n <label for=\"particle-count\">\u03b1\u7c92\u5b50\u6570\u91cf: <span id=\"count-value\">20<\/span><\/label>\n <input type=\"range\" id=\"particle-count\" min=\"5\" max=\"50\" value=\"20\">\n <\/div>\n \n <div class=\"slider-container\">\n <label for=\"particle-speed\">\u03b1\u7c92\u5b50\u901f\u5ea6: <span id=\"speed-value\">\u4e2d\u7b49<\/span><\/label>\n <input type=\"range\" id=\"particle-speed\" min=\"1\" max=\"3\" value=\"2\">\n <\/div>\n \n <div class=\"slider-container\">\n <label for=\"nucleus-size\">\u539f\u5b50\u6838\u5927\u5c0f: <span id=\"size-value\">\u4e2d\u7b49<\/span><\/label>\n <input type=\"range\" id=\"nucleus-size\" min=\"1\" max=\"3\" value=\"2\">\n <\/div>\n <\/div>\n \n <div class=\"control-group\">\n <h3>\u5b9e\u9a8c\u64cd\u4f5c<\/h3>\n <div class=\"btn-group\">\n <button id=\"btn-start\" class=\"btn-start\">\u5f00\u59cb\u5b9e\u9a8c<\/button>\n <button id=\"btn-pause\" class=\"btn-pause\">\u6682\u505c<\/button>\n <button id=\"btn-reset\" class=\"btn-reset\">\u91cd\u7f6e<\/button>\n <button id=\"btn-slow\" class=\"btn-slow\">\u6162\u52a8\u4f5c<\/button>\n <\/div>\n <\/div>\n \n <div class=\"control-group\">\n <h3>\u5b9e\u9a8c\u8bf4\u660e<\/h3>\n <p>\u672c\u52a8\u753b\u6a21\u62df\u4e86\u5362\u745f\u798f\u57281911\u5e74\u8fdb\u884c\u7684\u03b1\u7c92\u5b50\u6563\u5c04\u5b9e\u9a8c\u3002\u901a\u8fc7\u89c2\u5bdf\u5e26\u6b63\u7535\u7684\u03b1\u7c92\u5b50\u4e0e\u91d1\u539f\u5b50\u76f8\u4e92\u4f5c\u7528\u7684\u65b9\u5f0f\uff0c\u5362\u745f\u798f\u63a8\u7ffb\u4e86\u5f53\u65f6\u6d41\u884c\u7684”\u8461\u8404\u5e72\u5e03\u4e01”\u539f\u5b50\u6a21\u578b\uff0c\u63d0\u51fa\u4e86\u539f\u5b50\u6838\u5f0f\u7ed3\u6784\u6a21\u578b\u3002<\/p>\n <\/div>\n <\/div>\n \n <div class=\"animation-area\">\n <canvas id=\"animation-canvas\"><\/canvas>\n <div class=\"legend\">\n <div class=\"legend-item\">\n <div class=\"legend-color nucleus-color\"><\/div>\n <span>\u539f\u5b50\u6838\uff08\u5e26\u6b63\u7535\uff09<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-color alpha-color\"><\/div>\n <span>\u03b1\u7c92\u5b50\uff08\u6c26\u539f\u5b50\u6838\uff09<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-color electron-color\"><\/div>\n <span>\u7535\u5b50\uff08\u5e26\u8d1f\u7535\uff09<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"knowledge-panel\">\n <h2>\u5173\u952e\u77e5\u8bc6\u70b9<\/h2>\n <div class=\"key-points\">\n <div class=\"point-card\">\n <h3>\u5b9e\u9a8c\u80cc\u666f<\/h3>\n <p>\u5728\u5362\u745f\u798f\u5b9e\u9a8c\u4e4b\u524d\uff0c<span class=\"highlight\">J.J.\u6c64\u59c6\u900a<\/span>\u63d0\u51fa\u4e86”\u8461\u8404\u5e72\u5e03\u4e01”\u6a21\u578b\uff0c\u8ba4\u4e3a\u6b63\u7535\u8377\u5747\u5300\u5206\u5e03\u5728\u6574\u4e2a\u539f\u5b50\u4e2d\uff0c\u7535\u5b50\u9576\u5d4c\u5176\u4e2d\u3002<\/p>\n <\/div>\n \n <div class=\"point-card\">\n <h3>\u5b9e\u9a8c\u88c5\u7f6e<\/h3>\n <p>\u4f7f\u7528\u653e\u5c04\u6027\u7269\u8d28\u53d1\u5c04\u03b1\u7c92\u5b50\uff0c\u8ba9\u5b83\u4eec\u7a7f\u8fc7<span class=\"highlight\">\u6781\u8584\u7684\u91d1\u7b94<\/span>\uff08\u4ec5\u51e0\u767e\u4e2a\u539f\u5b50\u539a\uff09\uff0c\u7136\u540e\u7528\u8367\u5149\u5c4f\u68c0\u6d4b\u6563\u5c04\u7684\u7c92\u5b50\u3002<\/p>\n <\/div>\n \n <div class=\"point-card\">\n <h3>\u5b9e\u9a8c\u7ed3\u679c<\/h3>\n <p>\u5927\u591a\u6570\u03b1\u7c92\u5b50\u76f4\u63a5\u7a7f\u8fc7\u91d1\u7b94\uff0c\u5c11\u6570\u53d1\u751f\u8f83\u5927\u89d2\u5ea6\u504f\u8f6c\uff0c\u6781\u5c11\u6570\u88ab<span class=\"highlight\">\u53cd\u5f39\u56de\u6765<\/span>\u3002\u8fd9\u4e0e\u6c64\u59c6\u900a\u6a21\u578b\u7684\u9884\u6d4b\u5b8c\u5168\u4e0d\u7b26\u3002<\/p>\n <\/div>\n \n <div class=\"point-card\">\n <h3>\u5b9e\u9a8c\u7ed3\u8bba<\/h3>\n <p>\u5362\u745f\u798f\u63d0\u51fa<span class=\"highlight\">\u6838\u5f0f\u7ed3\u6784\u6a21\u578b<\/span>\uff1a\u539f\u5b50\u4e2d\u5fc3\u6709\u4e00\u4e2a\u5e26\u6b63\u7535\u7684\u3001\u4f53\u79ef\u5f88\u5c0f\u4f46\u8d28\u91cf\u5f88\u5927\u7684\u539f\u5b50\u6838\uff0c\u7535\u5b50\u5728\u6838\u5916\u7a7a\u95f4\u7ed5\u6838\u8fd0\u52a8\u3002<\/p>\n <\/div>\n \n <div class=\"point-card\">\n <h3>\u91cd\u8981\u610f\u4e49<\/h3>\n <p>\u8be5\u5b9e\u9a8c\u662f\u539f\u5b50\u7269\u7406\u5b66\u53d1\u5c55\u7684\u91cc\u7a0b\u7891\uff0c\u4e3a<span class=\"highlight\">\u91cf\u5b50\u529b\u5b66<\/span>\u548c<span class=\"highlight\">\u6838\u7269\u7406<\/span>\u7684\u53d1\u5c55\u5960\u5b9a\u4e86\u57fa\u7840\uff0c\u5f7b\u5e95\u6539\u53d8\u4e86\u4eba\u7c7b\u5bf9\u5fae\u89c2\u4e16\u754c\u7684\u8ba4\u8bc6\u3002<\/p>\n <\/div>\n \n <div class=\"point-card\">\n <h3>\u73b0\u4ee3\u5e94\u7528<\/h3>\n <p>\u03b1\u7c92\u5b50\u6563\u5c04\u539f\u7406\u5728\u73b0\u4ee3\u79d1\u5b66\u4e2d\u6709\u5e7f\u6cdb\u5e94\u7528\uff0c\u5305\u62ec<span class=\"highlight\">\u6750\u6599\u5206\u6790<\/span>\u3001<span class=\"highlight\">\u6838\u53cd\u5e94\u7814\u7a76<\/span>\u548c<span class=\"highlight\">\u7c92\u5b50\u52a0\u901f\u5668<\/span>\u8bbe\u8ba1\u7b49\u9886\u57df\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u83b7\u53d6Canvas\u5143\u7d20\u548c\u4e0a\u4e0b\u6587\n const canvas = document.getElementById('animation-canvas');\n const ctx = canvas.getContext('2d');\n \n \/\/ \u8bbe\u7f6eCanvas\u5c3a\u5bf8\n function setupCanvas() {\n const container = canvas.parentElement;\n canvas.width = container.clientWidth;\n canvas.height = container.clientHeight;\n }\n \n \/\/ \u521d\u59cb\u5316Canvas\u5c3a\u5bf8\n setupCanvas();\n window.addEventListener('resize', setupCanvas);\n \n \/\/ \u5b9e\u9a8c\u53c2\u6570\n let experimentRunning = false;\n let slowMotion = false;\n let particleCount = 20;\n let particleSpeed = 2; \/\/ 1=\u6162, 2=\u4e2d, 3=\u5feb\n let nucleusSize = 2; \/\/ 1=\u5c0f, 2=\u4e2d, 3=\u5927\n \n \/\/ \u7c92\u5b50\u6570\u7ec4\n let particles = [];\n \n \/\/ \u539f\u5b50\u6838\u5bf9\u8c61\n const nucleus = {\n x: 0,\n y: 0,\n radius: 0,\n charge: 79 \/\/ \u91d1\u539f\u5b50\u7684\u539f\u5b50\u5e8f\u6570\n };\n \n \/\/ \u7535\u5b50\u6570\u7ec4\n let electrons = [];\n \n \/\/ \u521d\u59cb\u5316\u5b9e\u9a8c\n function initExperiment() {\n \/\/ \u8bbe\u7f6e\u539f\u5b50\u6838\u4f4d\u7f6e\u548c\u5927\u5c0f\n nucleus.x = canvas.width * 0.7;\n nucleus.y = canvas.height \/ 2;\n nucleus.radius = nucleusSize * 10 + 20; \/\/ 20-50px\n \n \/\/ \u521b\u5efa\u7535\u5b50\n electrons = [];\n const electronCount = 79; \/\/ \u91d1\u539f\u5b50\u670979\u4e2a\u7535\u5b50\n const electronOrbitRadius = nucleus.radius + 80;\n \n for (let i = 0; i < electronCount; i++) {\n const angle = (i \/ electronCount) * Math.PI * 2;\n electrons.push({\n x: nucleus.x + Math.cos(angle) * electronOrbitRadius,\n y: nucleus.y + Math.sin(angle) * electronOrbitRadius,\n radius: 6,\n angle: angle,\n speed: 0.02\n });\n }\n \n \/\/ \u521b\u5efa\u03b1\u7c92\u5b50\n particles = [];\n for (let i = 0; i < particleCount; i++) {\n particles.push({\n x: 50,\n y: Math.random() * (canvas.height - 100) + 50,\n radius: 8,\n vx: (2 + Math.random() * 0.5) * particleSpeed,\n vy: (Math.random() - 0.5) * 0.5,\n color: '#4fc3f7',\n alpha: 1,\n path: []\n });\n }\n }\n \n \/\/ \u7ed8\u5236\u539f\u5b50\u6838\n function drawNucleus() {\n \/\/ \u539f\u5b50\u6838\n const gradient = ctx.createRadialGradient(\n nucleus.x, nucleus.y, 0,\n nucleus.x, nucleus.y, nucleus.radius\n );\n gradient.addColorStop(0, '#ff5252');\n gradient.addColorStop(1, '#b71c1c');\n \n ctx.beginPath();\n ctx.arc(nucleus.x, nucleus.y, nucleus.radius, 0, Math.PI * 2);\n ctx.fillStyle = gradient;\n ctx.fill();\n \n \/\/ \u539f\u5b50\u6838\u6807\u7b7e\n ctx.font = 'bold 18px Arial';\n ctx.fillStyle = 'white';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillText('\u539f\u5b50\u6838', nucleus.x, nucleus.y);\n }\n \n \/\/ \u7ed8\u5236\u7535\u5b50\n function drawElectrons() {\n electrons.forEach(electron => {\n const gradient = ctx.createRadialGradient(\n electron.x, electron.y, 0,\n electron.x, electron.y, electron.radius\n );\n gradient.addColorStop(0, '#69f0ae');\n gradient.addColorStop(1, '#00c853');\n \n ctx.beginPath();\n ctx.arc(electron.x, electron.y, electron.radius, 0, Math.PI * 2);\n ctx.fillStyle = gradient;\n ctx.fill();\n });\n }\n \n \/\/ \u7ed8\u5236\u03b1\u7c92\u5b50\n function drawParticles() {\n particles.forEach(particle => {\n \/\/ \u7ed8\u5236\u7c92\u5b50\u8f68\u8ff9\n if (particle.path.length > 1) {\n ctx.beginPath();\n ctx.moveTo(particle.path[0].x, particle.path[0].y);\n \n for (let i = 1; i < particle.path.length; i++) {\n ctx.lineTo(particle.path[i].x, particle.path[i].y);\n }\n \n ctx.strokeStyle = `rgba(79, 195, 247, ${particle.alpha * 0.3})`;\n ctx.lineWidth = 2;\n ctx.stroke();\n }\n \n \/\/ \u7ed8\u5236\u7c92\u5b50\n const gradient = ctx.createRadialGradient(\n particle.x, particle.y, 0,\n particle.x, particle.y, particle.radius\n );\n gradient.addColorStop(0, '#e1f5fe');\n gradient.addColorStop(1, particle.color);\n \n ctx.beginPath();\n ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);\n ctx.fillStyle = gradient;\n ctx.fill();\n \n \/\/ \u7c92\u5b50\u6807\u7b7e\n ctx.font = 'bold 14px Arial';\n ctx.fillStyle = 'white';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillText('\u03b1', particle.x, particle.y);\n });\n }\n \n \/\/ \u66f4\u65b0\u7535\u5b50\u4f4d\u7f6e\n function updateElectrons() {\n electrons.forEach(electron => {\n electron.angle += electron.speed;\n electron.x = nucleus.x + Math.cos(electron.angle) * (nucleus.radius + 80);\n electron.y = nucleus.y + Math.sin(electron.angle) * (nucleus.radius + 80);\n });\n }\n \n \/\/ \u66f4\u65b0\u7c92\u5b50\u4f4d\u7f6e\n function updateParticles() {\n particles.forEach(particle => {\n \/\/ \u4fdd\u5b58\u8def\u5f84\u70b9\uff08\u7528\u4e8e\u7ed8\u5236\u8f68\u8ff9\uff09\n if (particle.path.length > 20) {\n particle.path.shift();\n }\n particle.path.push({x: particle.x, y: particle.y});\n \n \/\/ \u66f4\u65b0\u4f4d\u7f6e\n particle.x += particle.vx;\n particle.y += particle.vy;\n \n \/\/ \u68c0\u6d4b\u4e0e\u539f\u5b50\u6838\u7684\u78b0\u649e\n const dx = particle.x - nucleus.x;\n const dy = particle.y - nucleus.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n \n if (distance < nucleus.radius + particle.radius) {\n \/\/ \u76f4\u63a5\u78b0\u649e - \u53cd\u5f39\n particle.vx = -particle.vx * 0.8;\n particle.vy = -particle.vy * 0.8;\n particle.color = '#ff5252';\n } else if (distance < nucleus.radius + 150) {\n \/\/ \u9760\u8fd1\u539f\u5b50\u6838 - \u53d7\u5e93\u4ed1\u65a5\u529b\u5f71\u54cd\n const force = 1000 \/ (distance * distance);\n const angle = Math.atan2(dy, dx);\n \n particle.vx += Math.cos(angle) * force;\n particle.vy += Math.sin(angle) * force;\n \n \/\/ \u7a0d\u5fae\u6539\u53d8\u989c\u8272\u8868\u793a\u53d7\u529b\n particle.color = '#29b6f6';\n }\n \n \/\/ \u7c92\u5b50\u6de1\u51fa\u6548\u679c\n if (particle.x > canvas.width + 50 || particle.x < -50 || \n particle.y > canvas.height + 50 || particle.y < -50) {\n particle.alpha -= 0.02;\n }\n });\n \n \/\/ \u79fb\u9664\u5b8c\u5168\u6de1\u51fa\u7684\u7c92\u5b50\n particles = particles.filter(p => p.alpha > 0);\n \n \/\/ \u6dfb\u52a0\u65b0\u7c92\u5b50\n if (particles.length < particleCount && Math.random() < 0.1) {\n particles.push({\n x: 50,\n y: Math.random() * (canvas.height - 100) + 50,\n radius: 8,\n vx: (2 + Math.random() * 0.5) * particleSpeed,\n vy: (Math.random() - 0.5) * 0.5,\n color: '#4fc3f7',\n alpha: 1,\n path: []\n });\n }\n }\n \n \/\/ \u7ed8\u5236\u5b9e\u9a8c\u88c5\u7f6e\n function drawApparatus() {\n \/\/ \u7ed8\u5236\u03b1\u7c92\u5b50\u6e90\n ctx.fillStyle = '#7e57c2';\n ctx.fillRect(20, canvas.height\/2 - 30, 30, 60);\n \n ctx.font = '14px Arial';\n ctx.fillStyle = 'white';\n ctx.textAlign = 'center';\n ctx.fillText('\u03b1\u7c92\u5b50\u6e90', 35, canvas.height\/2 + 50);\n \n \/\/ \u7ed8\u5236\u91d1\u7b94\n ctx.fillStyle = 'rgba(255, 215, 0, 0.3)';\n ctx.fillRect(canvas.width * 0.5 - 5, 50, 10, canvas.height - 100);\n \n ctx.font = '14px Arial';\n ctx.fillStyle = '#ffd700';\n ctx.textAlign = 'center';\n ctx.fillText('\u91d1\u7b94', canvas.width * 0.5, 30);\n \n \/\/ \u7ed8\u5236\u8367\u5149\u5c4f\n ctx.strokeStyle = '#81d4fa';\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.moveTo(canvas.width - 50, 50);\n ctx.lineTo(canvas.width - 50, canvas.height - 50);\n ctx.stroke();\n \n ctx.font = '14px Arial';\n ctx.fillStyle = '#81d4fa';\n ctx.textAlign = 'center';\n ctx.fillText('\u8367\u5149\u5c4f', canvas.width - 30, canvas.height\/2);\n }\n \n \/\/ \u52a8\u753b\u5faa\u73af\n function animate() {\n \/\/ \u6e05\u9664\u753b\u5e03\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n \/\/ \u7ed8\u5236\u5b9e\u9a8c\u88c5\u7f6e\n drawApparatus();\n \n \/\/ \u66f4\u65b0\u548c\u7ed8\u5236\u7c92\u5b50\n if (experimentRunning) {\n updateElectrons();\n updateParticles();\n }\n \n \/\/ \u7ed8\u5236\u539f\u5b50\n drawElectrons();\n drawNucleus();\n drawParticles();\n \n \/\/ \u7ee7\u7eed\u52a8\u753b\u5faa\u73af\n requestAnimationFrame(animate);\n }\n \n \/\/ \u521d\u59cb\u5316\u5b9e\u9a8c\n initExperiment();\n \n \/\/ \u5f00\u59cb\u52a8\u753b\n animate();\n \n \/\/ \u4e8b\u4ef6\u76d1\u542c\u5668\n document.getElementById('btn-start').addEventListener('click', function() {\n experimentRunning = true;\n });\n \n document.getElementById('btn-pause').addEventListener('click', function() {\n experimentRunning = false;\n });\n \n document.getElementById('btn-reset').addEventListener('click', function() {\n initExperiment();\n experimentRunning = true;\n slowMotion = false;\n });\n \n document.getElementById('btn-slow').addEventListener('click', function() {\n slowMotion = !slowMotion;\n this.textContent = slowMotion ? '\u6b63\u5e38\u901f\u5ea6' : '\u6162\u52a8\u4f5c';\n });\n \n \/\/ \u7c92\u5b50\u6570\u91cf\u6ed1\u5757\n const particleCountSlider = document.getElementById('particle-count');\n const countValue = document.getElementById('count-value');\n particleCountSlider.addEventListener('input', function() {\n particleCount = parseInt(this.value);\n countValue.textContent = particleCount;\n initExperiment();\n });\n \n \/\/ \u7c92\u5b50\u901f\u5ea6\u6ed1\u5757\n const particleSpeedSlider = document.getElementById('particle-speed');\n const speedValue = document.getElementById('speed-value');\n particleSpeedSlider.addEventListener('input', function() {\n const speeds = ['\u6162', '\u4e2d\u7b49', '\u5feb'];\n particleSpeed = parseInt(this.value);\n speedValue.textContent = speeds[particleSpeed - 1];\n initExperiment();\n });\n \n \/\/ \u539f\u5b50\u6838\u5927\u5c0f\u6ed1\u5757\n const nucleusSizeSlider = document.getElementById('nucleus-size');\n const sizeValue = document.getElementById('size-value');\n nucleusSizeSlider.addEventListener('input', function() {\n const sizes = ['\u5c0f', '\u4e2d\u7b49', '\u5927'];\n nucleusSize = parseInt(this.value);\n sizeValue.textContent = sizes[nucleusSize - 1];\n initExperiment();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p>\u70b9\u51fb\u94fe\u63a5\u5373\u53ef\u4e0b\u8f7d\u5e76\u89c2\u770b<\/p>\n\n\n\n<p><a href=\"https:\/\/yuanbao.tencent.com\/sc\/zxOT0rkLblkkfeH\">https:\/\/yuanbao.tencent.com\/sc\/zxOT0rkLblkkfeH<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u03b1\u7c92\u5b50\u6563\u5c04\u5b9e\u9a8c – \u539f\u5b50\u7ed3\u6784\u63a2\u7d22 \u03b1\u7c92\u5b50\u6563\u5c04\u5b9e\u9a8c \u63a2\u7d22\u539f\u5b50\u7ed3\u6784\u7684\u91cc\u7a0b\u7891\u5b9e\u9a8c \u5b9e\u9a8c\u63a7\u5236\u9762\u677f \u5b9e\u9a8c\u53c2\u6570 […]<\/p>\n","protected":false},"author":5,"featured_media":71,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-50","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-1"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.aihx.top\/index.php?rest_route=\/wp\/v2\/posts\/50","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aihx.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aihx.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aihx.top\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aihx.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=50"}],"version-history":[{"count":1,"href":"https:\/\/www.aihx.top\/index.php?rest_route=\/wp\/v2\/posts\/50\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/www.aihx.top\/index.php?rest_route=\/wp\/v2\/posts\/50\/revisions\/51"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.aihx.top\/index.php?rest_route=\/wp\/v2\/media\/71"}],"wp:attachment":[{"href":"https:\/\/www.aihx.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=50"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aihx.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=50"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aihx.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}