js css3 温度计效果

<div class="thermometer">
  <div class="temperature" id="temperature"></div>
</div>

.thermometer {
  width: 50px;
  height: 300px;
  background-color: #f0f0f0;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
}

.temperature {
  width: 100%;
  height: 0;
  background-color: #ff4500;
  position: absolute;
  bottom: 0;
  transition: height 0.5s ease-in-out;
}

function setTemperature(value) {
  const tempElement = document.getElementById('temperature');
  const percentage = (value / 100) * 100; // 假设温度范围是0-100度
  tempElement.style.height = `${percentage}%`;
}

// 示例：设置温度为75度
setTemperature(75);