Qwen3-Coder模拟太阳系行星旋转：
使用自然语言编程
1、旋转效果：
image.png
2、完整Html代码，本地另存为就可打开网页查看：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>太阳系行星旋转</title>
<style>
body {
margin: 0;
padding: 0;
background: #000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.solar-system {
position: relative;
width: 800px;
height: 800px;
}
.sun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: radial-gradient(circle, #ffd700, #ff8c00);
border-radius: 50%;
box-shadow: 0 0 50px #ff8c00, 0 0 100px #ff4500;
z-index: 10;
}
.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.planet {
position: absolute;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.controls {
position: absolute;
top: 20px;
left: 20px;
color: white;
background: rgba(0, 0, 0, 0.7);
padding: 15px;
border-radius: 10px;
}
button {
background: #4CAF50;
border: none;
color: white;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="solar-system">
<div class="sun"></div>
<!-- 水星轨道和行星 -->
<div class="orbit" style="width: 150px; height: 150px;">
<div class="planet" id="mercury" style="width: 10px; height: 10px; background: #8a8a8a;"></div>
</div>
<!-- 金星轨道和行星 -->
<div class="orbit" style="width: 200px; height: 200px;">
<div class="planet" id="venus" style="width: 15px; height: 15px; background: #e39e1c;"></div>
</div>
<!-- 地球轨道和行星 -->
<div class="orbit" style="width: 270px; height: 270px;">
<div class="planet" id="earth" style="width: 16px; height: 16px; background: #1e90ff;"></div>
</div>
<!-- 火星轨道和行星 -->
<div class="orbit" style="width: 330px; height: 330px;">
<div class="planet" id="mars" style="width: 12px; height: 12px; background: #ff4500;"></div>
</div>
<!-- 木星轨道和行星 -->
<div class="orbit" style="width: 420px; height: 420px;">
<div class="planet" id="jupiter" style="width: 30px; height: 30px; background: #d8ca9d;"></div>
</div>
<!-- 土星轨道和行星 -->
<div class="orbit" style="width: 500px; height: 500px;">
<div class="planet" id="saturn" style="width: 25px; height: 25px; background: #e3e0c0;">
<!-- 土星环 -->
<div style="position: absolute; top: 50%; left: 50%; width: 40px; height: 10px; border: 2px solid #cba654; border-radius: 50%; transform: translate(-50%, -50%) rotate(20deg);"></div>
</div>
</div>
<!-- 天王星轨道和行星 -->
<div class="orbit" style="width: 580px; height: 580px;">
<div class="planet" id="uranus" style="width: 18px; height: 18px; background: #4fd0ff;"></div>
</div>
<!-- 海王星轨道和行星 -->
<div class="orbit" style="width: 650px; height: 650px;">
<div class="planet" id="neptune" style="width: 18px; height: 18px; background: #4169e1;"></div>
</div>
</div>
<div class="controls">
<button id="pauseBtn">暂停/继续</button>
<button id="speedUp">加速</button>
<button id="slowDown">减速</button>
<div>速度: <span id="speedValue">1</span>x</div>
</div>
<script>
// 行星数据
const planets = [
{ id: 'mercury', speed: 0.02, angle: 0 },
{ id: 'venus', speed: 0.015, angle: 0 },
{ id: 'earth', speed: 0.01, angle: 0 },
{ id: 'mars', speed: 0.008, angle: 0 },
{ id: 'jupiter', speed: 0.005, angle: 0 },
{ id: 'saturn', speed: 0.004, angle: 0 },
{ id: 'uranus', speed: 0.003, angle: 0 },
{ id: 'neptune', speed: 0.002, angle: 0 }
];
let isPaused = false;
let speedFactor = 1;
// 更新行星位置
function updatePlanets() {
if (isPaused) return;
planets.forEach(planet => {
const element = document.getElementById(planet.id);
const orbit = element.parentElement;
const orbitRadius = orbit.offsetWidth / 2;
// 更新角度
planet.angle += planet.speed * speedFactor;
// 计算新位置
const x = Math.cos(planet.angle) * orbitRadius;
const y = Math.sin(planet.angle) * orbitRadius;
// 应用新位置
element.style.left = `calc(50% + ${x}px)`;
element.style.top = `calc(50% + ${y}px)`;
});
requestAnimationFrame(updatePlanets);
}
// 初始化行星位置
function initPlanets() {
planets.forEach(planet => {
planet.angle = Math.random() * Math.PI * 2; // 随机初始角度
});
}
// 控制按钮事件
document.getElementById('pauseBtn').addEventListener('click', () => {
isPaused = !isPaused;
if (!isPaused) {
updatePlanets();
}
});
document.getElementById('speedUp').addEventListener('click', () => {
speedFactor = Math.min(speedFactor + 0.5, 5);
document.getElementById('speedValue').textContent = speedFactor.toFixed(1);
});
document.getElementById('slowDown').addEventListener('click', () => {
speedFactor = Math.max(speedFactor - 0.5, 0.5);
document.getElementById('speedValue').textContent = speedFactor.toFixed(1);
});
// 初始化并开始动画
initPlanets();
updatePlanets();
</script>
</body>
</html>
