制作一个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的专属领域。如果你想让用户通过点击按钮来模拟温度上升或下降，或者通过滑动条来精确调节温度，这些交互
评论（已关闭）
评论已关闭