当前位置：首页 > news >正文

用 Deepseek 写的html油耗计算器

news 来源：原创 2025/5/21 14:40:50

在油价高企的今天，了解自己爱车的真实油耗情况对每位车主来说都至关重要。本文将介绍一个简单实用的油耗计算方法，并提供一个可以直接使用的HTML油耗计算器。

为什么要计算油耗？

计算油耗不仅能帮助我们：

了解车辆的真实燃油经济性
及时发现车辆可能存在的机械问题
更准确地规划出行预算
比较不同驾驶习惯对油耗的影响

油耗计算方法

最准确的油耗计算方法是"加满油法"：

将油箱加满至自动跳枪
记录当前里程表读数
正常行驶一段时间后再次加满油
记录加油金额、油价和行驶里程

通过这些数据，我们可以计算出三个关键指标：

1. 实际加油量

加油量(升) = 加油金额(元) ÷ 油价(元/升)

2. 百公里油耗

百公里油耗(升) = (加油量 ÷ 行驶里程) × 100

3. 每公里油费

每公里油费(元) = 加油金额 ÷ 行驶里程

在线油耗计算器

为了方便大家计算，我制作了一个简单实用的在线油耗计算器：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>油耗计算器</title><style>body {font-family: 'Arial', sans-serif;max-width: 500px;margin: 0 auto;padding: 20px;background-color: #f5f5f5;}.calculator {background-color: white;padding: 25px;border-radius: 10px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}h1 {text-align: center;color: #333;margin-bottom: 25px;}.input-group {margin-bottom: 15px;}label {display: block;margin-bottom: 5px;font-weight: bold;color: #555;}input {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 5px;box-sizing: border-box;}button {width: 100%;padding: 12px;background-color: #4CAF50;color: white;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;margin-top: 10px;}button:hover {background-color: #45a049;}.result {margin-top: 20px;padding: 15px;background-color: #f9f9f9;border-radius: 5px;display: none;}.result-item {margin-bottom: 10px;}.result-value {font-weight: bold;color: #2196F3;}</style>
</head>
<body><div class="calculator"><h1>油耗计算器</h1><div class="input-group"><label for="price">当前油价 (元/升)</label><input type="number" id="price" step="0.01" placeholder="例如：7.85"></div><div class="input-group"><label for="money">加油金额 (元)</label><input type="number" id="money" step="1" placeholder="例如：300"></div><div class="input-group"><label for="distance">行驶里程 (公里)</label><input type="number" id="distance" step="1" placeholder="例如：450"></div><button onclick="calculate()">计算油耗</button><div class="result" id="result"><h3>计算结果</h3><div class="result-item">加油量: <span class="result-value" id="fuel">0</span> 升</div><div class="result-item">百公里油耗: <span class="result-value" id="consumption">0</span> 升/百公里</div><div class="result-item">每公里油费: <span class="result-value" id="costPerKm">0</span> 元</div></div></div><script>function calculate() {// 获取输入值const price = parseFloat(document.getElementById('price').value);const money = parseFloat(document.getElementById('money').value);const distance = parseFloat(document.getElementById('distance').value);// 验证输入if (isNaN(price) || isNaN(money) || isNaN(distance) || price <= 0 || money <= 0 || distance <= 0) {alert('请输入有效的正数数值');return;}// 计算const fuel = money / price; // 加油量(升)const consumption = (fuel / distance) * 100; // 百公里油耗(升/百公里)const costPerKm = money / distance; // 每公里油费(元)// 显示结果document.getElementById('fuel').textContent = fuel.toFixed(2);document.getElementById('consumption').textContent = consumption.toFixed(2);document.getElementById('costPerKm').textContent = costPerKm.toFixed(2);// 显示结果区域document.getElementById('result').style.display = 'block';}</script>
</body>
</html>