使用HTML5制作一个刻度温度计

创建一个HTML5的刻度温度计，你需要使用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>刻度温度计</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="thermometer">
        <div class="thermometer-body">
            <div class="mercury" style="height: 50%;"></div>
        </div>
        <div class="scale">
            <div class="tick" style="bottom: 0;">0°C</div>
            <div class="tick" style="bottom: 20%;">20°C</div>
            <div class="tick" style="bottom: 40%;">40°C</div>
            <div class="tick" style="bottom: 60%;">60°C</div>
            <div class="tick" style="bottom: 80%;">80°C</div>
            <div class="tick" style="bottom: 100%;">100°C</div>
        </div>
    </div>
</body>
</html>

CSS (styles.css)

.thermometer {
    position: relative;
    width: 50px;
    height: 300px;
    margin: 50px auto;
}

.thermometer-body {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    border: 2px solid #999;
}

.mercury {
    position: absolute;
    width: 100%;
    background-color: red;
    bottom: 0;
}

.scale {
    position: absolute;
    width: 100%;
    height: 100%;
}

.tick {
    position: absolute;
    width: 100%;
    text-align: center;
    transform: translateX(-50%);
    left: 50%;
}

JavaScript (可选)

如果你想让温度计动态地根据某种输入（例如，从服务器获取的温度数据）变化，你可以使用JavaScript来改变.mercury元素的高度。例如：

<script>
    function updateTemperature(temperature) {
        var mercury = document.querySelector('.mercury');
        var maxHeight = mercury.parentNode.offsetHeight;
        var newHeight = (temperature / 100) * maxHeight; // 假设温度范围是0-100°C
        mercury.style.height = newHeight + 'px';
    }
    // 示例：设置温度为75°C
    updateTemperature(75);
</script>

这个示例代码创建了一个简单的刻度温度计，其中.thermometer是包含整个温度计的容器，.thermometer-body代表温度计的主体，.mercury代表温度计中的液体（在这个例子中是红色的），而.scale和.tick则用于显示刻度。你可以根据需要调整CSS样式来适应你的设计。

posted @ 2024-12-23 09:14  王铁柱6  阅读(96)  评论(0)    收藏  举报