<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浮沉探秘 - 物理互动实验</title>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(45deg, #00172D, #00264D, #003B73);
color: #00f3ff;
font-family: 'Arial', sans-serif;
}
.container {
width: 800px;
margin: 20px auto;
padding: 20px;
background: rgba(0, 20, 40, 0.8);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}
.controls {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #00f3ff;
border-radius: 8px;
}
input[type="range"] {
width: 200px;
margin: 10px;
background: #003B73;
}
#experiment-area {
width: 600px;
height: 400px;
margin: 20px auto;
position: relative;
background: rgba(0, 50, 100, 0.3);
border: 2px solid #00f3ff;
border-radius: 10px;
overflow: hidden;
}
.object {
width: 60px;
height: 60px;
position: absolute;
left: 270px;
bottom: 50%;
transition: all 1s ease;
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}
.liquid {
position: absolute;
width: 100%;
bottom: 0;
background: rgba(0, 150, 255, 0.3);
transition: height 0.5s ease;
}
.glow {
animation: glow 2s infinite alternate;
}
@keyframes glow {
from { box-shadow: 0 0 10px #00f3ff; }
to { box-shadow: 0 0 20px #00f3ff; }
}
.info-panel {
padding: 15px;
margin-top: 20px;
background: rgba(0, 30, 60, 0.8);
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="glow">浮沉探秘实验室</h1>
<div class="controls">
<label>物体密度 (g/cm³): <input type="range" id="objectDensity" min="0.5" max="1.5" step="0.1" value="1.0"></label>
<label>液体密度 (g/cm³): <input type="range" id="liquidDensity" min="0.5" max="1.5" step="0.1" value="1.0"></label>
<button onclick="resetExperiment()">重置</button>
</div>
<div id="experiment-area">
<div class="liquid" id="liquid"></div>
<div class="object" id="object"></div>
</div>
<div class="info-panel">
<p>当前状态: <span id="status">悬浮</span></p>
<p>浮力公式: F<sub>浮</sub> = ρ<sub>液</sub> × g × V<sub>排</sub></p>
<p>物体密度 <span id="objDensityValue">1.0</span> g/cm³ vs 液体密度 <span id="liqDensityValue">1.0</span> g/cm³</p>
</div>
</div>
<script>
const object = document.getElementById('object');
const liquid = document.getElementById('liquid');
const statusSpan = document.getElementById('status');
function updateExperiment() {
const objDensity = parseFloat(objectDensity.value);
const liqDensity = parseFloat(liquidDensity.value);
// 更新显示数值
document.getElementById('objDensityValue').textContent = objDensity;
document.getElementById('liqDensityValue').textContent = liqDensity;
// 计算物体位置
if (objDensity > liqDensity) {
statusSpan.textContent = "下沉";
object.style.bottom = '10%';
object.style.backgroundColor = "#ff4444";
} else if (objDensity < liqDensity) {
statusSpan.textContent = "上浮";
object.style.bottom = '70%';
object.style.backgroundColor = "#44ff44";
} else {
statusSpan.textContent = "悬浮";
object.style.backgroundColor = "#ffff44";
object.style.bottom = '50%';
}
// 更新液体高度
liquid.style.height = `${(liqDensity/1.5)*100}%`;
}
function resetExperiment() {
objectDensity.value = 1.0;
liquidDensity.value = 1.0;
updateExperiment();
}
// 添加事件监听
objectDensity.addEventListener('input', updateExperiment);
liquidDensity.addEventListener('input', updateExperiment);
// 初始化
updateExperiment();
// 添加背景粒子效果
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.style.position = 'fixed';
canvas.style.top = 0;
canvas.style.left = 0;
canvas.style.zIndex = -1;
document.body.appendChild(canvas);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// 创建粒子系统
class Particle {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 2;
this.speed = Math.random() * 0.5 + 0.2;
}
update() {
this.y -= this.speed;
if (this.y < 0) this.reset();
}
draw() {
ctx.fillStyle = `rgba(0, 243, 255, ${this.size/2})`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI*2);
ctx.fill();
}
}
const particles = Array(100).fill().map(() => new Particle());
function animate() {
ctx.fillStyle = 'rgba(0, 11, 32, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
particles.forEach(p => {
p.update();
p.draw();
});
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
index.html
index.html