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

王铁柱666

于 2025-02-13 08:12:51 发布

阅读量341

点赞数 4

CC 4.0 BY-SA版权

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/2401_87873725/article/details/145603674

要使用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="bulb"></div>
        <div class="tube">
            <div class="mercury" style="height: 50%;"></div> <!-- 初始高度为50%，可以根据需要调整 -->
            <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>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.thermometer {
    position: relative;
    width: 40px;
    height: 200px;
    background-color: transparent;
}

.bulb {
    position: absolute;
    bottom: 0;
    width: 60px;
    height: 60px;
    background-color: #ff6347; /* Tomato 红色 */
    border-radius: 50%;
    left: -10px; /* 使灯泡居中 */
}

.tube {
    position: absolute;
    width: 20px;
    height: 140px;
    background-color: #ddd;
    top: 20px; /* 与灯泡顶部对齐 */
    left: 10px; /* 使管子居中 */
    border-radius: 10px;
}

.mercury {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #ff6347; /* 与灯泡相同的颜色 */
    border-radius: 10px 10px 0 0; /* 只在顶部添加圆角 */
}

.scale {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tick {
    position: relative;
    text-align: center;
    transform: translateX(-50%); /* 使刻度标签居中 */
    left: 50%;
}

JavaScript (script.js) - 可选，用于动态控制水银高度

如果你想要动态地改变温度计中的水银高度，你可以添加一些JavaScript代码。例如：

const mercury = document.querySelector('.mercury');
const maxHeight = mercury.parentElement.offsetHeight; // 管子的高度

// 示例：设置水银高度为70%
setMercuryHeight(0.7); // 0.7 表示 70%

function setMercuryHeight(percentage) {
    mercury.style.height = `${Math.round(percentage * maxHeight)}px`;
}

在这个示例中，我创建了一个简单的HTML结构来表示温度计，包括一个灯泡（.bulb）、一个管子（.tube）和管子内的水银（.mercury）。CSS用于样式化这些元素，而JavaScript则用于动态控制水银的高度。你可以根据需要调整HTML、CSS和JavaScript代码来满足你的具体需求。