HTML温度计制作教程：用CSS3与JavaScript实现动态汞柱升降动画

来源：站长平台作者：陈平安时间：04-26

导读：本期聚焦于小伙伴创作的《HTML温度计制作教程：用CSS3与JavaScript实现动态汞柱升降动画》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《HTML温度计制作教程：用CSS3与JavaScript实现动态汞柱升降动画》有用，将其分享出去将是对创作者最好的鼓励。

HTML温度计制作与汞柱动画实现教程

温度计是网页中常见的可视化组件，常用于展示温度、进度、占比等数值类信息。本文将介绍如何使用HTML、CSS和JavaScript制作一个带有汞柱动画效果的温度计，完整实现数值动态变化时的汞柱升降效果。

一、温度计基础结构搭建

温度计的核心结构包括外壳、刻度区域、汞柱容器和汞柱主体四个部分。外壳用于定义温度计的整体外形，刻度区域展示温度数值范围，汞柱容器是汞柱运动的轨道，汞柱主体则根据数值变化调整高度实现动画效果。

首先编写HTML基础结构，使用语义化标签划分不同区域，注意文中提到的HTML标签名称需要转义处理：

<div class="thermometer">
  <div class="thermometer-shell">
    <div class="scale-area">
      <div class="scale">100℃</div>
      <div class="scale">75℃</div>
      <div class="scale">50℃</div>
      <div class="scale">25℃</div>
      <div class="scale">0℃</div>
    </div>
    <div class="mercury-track">
      <div class="mercury-column" id="mercuryColumn"></div>
    </div>
  </div>
  <div class="temperature-display">
    当前温度：<span id="currentTemp">0</span>℃
  </div>
  <div class="control-panel">
    <button onclick="changeTemp(-5)">降温5℃</button>
    <button onclick="changeTemp(5)">升温5℃</button>
  </div>
</div>

二、温度计样式设计

接下来通过CSS定义温度计的外观，包括外壳的圆角、汞柱容器的边框、汞柱的渐变颜色等。汞柱的高度变化通过height属性控制，动画效果使用transition属性实现平滑过渡。

具体样式代码如下：

.thermometer {
  width: 200px;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.thermometer-shell {
  width: 80px;
  height: 400px;
  border: 3px solid #333;
  border-radius: 40px 40px 20px 20px;
  position: relative;
  background-color: #f5f5f5;
  display: flex;
}

.scale-area {
  width: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 5px;
  box-sizing: border-box;
}

.scale {
  font-size: 12px;
  color: #666;
  text-align: right;
}

.mercury-track {
  flex: 1;
  height: calc(100% - 40px);
  margin: 20px 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.mercury-column {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to top, #ff4444, #ff9999);
  border-radius: 10px;
  transition: height 0.8s ease-in-out;
}

.temperature-display {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.control-panel {
  display: flex;
  gap: 15px;
}

.control-panel button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
  font-size: 14px;
}

.control-panel button:first-child {
  background-color: #2196F3;
}

.control-panel button:hover {
  opacity: 0.9;
}

三、汞柱动画逻辑实现

汞柱动画的核心是动态修改汞柱的height属性，同时限制温度数值在0℃到100℃的合理范围内。我们需要定义温度变化函数，当温度改变时，同步更新汞柱高度和显示的温度数值。

JavaScript实现代码如下：

// 初始温度设置为0℃
let currentTemperature = 0;
// 温度计最大高度对应100℃，计算比例系数
const maxTemp = 100;
const minTemp = 0;

// 获取DOM元素
const mercuryColumn = document.getElementById('mercuryColumn');
const currentTempSpan = document.getElementById('currentTemp');

// 温度变化函数，参数diff为变化量，正数升温，负数降温
function changeTemp(diff) {
  // 计算新温度，限制在0-100℃范围内
  let newTemp = currentTemperature + diff;
  if (newTemp > maxTemp) {
    newTemp = maxTemp;
  } else if (newTemp < minTemp) {
    newTemp = minTemp;
  }
  
  // 更新当前温度
  currentTemperature = newTemp;
  // 更新显示的温度数值
  currentTempSpan.textContent = newTemp;
  // 计算汞柱高度百分比，实现同步变化
  const mercuryHeight = (newTemp / maxTemp) * 100;
  mercuryColumn.style.height = mercuryHeight + '%';
}

// 页面加载完成后初始化温度计
window.onload = function() {
  changeTemp(0);
};

四、功能扩展与优化

上述实现已经完成了基础的温度计和汞柱动画效果，还可以根据实际需求进行扩展：

添加输入框，支持手动输入目标温度，点击确认后汞柱平滑过渡到对应高度
为汞柱添加顶部圆球效果，模拟真实温度计的汞柱顶部形态，只需要在.mercury-column顶部添加一个圆形伪元素即可
增加温度阈值警示，当温度超过80℃时汞柱颜色变为深红色，低于10℃时变为蓝色，通过动态修改background属性实现
添加自动升降温演示模式，通过定时器周期性修改温度，展示连续的汞柱动画效果

如果需要参考更多前端组件实现案例，可以访问https://www.ipipp.com查看相关教程。

五、完整代码整合

将HTML、CSS、JavaScript代码整合后，即可得到一个完整的可交互温度计组件，以下是完整示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML温度计汞柱动画实现</title>
  <style>
    .thermometer {
      width: 200px;
      margin: 50px auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .thermometer-shell {
      width: 80px;
      height: 400px;
      border: 3px solid #333;
      border-radius: 40px 40px 20px 20px;
      position: relative;
      background-color: #f5f5f5;
      display: flex;
    }

    .scale-area {
      width: 30px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px 5px;
      box-sizing: border-box;
    }

    .scale {
      font-size: 12px;
      color: #666;
      text-align: right;
    }

    .mercury-track {
      flex: 1;
      height: calc(100% - 40px);
      margin: 20px 10px;
      border: 1px solid #ccc;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      background-color: #fff;
    }

    .mercury-column {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0%;
      background: linear-gradient(to top, #ff4444, #ff9999);
      border-radius: 10px;
      transition: height 0.8s ease-in-out;
    }

    .temperature-display {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }

    .control-panel {
      display: flex;
      gap: 15px;
    }

    .control-panel button {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
      font-size: 14px;
    }

    .control-panel button:first-child {
      background-color: #2196F3;
    }

    .control-panel button:hover {
      opacity: 0.9;
    }
  </style>
</head>
<body>
  <div class="thermometer">
    <div class="thermometer-shell">
      <div class="scale-area">
        <div class="scale">100℃</div>
        <div class="scale">75℃</div>
        <div class="scale">50℃</div>
        <div class="scale">25℃</div>
        <div class="scale">0℃</div>
      </div>
      <div class="mercury-track">
        <div class="mercury-column" id="mercuryColumn"></div>
      </div>
    </div>
    <div class="temperature-display">
      当前温度：<span id="currentTemp">0</span>℃
    </div>
    <div class="control-panel">
      <button onclick="changeTemp(-5)">降温5℃</button>
      <button onclick="changeTemp(5)">升温5℃</button>
    </div>
  </div>

  <script>
    let currentTemperature = 0;
    const maxTemp = 100;
    const minTemp = 0;

    const mercuryColumn = document.getElementById('mercuryColumn');
    const currentTempSpan = document.getElementById('currentTemp');

    function changeTemp(diff) {
      let newTemp = currentTemperature + diff;
      if (newTemp > maxTemp) {
        newTemp = maxTemp;
      } else if (newTemp < minTemp) {
        newTemp = minTemp;
      }
      
      currentTemperature = newTemp;
      currentTempSpan.textContent = newTemp;
      const mercuryHeight = (newTemp / maxTemp) * 100;
      mercuryColumn.style.height = mercuryHeight + '%';
    }

    window.onload = function() {
      changeTemp(0);
    };
  </script>
</body>
</html>

将上述代码保存为HTML文件后，用浏览器打开即可看到完整的温度计效果，点击升降温按钮可以观察到汞柱平滑升降的动画效果。

HTML温度计制作 CSS3动画 JavaScript 汞柱动画前端可视化

免责声明：已尽一切努力确保本网站所含信息的准确性。网站部分内容来源于网络或由用户自行发表，内容观点不代表本站立场。本站是个人网站免费分享，内容仅供个人学习、研究或参考使用，如内容中引用了第三方作品，其版权归原作者所有。若内容触犯了您的权益，请联系我们进行处理。