Question

实际上，我想获取两个本地日期和时间之间的确切时差，并且应该每秒钟更新一次时间吗？我用数学。函数来计算小时，分钟，秒和天这是我使用的代码。

<html>
     <div class="form-group">
                <label for="exampleInputName" style="color: #ffffff;">Start Time</label>
                <input id="sdt" value="" type="datetime-local" class="form-control" name="Sdt">
            </div>
                         <div class="form-group">
                <label for="exampleInputName" style="color: #ffffff;">End Time</label>
                <input id="edt" value="" type="datetime-local" class="form-control" name="Edt">
            </div>

            <input id="btnAdded"  onclick="st()" type="button" class="btn btn-primary btn-block" name="sub" value="Start" style="width:100px;width:100px; margin-left:10px;display:flex;justify-content: center;border-radius: 20px;">

<p id="demo" style="  text-align: center;
  font-size: 60px;
  margin-top: 0px; margin-left: 170px;
    float: left;"></p>

<script>
    function st()
    {
var endtime = document.getElementById("edt").value;
    var x = setInterval(function() {

  var starttime = document.getElementById("sdt").value;
  var distance = endtime - starttime;



  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);}
</script>

Answer 1

您需要将value的日期选择器转换为Date。然后使用getTime()获得毫秒数。并在每次函数调用期间将distance减少1000（1秒）。

function st()
    {
       var starttime = document.getElementById("sdt").value;
       var endtime = document.getElementById("edt").value;
       //this is correct way to get time gap between two dates
       var distance = (new Date(endtime)).getTime() - (new Date(starttime)).getTime();
    console.log(starttime,endtime);
    var x = setInterval(function() {

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
  //This line is added to decrease distance by 1 second 
  distance -= 1000
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);}

<div class="form-group">
                <label for="exampleInputName" style="color: #ffffff;">Start Time</label>
                <input id="sdt" value="" type="datetime-local" class="form-control" name="Sdt">
            </div>
                         <div class="form-group">
                <label for="exampleInputName" style="color: #ffffff;">End Time</label>
                <input id="edt" value="" type="datetime-local" class="form-control" name="Edt">
            </div>

            <input id="btnAdded"  onclick="st()" type="button" class="btn btn-primary btn-block" name="sub" value="Start" style="width:100px;width:100px; margin-left:10px;display:flex;justify-content: center;border-radius: 20px;">

<p id="demo" style="  text-align: center;
  font-size: 60px;
  margin-top: 0px; margin-left: 170px;
    float: left;"></p>

Answer 2

您可以尝试一下。我对代码进行了重构。

<div class="form-group">
  <label for="exampleInputName" style="color: #ffffff;">Start Time</label>
    <input id="sdt" value="" type="datetime-local" class="form-control" name="Sdt">
</div>
<div class="form-group">
  <label for="exampleInputName" style="color: #ffffff;">End Time</label>
    <input id="edt" value="" type="datetime-local" class="form-control" name="Edt">
</div>

<input id="btnAdded"  onclick="st()" type="button" class="btn btn-primary btn-block" name="sub" value="Start" style="width:100px;width:100px; margin-left:10px;display:flex;justify-content: center;border-radius: 20px;">

<p id="demo" style="text-align: center;font-size: 60px;margin-top: 0px; margin-left: 170px;float: left;"></p>


<script>
  function getVals (diff) {
    var days = Math.floor(diff / (24 * 60 * 60));
    var hours = Math.floor(diff / (60 * 60)) % 24;
    var minutes = Math.floor(diff / 60) % 60;
    var secs = diff % 60;
    return {
        days, hours, minutes, secs,
    };
  }
  function st() {
    var endtime = document.getElementById("edt").valueAsNumber;
    var starttime = document.getElementById("sdt").valueAsNumber;
    var distance = (endtime - starttime)/1000;
    var x = setInterval(function() {
      distance -= 1;
      // Time calculations for days, hours, minutes and seconds

      var time = getVals(distance);

      // Output the result in an element with id="demo"
      document.getElementById("demo").innerHTML = time.days + "d " + time.hours + "h "
      + time.minutes + "m " + time.secs + "s ";

      // If the count down is over, write some text 
      if (distance < 0) {
        console.log('Comes here');
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
      }
    }, 1000);
  }
</script>

我该如何把握两个本地日期时间之间的确切差异，应该像秒表一样每秒更新一次时间？

2 个答案: