制作一个HTML温度计，并让它的“汞柱”动起来，核心在于HTML提供结构，CSS负责视觉呈现和动画效果，而JavaScript则是驱动温度变化和控制动画的关键大脑。它不是什么高深莫测的技术，更多是前端基础知识的巧妙组合。
要构建一个可动的HTML温度计，我们通常会从三个层面入手：结构、样式和行为。
结构（HTML）： 想象一下真实的温度计，它有一个主体，一个刻度，以及一根水银柱。在HTML里，我们可以这样组织：
<div class="thermometer-container">
<div class="thermometer-body">
<div class="thermometer-scale"></div>
<div class="mercury-column" style="height: 0%;"></div>
</div>
<div class="temperature-display">0°C</div>
</div>thermometer-container是外部包裹，
thermometer-body是温度计的主体部分，
thermometer-scale放置刻度线，而
mercury-column就是我们要动画的水银柱。
temperature-display用来显示当前的温度数值。
样式（CSS）： 这是让它看起来像个温度计，并且能动起来的关键。
thermometer-container
和thermometer-body
定义尺寸、背景和圆角，让它有温度计的形状。thermometer-scale
可以用渐变背景或者重复的div
元素来模拟刻度线。mercury-column
是重点。给它一个红色的背景（或者你喜欢水银的银色），position: absolute; bottom: 0;
让它从底部开始填充。最重要的是，它的height
属性将是动态变化的，并且我们会给它加上transition
属性，让高度变化时有一个平滑的动画效果。.thermometer-body { width: 40px; height: 200px; border: 1px solid #ccc; border-radius: 20px; position: relative; overflow: hidden; /* 确保水银柱不会溢出 */ background: linear-gradient(to top, #eee 0%, #fff 100%); }
.mercury-column { position: absolute; bottom: 0; left: 50%; / 居中 / transform: translateX(-50%); / 居中 / width: 70%; / 水银柱的宽度 / background-color: #ff0000; / 汞柱颜色 / border-radius: 0 0 15px 15px; / 底部圆角 / transition: height 0.8s ease-in-out; / 动画关键 / }
/ 刻度线可以用伪元素或重复div，这里简化 / .thermometer-scale { position: absolute; width: 100%; height: 100%; background: repeating-linear-gradient(to top, #ccc 0px, #ccc 1px, transparent 1px, transparent 10px); opacity: 0.7; z-index: 1; / 确保在水银柱之上 / }
**行为（JavaScript）：**
JavaScript是让温度计“活”起来的引擎。它负责获取用户输入（或模拟数据），计算出水银柱应该达到的高度，然后更新DOM。
- 首先，获取到水银柱元素和温度显示元素的引用。
- 接着，定义一个函数，接收一个温度值作为参数。
- 这个函数需要将温度值映射到水银柱的百分比高度。例如，如果温度计范围是0°C到100°C，那么50°C就对应50%的高度。
- 更新水银柱的 `style.height` 属性，同时更新温度显示文本。
```javascript
const mercuryColumn = document.querySelector('.mercury-column');
const tempDisplay = document.querySelector('.temperature-display');
const minTemp = 0; // 温度计的最低温度
const maxTemp = 100; // 温度计的最高温度
const thermometerHeightPx = 200; // 温度计主体的高度，用于计算
function setTemperature(temp) {
// 确保温度在有效范围内
temp = Math.max(minTemp, Math.min(maxTemp, temp));
// 将温度映射到0-100的百分比
const percentage = ((temp - minTemp) / (maxTemp - minTemp)) * 100;
// 更新水银柱高度
mercuryColumn.style.height = percentage + '%';
// 或者如果你想用像素，需要考虑水银柱的实际高度
// mercuryColumn.style.height = (percentage / 100) * thermometerHeightPx + 'px';
// 更新温度显示
tempDisplay.textContent = temp + '°C';
}
// 示例：设置温度
// setTemperature(25); // 初始显示25度
// 可以通过按钮或滑块来改变温度
// document.getElementById('increaseTempBtn').addEventListener('click', () => {
// let currentTemp = parseFloat(tempDisplay.textContent);
// setTemperature(currentTemp + 5);
// });如何通过CSS实现水银柱的动态上升效果？
让水银柱动起来，CSS的
transition属性是这里的核心魔法。它允许你指定当一个元素的某个属性值发生变化时，这个变化不是瞬间完成，而是平滑地过渡到新值。对于水银柱，我们主要关注其
height属性。
立即学习“前端免费学习笔记（深入）”；
当你用JavaScript改变
mercury-column元素的
height样式，比如从
0%变为
50%，如果
transition没有设置，这个变化会立即发生，看起来很生硬。但只要你在CSS中为
mercury-column添加了这样一行：
.mercury-column {
/* ... 其他样式 ... */
transition: height 0.8s ease-in-out;
}这意味着当
height属性发生变化时，它会在0.8秒内以
ease-in-out（开始和结束慢，中间快）的速度平滑地过渡。这种方式非常简洁高效，浏览器会负责中间帧的渲染，我们无需手动编写复杂的动画逻辑。
除了
height，理论上你也可以尝试使用
transform: scaleY()来实现高度变化，它可能在某些情况下提供更好的性能（因为
transform不会引起布局重排）。例如，你可以将水银柱的初始高度设置为其最大高度的某个基准值，然后通过改变
transform: scaleY(0.5)来使其高度变为一半。但对于初学者而言，直接操作
height更直观，也足以应对大多数场景。关键在于，无论用哪种方式，
transition都是实现平滑动画的利器。
JavaScript在HTML温度计中扮演什么角色？
如果说HTML是骨架，CSS是皮肤，那么JavaScript就是这个温度计的“大脑”和“神经系统”。它的角色远不止是简单地改变一个数字那么简单，它负责整个温度计的动态逻辑和交互。
首先，JavaScript是数据与视图的桥梁。真实的温度计需要感知温度变化，在我们的HTML版本里，这个“感知”就是通过JavaScript来模拟的。无论是从一个模拟传感器获取数据，还是响应用户点击按钮来“升高”或“降低”温度，JavaScript都会捕获这些“输入”。
接着，它承担了核心的逻辑计算。温度值通常有一个范围（比如-20°C到50°C），而水银柱的高度则对应一个像素或百分比范围。JavaScript需要将输入的温度值，通过一个映射函数（通常是线性插值），精确地转换成水银柱在视觉上应该达到的高度。这是一个数学上的转换，确保了温度计的准确性。
然后，就是DOM操作了。计算出新的高度后，JavaScript会直接修改水银柱元素的
style.height属性。同时，它也会更新显示温度数值的文本元素（例如
textContent），确保用户看到最新的读数。这种直接操作DOM的能力，是JavaScript驱动前端动态效果的基础。
最后，事件处理也是JavaScript的专属领域。如果你想让用户通过点击按钮来模拟温度上升或下降，或者通过滑动条来精确调节温度，这些交互
