酸雨金属浓度模拟器 – 环科Science Fair
body {
font-family: ‘Segoe UI’, system-ui, sans-serif;
max-width: 800px;
margin: 2rem auto;
padding: 1.5rem;
background: #eaf7e6;
text-align: center;
}
.card {
background: white;
border-radius: 2rem;
padding: 2rem;
box-shadow: 0 20px 30px -10px rgba(0,0,0,0.1);
}
h1 { color: #2d6a4f; margin-bottom: 0.25rem; }
.sub { color: #40916c; margin-bottom: 1.5rem; font-weight: bold; }
.slider-container {
margin: 2rem 0;
}
input {
width: 100%;
accent-color: #d00000;
cursor: pointer;
}
.values {
font-size: 1.6rem;
font-weight: bold;
margin: 1rem 0;
}
.zn { color: #b9782e; }
.cu { color: #b87333; }
.result-box {
background: #f8f9fa;
padding: 1rem;
border-radius: 1.5rem;
margin: 1.5rem 0;
font-size: 1.4rem;
font-weight: bold;
}
.emoji-big { font-size: 3rem; }
.note {
background: #fff3cd;
padding: 0.8rem;
border-radius: 1rem;
font-size: 0.85rem;
margin-top: 1.5rem;
}
footer {
margin-top: 1.5rem;
font-size: 0.75rem;
color: #555;
}
🌧️ 酸雨 → 土壤金属 → 绿豆幼苗
滑动下方滑块：模拟酸雨淋出的 Zn / Cu 浓度
🧪 土壤浸出液中 Zn 浓度 (mg/L) — 同时也是Cu的5倍
🔶 Zn = 50 mg/L |
🟤 Cu = 10 mg/L
📌 实验数据对应点：
• 清水(0+0)：正常生长
• 50+10 (酸雨真实值) → 发芽最快 ✅
• 100+20 以上 → 幼苗严重矮化 (<3 cm)
• 200+40 → 几乎没有超过3cm的幼苗 💀
const znSlider = document.getElementById(‘znSlider’);
const znVal = document.getElementById(‘znVal’);
const cuVal = document.getElementById(‘cuVal’);
const emojiSpan = document.getElementById(’emoji’);
const effectText = document.getElementById(‘effectText’);
function updateResult() {
let zn = parseFloat(znSlider.value);
let cu = zn / 5; // 保持5:1比例
cu = Math.round(cu * 10) / 10;
znVal.innerText = zn;
cuVal.innerText = cu;
let emoji = ”;
let effect = ”;
if (zn <= 10) {
emoji = '🌿✅';
effect = '正常生长 (对照组水平)';
} else if (zn <= 60) {
emoji = '⚡🌱⚡';
effect = '✅ 发芽速度加快！低浓度反而促进萌发 (你的50+10就在这个范围)';
} else if (zn = 45 && zn <= 65) {
effect = '🎯 这是你实验一的真实浓度！发芽最快，没有死 → 低浓度刺激效应';
}
emojiSpan.innerText = emoji;
effectText.innerText = effect;
}
znSlider.addEventListener('input', updateResult);
updateResult();
Feelustrate 