Bootstrap dynamische Stunden aktualisieren Problem

Question

tl; dr: Ich möchte Zeit im Popover aktualisieren, ohne es erneut umschalten (durch Klicken). Wenn es geöffnet wird, aktualisiert es die Zeit.

Ich versuche, meine popover Refresh zu machen, aber ich einen Weg, es zu tun nicht finden kann. Ich habe dynamische Stunden drin, es muss sich jede Sekunde ändern. Es ist der einzige Inhalt, der aktualisiert werden muss, auch wenn die Seite aktiv ist. Der andere wird aktualisiert, wenn wir ihn umschalten, wenn ich ihn auch aktualisieren muss. Ich habe versucht, viele Möglichkeiten zu finden, konnte aber keine Hinweise finden.

<div class="col-md-8" style="padding-top:50px;position: relative;"> 


      <canvas class="canvas" id="canvas" width="650px" height="450px">Votre 
       navigateur ne supporte pas le canevas. 
      </canvas> 
        

      <input type="image" src="images/plane.png" id="planeimg" data-container="body" data-toggle="popover" data-placement="top" 
       title="Données du trajet" data-html="true"/> 

      <!-- POPOVER CONTENT --> 
      <div id="popover-content" class="hide"> 
       <span>Départ : </span> <span id="departPopover">Montreal</span> <br/> 
       <span>Arrivée : </span> <span id="arrivePopover">Toronto</span> <br/> 
       <span>Prochaine ville : </span> <span id="nextCity">Toronto</span> <br/> 
       <span>Vitesse : 500 km/h</span> <br/> 
       <span>Temps restant : </span> <span id="timeLeft">2</span> <span>h</span> <br/> 
       <span>Heure : </span> <span id="timeHours"></span> 
      </div> 
     </div> 

Hier ist mein Javascript-Code:

$(function(){ 
    // Enables popover 
    $("[data-toggle=popover]").popover({ 
     html: true, 
     content: function() { 
      return $('#popover-content').html(); 
     } 
    }); 
}); 


// TIME FUNCTION 
function startTime() { 
    var today = new Date(); 
    var h = today.getHours(); 
    var m = today.getMinutes(); 
    var s = today.getSeconds(); 
    m = checkTime(m); 
    s = checkTime(s); 
    document.getElementById('timeHours').innerHTML = 
    h + ":" + m + ":" + s; 

    var t = setTimeout(startTime, 500); 
} 

function checkTime(i) { 
    if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10 
    return i; 
} 

Vielen Dank für die Hilfe Jungs!

Answer 1

Hier einfache Lösung für die Aktualisierung Uhr:

function startTime() { 
 
    var currentTime = new Date(); 
 
    var h = currentTime.getHours(); 
 
    var m = currentTime.getMinutes(); 
 
    var s = currentTime.getSeconds(); 
 
    
 
    // Pad the minutes and seconds with leading zeros 
 
    m = (m < 10 ? "0" : "") + m; 
 
    s = (s < 10 ? "0" : "") + s; 
 

 
    // AM or PM (for 24h delete this)  
 
    var time = (h < 12) ? "AM" : "PM"; 
 
    
 
    // 12 hour format (for 24h delete this) 
 
    h = (h > 12) ? h - 12 : h; 
 
    
 
    // Conver an hours form 0 to 12 
 
    h = (h == 0) ? 12 : h; 
 
    
 
    // Visual compose 
 
    var display = h + ":" + m + ":" + s + " " + time; 
 
    // (for 24h) 
 
    // var display = h + ":" + m + ":" + s; 
 
    
 
    $("#timeHours").html(display); 
 
    
 
} 
 

 
$(document).ready(function(){ 
 
    setInterval('startTime()', 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="timeHours"></span>

Hoffe, es hilft!