引導程序動態小時刷新問題

Question

tl; dr：我想刷新popover內部的時間，而不必再次切換（通過單擊）。當它被打開時，它會更新時間。

我想讓我的popover刷新，但我找不到辦法做到這一點。我有動態的小時，它需要每秒更改一次。即使頁面處於活動狀態，也是唯一需要刷新的內容。如果我們需要更新它，另一個會更新。我試圖尋找許多方法來做到這一點，但找不到任何線索。

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

這裏是我的Javascript代碼：

$(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; 
} 

感謝您的幫助傢伙！

Answer 1

下面是更新時鐘簡單的解決方案：

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>

希望它能幫助！