Skip to main content

✅ | GasCal.php

This page helps you to calculate your Fuel Cost and converts it.

<!DOCTYPE html>
<html>
<head>
  <title>Fuel Price Calculator</title>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=0.8">
  <style>
        @media (max-width: 980px) {
          body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #007eca;
          }
        }
        @media (min-width: 981px) {
          body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #007eca;
            background-image: url("https://dl.itslittlekevin.com/projects/5069.png");
            background-repeat: no-repeat;
            background-position: right center;
            background-size: auto 100%;
          }
        }
        h1, p, h4 {
          text-shadow: 2px 2px 2px #00000055;
        }
    * {
        color: white;
    }
    button {
        font-size: 15px;
        background-color: #00325565;
        padding: 5px 15px;
        border-radius: 5px;
        border-width: 0px;
        margin: 5px;
        cursor: pointer;
    }
      h4 a {
        text-decoration: none;
    }
      input {
        color: black;
    }    
    #app {
      text-align: center;
    }
  </style>
  <script>
    function convertMPGtoLP100K(mpg) {
      // Convert MPG to LP100K (Liters per 100 Kilometers)
      return 235.214583 / mpg;
    }

    function convertLP100KtoMPG(lp100k) {
      // Convert LP100K (Liters per 100 Kilometers) to MPG
      return 235.214583 / lp100k;
    }

    function convertMilesToKm(miles) {
      // Convert miles to kilometers
      return miles * 1.60934;
    }

    function convertKmToMiles(km) {
      // Convert kilometers to miles
      return km / 1.60934;
    }
    function clearForm() {
      document.getElementById('mpg').value = '';
      document.getElementById('lp100k').value = '';
      document.getElementById('miles').value = '';
      document.getElementById('km').value = '';
      document.getElementById('usdPerGallon').value = '';
      document.getElementById('cnyPerLiter').value = '';
      document.getElementById('conversionRate').value = '';
      document.getElementById('results').innerHTML = '';
    }
    
    function calculate() {
      // Retrieve input values and conversion rate
      let conversionRate = parseFloat(document.getElementById('conversionRate').value);
      let mpg = parseFloat(document.getElementById('mpg').value);
      let lp100k = parseFloat(document.getElementById('lp100k').value);
      let miles = parseFloat(document.getElementById('miles').value);
      let km = parseFloat(document.getElementById('km').value);
      let usdPerGallon = parseFloat(document.getElementById('usdPerGallon').value);
      let cnyPerLiter = parseFloat(document.getElementById('cnyPerLiter').value);

      // Convert and fill placeholders
      if (mpg) {
        lp100k = convertMPGtoLP100K(mpg);
        document.getElementById('lp100k').value = lp100k.toFixed(2);
      } else if (lp100k) {
        mpg = convertLP100KtoMPG(lp100k);
        document.getElementById('mpg').value = mpg.toFixed(2);
      }

      if (miles) {
        km = convertMilesToKm(miles);
        document.getElementById('km').value = km.toFixed(2);
      } else if (km) {
        miles = convertKmToMiles(km);
        document.getElementById('miles').value = miles.toFixed(2);
      }

      if (usdPerGallon) {
        cnyPerLiter = (usdPerGallon / 3.78541) * conversionRate; // Convert USD/Gallon to CNY/Liter
        document.getElementById('cnyPerLiter').value = cnyPerLiter.toFixed(2);
      } else if (cnyPerLiter) {
        usdPerGallon = (cnyPerLiter * 3.78541) / conversionRate; // Convert CNY/Liter to USD/Gallon
        document.getElementById('usdPerGallon').value = usdPerGallon.toFixed(2);
      }

      // Calculate total and average costs
      let totalCostUSD = (miles / mpg) * usdPerGallon;
      let totalCostCNY = (km * lp100k) / 100 * cnyPerLiter;
      let averageCostPerMileUSD = totalCostUSD / miles;
      let averageCostPerKmCNY = totalCostCNY / km;

      // Display results
      document.getElementById('results').innerHTML = `Total: ¥${totalCostCNY.toFixed(2)} / $${totalCostUSD.toFixed(2)} <br> ¥${averageCostPerKmCNY.toFixed(2)} / $${averageCostPerMileUSD.toFixed(2)} per Mile <br> ¥${(averageCostPerKmCNY * 1.60934).toFixed(2)} / $${(averageCostPerMileUSD / 1.60934).toFixed(2)} per KM`;
    }
  </script>
</head>
<body>
  <div id="app">
    <h1>燃油开销计算&对比<br>Fuel Cost & Compare</h1>
    <!-- Content here -->
     <br> ↓ 油耗 | Avg. MPG ↓ <br> <input type="number" id="mpg" placeholder="MPG (Mile Per Gallon)" onchange="calculate()">
     <br><br> ↓ 油耗 | Avg. L/.1M ↓ <br> <input type="number" id="lp100k" placeholder="Liter per 100 Kilometers" onchange="calculate()">
     <br><br> ↓ 总距离 | Dist. Mi ↓ <br> <input type="number" id="miles" placeholder="Distance in Miles" onchange="calculate()">
     <br><br> ↓ 总距离 | Dist. KM ↓ <br> <input type="number" id="km" placeholder="Distance in Kilometers" onchange="calculate()">
     <br><br> ↓ 油价 | USD/Gal ↓ <br> <input type="number" id="usdPerGallon" placeholder="Gas Price as USD/Gallon" onchange="calculate()">
     <br><br> ↓ 油价 | CNY/Lit ↓ <br> <input type="number" id="cnyPerLiter" placeholder="Gas Price as CNY/Liter" onchange="calculate()">
     <br><br> ↓ 汇率 | Exc. $->￥ ↓<br> <input type="number" id="conversionRate" placeholder="USD to RMB Rate" onchange="calculate()">
     <br><br> <button onclick="calculate()">计算 | Calculate</button> | <button onclick="clearForm()">Clear</button>
    <div id="results"></div>
    <h4><a href="https://itslittlekevin.com/gadgetslist">»返回工具列表 | Return to Gadgets List«</a></h4>
    <p>© itsLittleKevin · All rights reserved.</p>
  </div>
</body>
</html>

 

Back to top