js+温度计效果

要在JavaScript中实现一个温度计效果，你可以使用HTML、CSS和JavaScript结合的方式。下面是一个简单的示例，展示了如何创建一个动态更新的温度计效果。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temperature Thermometer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="thermometer-container">
    <div class="thermometer" id="thermometer"></div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

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

.thermometer {
    width: 100%;
    height: 0;
    background-color: red;
    border-radius: 25px 25px 0 0;
    transition: height 0.5s ease-in-out;
}

JavaScript部分（script.js）

function updateTemperature(temperature) {
    const thermometer = document.getElementById('thermometer');
    // 假设温度范围是0到100度
    const maxTemperature = 100;
    const height = (temperature / maxTemperature) * 250; // 250是容器高度减去一些空间
    thermometer.style.height = height + 'px';
}

// 模拟温度变化
setInterval(() => {
    const temperature = Math.floor(Math.random() * 101); // 随机温度0-100
    updateTemperature(temperature);
}, 2000);

解释

HTML：创建了一个容器和一个用于显示温度的红色柱状图。
CSS：设置了容器的样式和温度柱的样式，包括过渡动画效果。
JavaScript：定义了一个函数updateTemperature来根据温度值更新温度柱的高度。使用setInterval模拟温度的变化，每2秒更新一次温度显示。