化学实验室 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>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Microsoft Yahei', sans-serif;

}

body {

background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);

min-height: 100vh;

padding: 20px 15px;

}

.main-container {

max-width: 1280px;

margin: 0 auto;

background: #fff;

border-radius: 20px;

overflow: hidden;

box-shadow: 0 20px 60px rgba(0,0,0,0.3);

}

.header {

background: #2c3e50;

color: white;

padding: 25px 30px;

text-align: center;

position: relative;

}

.header h1 {

font-size: 32px;

margin-bottom: 8px;

}

.lab-banner {

width: 100%;

height: 180px;

object-fit: cover;

margin-top: 10px;

border-radius: 12px;

opacity: 0.85;

}

.nav-bar {

display: flex;

background: #34495e;

flex-wrap: wrap;

}

.nav-item {

padding: 15px 22px;

color: white;

cursor: pointer;

transition: all 0.3s;

border-right: 1px solid #2c3e50;

}

.nav-item.active {

background: #4ca1af;

}

.content-wrapper {

display: grid;

grid-template-columns: 260px 1fr 280px;

min-height: 650px;

}

.sidebar-left {

background: #f8f9fa;

padding: 20px;

border-right: 1px solid #e9ecef;

}

.tool-card {

padding: 10px;

margin: 10px 0;

background: white;

border-radius: 8px;

cursor: grab;

border: 1px solid #dee2e6;

transition: all 0.3s;

display: flex;

align-items: center;

gap: 10px;

}

.tool-card img {

width: 45px;

height: 45px;

object-fit: cover;

border-radius: 6px;

}

.tool-card:hover {

transform: translateY(-3px);

box-shadow: 0 5px 15px rgba(0,0,0,0.1);

}

.main-lab-area {

background: #f0f4f8;

padding: 25px;

position: relative;

min-height: 650px;

background-image: url('https://picsum.photos/id/102/1200/800');

background-size: cover;

background-position: center;

background-blend-mode: overlay;

}

.experiment-img {

width: 320px;

height: 220px;

object-fit: cover;

border-radius: 12px;

margin: 15px auto;

display: block;

box-shadow: 0 8px 20px rgba(0,0,0,0.15);

}

.sidebar-right {

background: #f8f9fa;

padding: 20px;

border-left: 1px solid #e9ecef;

}

.data-panel {

background: white;

padding: 15px;

border-radius: 10px;

margin-bottom: 20px;

border: 1px solid #dee2e6;

}

.log-panel {

background: white;

padding: 15px;

border-radius: 10px;

height: 320px;

overflow-y: auto;

border: 1px solid #dee2e6;

}

.btn-group {

display: flex;

gap: 12px;

margin: 20px 0;

flex-wrap: wrap;

justify-content: center;

}

.action-btn {

padding: 12px 20px;

border: none;

border-radius: 8px;

background: #4ca1af;

color: white;

cursor: pointer;

transition: all 0.3s;

}

.action-btn:hover {

background: #35909e;

transform: translateY(-2px);

}

.formula-display {

text-align: center;

font-size: 20px;

color: #d63031;

margin: 15px 0;

font-weight: 500;

background: rgba(255,255,255,0.9);

padding: 10px;

border-radius: 8px;

}

</style>

</head>

<body>

<div class="main-container">

<div class="header">

<h1>虚拟化学实验室</h1>

<p>支持多实验切换、实时数据监测、自动生成实验报告</p>

<img src="https://picsum.photos/id/103/1200/200" alt="化学实验室全景" class="lab-banner">

</div>

<div class="nav-bar">

<div class="nav-item active" onclick="switchExperiment(0)">水的电解实验</div>

<div class="nav-item" onclick="switchExperiment(1)">酸碱中和滴定</div>

<div class="nav-item" onclick="switchExperiment(2)">氧气制取实验</div>

<div class="nav-item" onclick="switchExperiment(3)">金属置换反应</div>

<div class="nav-item" onclick="switchExperiment(4)">粗盐提纯实验</div>

<div class="nav-item" onclick="switchExperiment(5)">乙酸乙酯合成</div>

</div>

<div class="content-wrapper">

<div class="sidebar-left">

<h3 style="margin-bottom: 15px; color: #2c3e50;">可拖拽试剂/仪器</h3>

<div class="tool-card" draggable="true" data-type="reagent" data-name="稀硫酸">

<img src="https://picsum.photos/id/425/100/100" alt="稀硫酸溶液">

<span>稀硫酸溶液</span>

</div>

<div class="tool-card" draggable="true" data-type="reagent" data-name="氢氧化钠">

<img src="https://picsum.photos/id/493/100/100" alt="氢氧化钠固体">

<span>氢氧化钠固体</span>

</div>

<div class="tool-card" draggable="true" data-type="reagent" data-name="酚酞指示剂">

<img src="https://picsum.photos/id/292/100/100" alt="酚酞指示剂">

<span>酚酞指示剂</span>

</div>

<div class="tool-card" draggable="true" data-type="instrument" data-name="酸式滴定管">

<img src="https://picsum.photos/id/175/100/100" alt="酸式滴定管">

<span>酸式滴定管</span>

</div>

<div class="tool-card" draggable="true" data-type="instrument" data-name="铁架台">

<img src="https://picsum.photos/id/366/100/100" alt="铁架台">

<span>铁架台</span>

</div>

<div class="tool-card" draggable="true" data-type="instrument" data-name="酒精灯">

<img src="https://picsum.photos/id/312/100/100" alt="酒精灯">

<span>酒精灯</span>

</div>

</div>

<div class="main-lab-area" id="labArea">

<div class="formula-display" id="formula">2H₂O → 通电 → 2H₂↑ + O₂↑</div>

<img src="https://picsum.photos/id/100/400/300" alt="电解水实验装置" class="experiment-img" id="expImg">

<div class="btn-group">

<button class="action-btn" onclick="startCurrentExperiment()">开始实验</button>

<button class="action-btn" onclick="pauseExperiment()">暂停实验</button>

<button class="action-btn" onclick="resetExperiment()">重置实验</button>

<button class="action-btn" onclick="generateReport()">生成实验报告</button>

</div>

</div>

<div class="sidebar-right">

<div class="data-panel">

<h4 style="margin-bottom: 12px;">实时实验数据</h4>

<p>当前温度：<span id="tempDisplay">25</span> ℃</p>

<p>溶液pH值：<span id="phDisplay">7.0</span></p>

<p>反应进度：<span id="progressDisplay">0</span> %</p>

<p>生成物质量：<span id="productDisplay">0</span> g</p>

</div>

<div class="log-panel" id="logPanel">

<p style="color: #6c757d;">系统 欢迎进入实景增强虚拟化学实验室，请选择实验并添加试剂开始操作</p>

</div>

</div>

</div>

</div>

<script>

const experiments = [

{name:"电解水", formula:"2H₂O → 通电 → 2H₂↑ + O₂↑", tempRange:25,30, phRange:7,6, product:"氢气+氧气", imgId:100},

{name:"酸碱中和", formula:"HCl + NaOH = NaCl + H₂O", tempRange:25,35, phRange:2,7, product:"氯化钠溶液", imgId:101},

{name:"氧气制取", formula:"2KMnO₄ →△→ K₂MnO₄ + MnO₂ + O₂↑", tempRange:25,80, phRange:7,7, product:"氧气", imgId:102},

{name:"金属置换", formula:"Fe + CuSO₄ = FeSO₄ + Cu", tempRange:25,32, phRange:5,4, product:"铜单质", imgId:103},

{name:"粗盐提纯", formula:"NaCl(粗) → 溶解→过滤→蒸发→NaCl(纯)", tempRange:25,100, phRange:7,7, product:"精制氯化钠", imgId:104},

{name:"乙酸乙酯合成", formula:"CH₃COOH + C₂H₅OH ⇌ CH₃COOC₂H₅ + H₂O", tempRange:25,70, phRange:3,4, product:"乙酸乙酯", imgId:105}

];

let currentExpIndex = 0;

let experimentTimer = null;

let currentProgress = 0;

// 切换实验

function switchExperiment(index) {

currentExpIndex = index;

document.querySelectorAll('.nav-item').forEach((item,i)=>item.classList.toggle('active',i===index));

document.getElementById('formula').innerText = experimentsindex.formula;

document.getElementById('expImg').src = `https://picsum.photos/id/${experiments\[index\].imgId}/400/300\`;

addLog(`切换实验：${experimentsindex.name}`);

resetExperiment();

}

// 开始实验

function startCurrentExperiment() {

addLog(`开始执行${experimentscurrentExpIndex.name}实验`);

experimentTimer = setInterval(()=>{

currentProgress += 2;

if(currentProgress >= 100) {

clearInterval(experimentTimer);

addLog(`实验完成，成功生成${experimentscurrentExpIndex.product}`);

}

updateDataDisplay();

}, 200);

}

// 更新实时数据

function updateDataDisplay() {

const exp = experimentscurrentExpIndex;

document.getElementById('progressDisplay').innerText = currentProgress;

const temp = exp.tempRange0 + (exp.tempRange1-exp.tempRange0)*currentProgress/100;

document.getElementById('tempDisplay').innerText = temp.toFixed(1);

const ph = exp.phRange0 + (exp.phRange1-exp.phRange0)*currentProgress/100;

document.getElementById('phDisplay').innerText = ph.toFixed(1);

document.getElementById('productDisplay').innerText = (currentProgress*0.05).toFixed(2);

}

// 暂停实验

function pauseExperiment() {

clearInterval(experimentTimer);

addLog('实验已暂停，当前进度：'+currentProgress+'%');

}

// 重置实验

function resetExperiment() {

clearInterval(experimentTimer);

currentProgress = 0;

updateDataDisplay();

addLog('实验已重置，准备重新开始');

}

// 生成实验报告

function generateReport() {

const exp = experimentscurrentExpIndex;

const report = `

=== ${exp.name} 实验报告 ===

实验方程式：${exp.formula}

最终温度：${document.getElementById('tempDisplay').innerText} ℃

最终pH值：${document.getElementById('phDisplay').innerText}

反应进度：100%

生成物：${exp.product}

实验完成时间：${new Date().toLocaleString()}

`;

alert(report);

addLog('已自动生成完整实验报告');

}

// 添加实验日志

function addLog(text) {

const p = document.createElement('p');

p.innerText = `${new Date().toLocaleTimeString()} ${text}`;

document.getElementById('logPanel').appendChild(p);

document.getElementById('logPanel').scrollTop = document.getElementById('logPanel').scrollHeight;

}

// 拖拽功能初始化

document.querySelectorAll('.tool-card').forEach(card=>{

card.addEventListener('dragstart',(e)=>{

e.dataTransfer.setData('text', e.target.querySelector('span').innerText);

});

});

document.getElementById('labArea').addEventListener('dragover',(e)=>e.preventDefault());

document.getElementById('labArea').addEventListener('drop',(e)=>{

e.preventDefault();

const itemName = e.dataTransfer.getData('text');

addLog(`成功添加实验物品：${itemName}`);

});

</script>

</body>

</html>