《哪个传热快》实验数据（修复版）
body {
font-family: "Microsoft YaHei", Arial;
margin: 0;
padding: 10px;
background: #f0f0f0;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
max-width: 100%;
}
.group-box {
background: white;
padding: 10px;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
min-width: 280px;
height: 520px;
overflow: hidden;
display: flex;
flex-direction: column;
}
table {
border-collapse: collapse;
width: 100%;
font-size: 12px;
margin: 8px 0;
}
th, td {
border: 1px solid #ddd;
padding: 4px;
text-align: center;
height: 24px;
}
input[type="number"] {
width: 40px;
padding: 2px;
font-size: 12px;
transition: all 0.3s;
}
input[type="number"]:invalid {
border: 1px solid #ff4444;
background: #FFEBEE;
}
input[type="number"]:focus {
border-color: #4CAF50;
box-shadow: 0 0 3px #4CAF50;
}
.group-number {
width: 50px;
margin-bottom: 6px;
font-size: 12px;
}
.chart-container {
flex: 1;
min-height: 220px;
position: relative;
}
canvas {
height: 100%!important;
width: 100%!important;
}
button {
margin: 8px 0;
background: #4CAF50;
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 13px;
cursor: pointer;
transition: opacity 0.3s;
}
button:hover {
opacity: 0.9;
}
<h2>《哪个传热快》实验数据（正确版）</h2>
<div class="container"></div>
{
const container = document.getElementById('groupsContainer');
// 创建3个实验小组
for(let i=1; i<div style="font-weight:bold; font-size:14px; margin-bottom:6px">
第（）小组
</div>
<table>
<tr><th>时间</th><th>铜棒（℃）</th><th>铝棒（℃）</th><th>铁棒（℃）</th></tr> `
<tr>
<td>${time}s</td>
<td></td>
<td></td>
<td></td>
</tr>`).join('')}
</table>
生成温度曲线
<div class="chart-container">
</div> {
const dataPoints = [];
for(let timeIndex = 0; timeIndex d.data)) + 5 || 100,
ticks: {
stepSize: 5,
precision: 0,
font: { size: 12 }
},
title: {
display: true,
text: '温度 (℃)',
font: { size: 13 }
},
grid: { color: '#eee' }
},
x: {
title: {
display: true,
text: '时间（秒）',
font: { size: 13 }
},
grid: { display: false }
}
},
plugins: {
legend: {
position: 'top',
labels: { font: { size: 12 } }
},
tooltip: {
mode: 'index',
intersect: false,
bodyFont: { size: 12 }
}
},
animation: { duration: 800 }
}
});
};
