web-dev-qa-db-fra.com

Comment afficher l'heure actuelle en JavaScript au format HH: MM: SS?

Pouvez-vous s'il vous plaît me dire comment régler l'heure dans ce format HH: MM: SS .Je veux définir cela dans un div?

javascriptdatedatetime
63
user2648752
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();
<div id="time"></div>

DÉMO en utilisant du javaScript uniquement

Mettre à jour

Updated Demo

(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();
})();
85
Tushar Gupta - curioustushar

Vous pouvez utiliser la fonction native Date.toLocaleTimeString():

var d = new Date();
var n = d.toLocaleTimeString();

Cela affichera par exemple:

"11:33:01"

Je l'ai trouvé sur http://www.w3schools.com/jsref/jsref_tolocaletimestring.asp

63
pstryk

Vous pouvez le faire dans Javascript.

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

À l'heure actuelle, il renvoie 15:5:18. Notez que si l'une des valeurs est inférieure à 10, elles s'afficheront avec un seul chiffre, pas deux. 

Vérifiez ceci dans JSFiddle

Mises à jour:
Pour les 0 préfixés, essayez

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

Vous pouvez utiliser moment.js pour le faire.

var now = new moment();
console.log(now.format("HH:mm:ss"));

Les sorties:

16:30:03
34
brandonscript
(new Date).toTimeString().slice(0,8)

Notez que toLocaleTimeString () peut renvoyer quelque chose comme 9:00:00 AM.

16
Thorsten

Ce code affiche l'heure actuelle au format HH: MM: SS dans la console, il prend en compte les fuseaux horaires GMT.

var currentTime = Date.now()
var GMT = -(new Date()).getTimezoneOffset()/60;
var totalSeconds = Math.floor(currentTime/1000);
seconds = ('0' + totalSeconds % 60).slice(-2);
var totalMinutes = Math.floor(totalSeconds/60);
minutes = ('0' + totalMinutes % 60).slice(-2);
var totalHours = Math.floor(totalMinutes/60);
hours = ('0' + (totalHours+GMT) % 24).slice(-2);
var timeDisplay = hours + ":" + minutes + ":" + seconds;
console.log(timeDisplay);
//Output is: 11:16:55
1
vanjavk

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();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

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

Un moyen très simple en utilisant moment.js et setInterval .

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

Exemple de sortie

Si setInterval() est défini sur 1000 ms ou 1 seconde, la sortie sera actualisée toutes les secondes.

15h25h50

C'est ainsi que j'utilise cette méthode dans l'un de mes projets annexes.

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

Vous vous demandez peut-être si l'utilisation de setInterval() causerait des problèmes de performances. 

SetInterval est-il consommateur d'UC?

Je ne pense pas que setInterval vous causera de gros problèmes de performances. Je suppose que la réputation pourrait provenir d'une époque antérieure, lorsque les processeurs étaient moins puissants. ... - lonesomeday}

Non, setInterval ne requiert pas beaucoup de ressources processeur. Si vous avez beaucoup d'intervalles exécutés sur des cycles très courts (ou une opération très complexe exécutée sur un intervalle moyennement long), vous risquez facilement de consommer beaucoup de temps processeur. sur exactement ce que vos intervalles font et à quelle fréquence ils le font. ... - aroth _

Mais en général, utiliser setInterval comme si beaucoup de choses sur votre site pouvait ralentir les choses. 20 intervalles simultanés avec un travail plus ou moins lourd affecteront la série. Et encore… vous pouvez vraiment gâcher n'importe quelle partie, je suppose ce n'est pas un problème de setInterval. ... - jAndy

0
Vadamadafaka

Voici un exemple de la façon de définir l'heure dans un div (only_time) à l'aide de javascript.

function date_time() {
    var date = new Date();
    var am_pm = "AM";
    var hour = date.getHours();
    if(hour>=12){
        am_pm = "PM";
    }
    if (hour == 0) {
        hour = 12;
    }
    if(hour>12){
        hour = hour - 12;
    }
    if(hour<10){
        hour = "0"+hour;
    }

    var minute = date.getMinutes();
    if (minute<10){
        minute = "0"+minute;
    }
    var sec = date.getSeconds();
    if(sec<10){
        sec = "0"+sec;
    }

    document.getElementById("time").innerHTML =  hour+":"+minute+":"+sec+" "+am_pm;
}
setInterval(date_time,500);
<per>
<div class="date" id="time"></div>
</per>
0
A.S.Abir