연비 계산기 스크립트

연비 계산기 스크립트 예제 자료입니다.

연비 계산기 스크립트

연비 계산기를 찾으러 오셨으면 다음 글로 이동해 주세요~ ❤️❤️❤️

<!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>

댓글

댓글 쓰기