用 Deepseek 写的html油耗计算器

最新推荐文章于 2025-05-02 16:45:26 发布

—Qeyser

最新推荐文章于 2025-05-02 16:45:26 发布

阅读量962

点赞数 3

分类专栏： Html 文章标签： deepseek 前端 javascript html css css3

本文链接：https://blog.csdn.net/weixin_42581036/article/details/147298791

版权

Html 专栏收录该内容

14 篇文章

订阅专栏

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