연비 계산기 스크립트 예제 자료입니다.
연비 계산기를 찾으러 오셨으면 다음 글로 이동해 주세요~ ❤️❤️❤️
<!DOCTYPE html>
<html>
<head>
<style>
.calculate-button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
table {
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>스포티지 가솔린 하이브리드 연비 비교 계산기</h2>
<form>
<label for="car1BeomSang">1.6 가솔린 터보 연비 (km/l):</label>
<input type="number" id="car1BeomSang" step="0.1" value="12.5"><br><br>
<label for="car2BeomSang">하이브리드 터보 연비 (km/l):</label>
<input type="number" id="car2BeomSang" step="0.1" value="16.7"><br><br>
<label for="distanceBeomSang">이동거리(km):</label>
<input type="number" id="distanceBeomSang" value="10000"><br><br>
<label for="fuelPriceBeomSang">기름가격(원/l):</label>
<input type="number" id="fuelPriceBeomSang" value="1600"><br><br>
<button class="calculate-button" type="button" onclick="calculateFuelConsumptionBeomSang()">연비 계산하기</button>
</form>
<div id="resultBeomSang"></div>
<script>
function calculateFuelConsumptionBeomSang() {
var car1MPG = parseFloat(document.getElementById("car1BeomSang").value);
var car2MPG = parseFloat(document.getElementById("car2BeomSang").value);
var distance = parseFloat(document.getElementById("distanceBeomSang").value);
var fuelPrice = parseFloat(document.getElementById("fuelPriceBeomSang").value);
var car1FuelConsumption = Math.round((distance / car1MPG) * 100) / 100;
var car2FuelConsumption = Math.round((distance / car2MPG) * 100) / 100;
var car1Cost = Math.round(car1FuelConsumption * fuelPrice);
var car2Cost = Math.round(car2FuelConsumption * fuelPrice);
var costDifference = Math.abs(car2Cost - car1Cost);
var result = document.getElementById("resultBeomSang");
result.innerHTML = `
<table>
<tr>
<th>차량</th>
<th>연비(liters)</th>
<th>비용(원)</th>
</tr>
<tr>
<td>스포티지 1.6 가솔린 터보</td>
<td>${car1FuelConsumption}</td>
<td>${formatNumber(car1Cost)}</td>
</tr>
<tr>
<td>스포티지 하이브리드 터보</td>
<td>${car2FuelConsumption}</td>
<td>${formatNumber(car2Cost)}</td>
</tr>
<tr>
<td colspan="2">비용 비교</td>
<td>${formatNumber(costDifference)}</td>
</tr>
</table>
`;
}
function formatNumber(number) {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</script>
</body>
</html>