如何计算时间和显示在H-M与12小时时钟,基于距离和速度使用javascript

How to calculate time and show in H-M with 12 hour clock, based on distance and speed using javascript

本文关键字:距离 于距离 速度 javascript 时钟 计算 何计算 时间 显示 H-M 12小时      更新时间:2023-09-26

你好,我有一个脚本在javascript显示和计算基于距离和速度的时间,但我不希望它只显示分钟,例如,如果超过60分钟,我希望它显示小时以及12小时时钟格式,如果它少于00:35。我不太擅长阅读和编写javascript编码,所以我找不到在这个脚本中设置的计时区域,以及如何将其更改为显示小时+分钟。谢谢你,希望我没有让这个混乱。很抱歉给你添乱了。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script>
//--------------Settings--------------------------------    
//ISO 3166-1 Alpha-2 country code, use http://en.wikipedia.org/wiki/ISO 3166-2_alpha-2#US
var countrycode="US"
//Rate per mil (2.00)
var ratepermi=2.00;
//Minimum fare (40)
var minimum_fare=50;
//Currrency Symbol
var currencysymbol="$";
//Avoid motorways / highways? true/false
var avoidHighways=false;
//Avoid toll roads? true/false
var avoidTolls=false;
//Show summary? true/false
var showsummary=false;
//Disclaimer text
var disclaimer="Please be aware this is only an estimated fare and the final price will be quoted on request"
var rateperminute=0.45;
var ratio=1.1; // Price will be 110% of the computed estimate
//----------End Settings--------------------------------    
function initialize() 
{
    var options = {componentRestrictions: {country: countrycode}};
    var input = /** @type {HTMLInputElement} */(document.getElementById('inputfrom'));
    var searchBoxfrom = new google.maps.places.Autocomplete(input,options);
    var input = /** @type {HTMLInputElement} */(document.getElementById('inputto'));
    var searchBoxto = new google.maps.places.Autocomplete(input,options);
}
function ftn_estimate()
{
    if (document.getElementById('inputfrom').value!="" && document.getElementById('inputto').value!="")
    {
        var origin = document.getElementById('inputfrom').value;
        var destination = document.getElementById('inputto').value;
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix(
          {
            origins: [origin],
            destinations: [destination],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.IMPERIAL,
            avoidHighways: avoidHighways,
            avoidTolls: avoidTolls,
          }, callback); 
    }
}
function callback(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: ' + status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    for (var i = 0; i < origins.length; i++) {
      var results = response.rows[i].elements;
      for (var j = 0; j < results.length; j++) {
        if(showsummary)
        {
            document.getElementById('summary').innerHTML=origins[i] + ' to ' + destinations[j]  + ': ' + results[j].distance.text + ' in '+ results[j].duration.text;
            document.getElementById('summary').innerHTML+="<br /><font color='red'>" + disclaimer + "</font>"
        }
        document.getElementById('distance').value=(results[j].distance.value/1609.34).toFixed(1);
        document.getElementById('time').value=(results[j].duration.value/60).toFixed(1);
        var calc_fare_dist=(results[j].distance.value/1609.34)*ratepermi;
        var calc_fare_time=(results[j].duration.value/60)*rateperminute;
        // Provided you want to add 0.35 per minute to the "per mile price"
        var calc_fare = (calc_fare_dist + calc_fare_time)*ratio;

        if (calc_fare<minimum_fare)
        {
            calc_fare=minimum_fare;
        }   
        document.getElementById('fare').value=currencysymbol+calc_fare.toFixed(2);
      }
    }
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<link href="../../../../css/style.css" rel="stylesheet" type="text/css">
<center>
      <div id="formbox">
        <h1 class="fare_title">FARE ESTIMATE</h1>
           <div class="div1">
              <span class="ride">Ride in Style</span><img class="check_icon" src="../../../../check2.png" alt="check1"><span class="ride">Safe and Reliable</span><img class="check_icon" src="../../../../check2.png" alt="check1"><span class="ride">Fully Licensed</span><img class="check_icon" src="../../../../check2.png" alt="check1"/>
               </div>
        <input id="inputfrom" type="text" placeholder="From" style="width:400px" class="inputform">
        <h3 style="margin-top: 16px; color: #3F3F3F; text-transform: uppercase;">to</h3>
        <input id="inputto" type="text" placeholder="To" style="width:400px;" class="inputto">
        <br/>
        <input type="button" onclick="ftn_estimate();" value="Estimate Fare" class="fare_button">
        <br/><br/>
        <table class="resultsbox">
            <tr><td class="time_style">Time (mins)</td><td><input id="time" readonly type="text" placeholder="--"></td></tr>
            <tr><td class="distance_style">Distance (mi)</td><td><input id="distance" readonly type="text" placeholder="--"></td></tr>
            <tr><td class="fare_style">Estimated Fare</td><td><input id="fare" readonly type="text" placeholder="--"></td></tr>
        </table>
        <span id="summary"></span>
    </div>
</center>

可以使用以下步骤:

  1. 将值读入变量,比如x;
  2. 用x除以60得到小时,即x/60;
  3. 使用模数(%)运算符获得分钟数,即x%60。
  4. 使用:作为连接器连接小时和分钟。

    var timeInMins= results[j].duration.value; //Read your number of minutes here.
    var hour = parseInt(timeInMins/60);
    var minutes = timeInMins%60;
    var time = hour+":"+minutes;
    document.getElementById('time').value=time;
    

你有最终的结果干杯:)