汽车每公里费用计算HTML源码-裕网云资源库

简单的汽车每公里费用计算单页源码，只需要填入汽车表显油耗和油价就可以计算出来，计算公式: (百公里油耗 / 100) × 油价 = 每公里费用。

图片[1]-汽车每公里费用计算HTML源码-裕网云资源库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车每公里费用计算</title>
    <style type='text/css'>
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.calculator {
    max-width: 300px;
    margin: 50px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

label, input, button {
    display: block;
    margin: 10px auto;
    width: 100%;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-sizing: border-box;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

button {
    cursor: pointer;
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

#result span {
    font-weight: bold;
}
#formula {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    text-align: left;
}
</style>
</head>
<body>
    <div class="calculator">
        <label for="fuel-consumption">百公里油耗 (L/100km):</label>
        <input type="number" id="fuel-consumption" min="0" step="0.1" required>

        <label for="oil-price">油价 (元/L):</label>
        <input type="number" id="oil-price" min="0" step="0.01" required>

        <button id="calculate-btn">计算</button>

        <p id="result">每公里费用: <span></span> 元/km</p>
        <p id="formula">计算公式: (百公里油耗 / 100) × 油价 = 每公里费用</p>
    </div>
        <script>
document.getElementById('calculate-btn').addEventListener('click', function() {
    const fuelConsumption = parseFloat(document.getElementById('fuel-consumption').value);
    const oilPrice = parseFloat(document.getElementById('oil-price').value);

    if (!isNaN(fuelConsumption) && !isNaN(oilPrice)) {
        const costPerKm = (fuelConsumption / 100) * oilPrice;
        document.querySelector('#result span').textContent = costPerKm.toFixed(2);
    } else {
        alert('请输入有效的数值');
    }
});
        </script>
</body>
</html>

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。如有侵权请与我们联系处理。QQ：444586924

THE END

html源码网站源码