简单的汽车每公里费用计算单页源码，只需要填入汽车表显油耗和油价就可以计算出来，计算公式: (百公里油耗 / 100) × 油价 = 每公里费用。
<!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>汽车每公里费用计算HTML源码
版权声明：本文内容来源于网络或网友投稿，如侵犯你的权益，请右侧小窗口联系我们删除。
THE END
