Comment afficher l'heure en JavaScript dans le format HH:MM:SS?

JS:

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  //add a zero in front of numbers<10
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
  t = setTimeout(function() {
    startTime()
  }, 500);
}
startTime();

HTML:

<div id="time"></div>

DÉMO à l'aide de javaScript que

Mise à jour

mise à Jour de la Démo

(function () {
    function checkTime(i) {
        return (i < 10) ? "0" + i : i;
    }

    function startTime() {
        var today = new Date(),
            h = checkTime(today.getHours()),
            m = checkTime(today.getMinutes()),
            s = checkTime(today.getSeconds());
        document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
        t = setTimeout(function () {
            startTime()
        }, 500);
    }
    startTime();
})();

Vous pouvez le faire dans Javascript.

var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());

À l'heure actuelle il retourne 15:5:18. Notez que si l'une des valeurs sont inférieures à 10, ils vont affichage à l'aide d'un seul chiffre, pas deux.

Vérifier dans JSFiddle

Mises à jour:

Pour le préfixe 0 essayez

var time = new Date();
console.log(
    ("0" + time.getHours()).slice(-2)   + ":" + 
    ("0" + time.getMinutes()).slice(-2) + ":" + 
    ("0" + time.getSeconds()).slice(-2));

new Date().toTimeString().slice(0,8)

Noter que toLocaleTimeString() peut retourner quelque chose comme 9:00:00 AM.

JS:

function realtime() {
  
  let time = moment().format('h:mm:ss a');
  document.getElementById('time').innerHTML = time;
  
  setInterval(() => {
    time = moment().format('h:mm:ss a');
    document.getElementById('time').innerHTML = time;
  }, 1000)
}

realtime();

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

<div id="time"></div>

Une manière très simple à l'aide de moment.js et setInterval.

setInterval(() => {
  moment().format('h:mm:ss a');
}, 1000)

Exemple de sortie

À l'aide de setInterval() mis à 1000ms ou 1 seconde, la sortie de rafraîchissement toutes les 1 seconde.

3:25:50 pm

C'est la façon dont j'utilise cette méthode sur un de mes projets parallèles.

setInterval(() => {
  this.time = this.shared.time;
}, 1000)

Peut-être que vous vous demandez si vous utilisez setInterval() serait la cause de certains problèmes de performances.

Est setInterval CPU intensive?

Je ne pense pas que setInterval est intrinsèquement va vous causer de sérieux problèmes de performance. Je soupçonne que la réputation peut venir d'une époque antérieure, lorsque les Processeurs sont moins puissants. ... - lonesomeday

Non, setInterval n'est pas de CPU et de lui-même. Si vous avez beaucoup d'intervalles de course sur de très courtes cycles (ou une opération très complexe en cours d'exécution sur un assez long intervalle), puis qui peut facilement devenir l'UC, selon exactement ce que votre intervalles sont en train de faire et à quelle fréquence ils le font. ... - aroth

Mais en général, l'utilisation de la méthode setInterval aime vraiment beaucoup sur votre site peut ralentir les choses. 20 en exécutant simultanément des intervalles plus ou moins lourd sur le spectacle. Et puis encore une fois.. vous ne pouvez vraiment gâcher une partie je suppose que ce n'est pas un problème de setInterval. ... - jAndy