Créer une horloge en direct au format 00:00

Nov 26 2020

Comment créer une horloge en direct au format 00:00 ? J'ai inclus mon code ci-dessous. Existe-t-il un moyen de faire cela mieux ou avec un code plus court?

HTML

<body onload=display_ct();>
<span id='ct'></span>

Il ne nous reste plus qu'à ajouter la partie javascript. Cela actualise l'horloge toutes les secondes afin que son " Live ". Il utilise également des fonctions comme getMinutespour récupérer l'heure actuelle.

Javascript

function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var x = new Date()
x1 = x.getHours( )+ ":" +  x.getMinutes();
document.getElementById('ct').innerHTML = x1;
display_c();
 }

Les 1000 millisecondes peuvent être échangées avec plus ou moins. 1000 est égal à 1 seconde, ce qui signifie que 500 ms équivaut à 0,5 seconde.

Je vais inclure mon code dans un exécutable ici:

function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var x = new Date()
x1 = x.getHours( )+ ":" +  x.getMinutes();
document.getElementById('ct').innerHTML = x1;
display_c();
 }
<body onload=display_ct();>
<span id='ct'></span>

Réponses

3 firatozcevahir Nov 26 2020 at 14:08

Vous devez utiliser à la setIntervalplace de setTimeout. De plus, vous pouvez utiliser la padStart()fonction pour ajouter des zéros non significatifs à vos stringvaleurs.

Ps: Parce que vous n'affichez que les heures et les minutes, l'horloge sera mise à jour toutes les minutes, au lieu de toutes les secondes (la fonction s'exécute toujours toutes les secondes)

function display_c() {
  var refresh = 1000; // Refresh rate in milli seconds
  mytime = setInterval(display_ct, refresh)
}

function display_ct() {
  var x = new Date()
  x1 = x.getHours().toString().padStart(2,0) + ":" + x.getMinutes().toString().padStart(2,0);
  document.getElementById('ct').innerHTML = x1;
  display_c();
}
<body onload=display_ct();>
  <span id='ct'></span>

1 kernel Nov 26 2020 at 14:16

faire un js à l'intérieur ou à l'extérieur de votre page principale comme ceci

Vous devez avoir un élément avec MyClockDisplay comme id pour ce code

    function showTime() {
        var date = new Date();
        var h = date.getHours(); // 0 - 23
        var m = date.getMinutes(); // 0 - 59
        var s = date.getSeconds(); // 0 - 59
        var session = "AM";
        if (h == 0) {
            h = 12;
        }
        if (h > 12) {
            h = h - 12;
            session = "PM";
        }
        h = h < 10 ? "0" + h : h;
        m = m < 10 ? "0" + m : m;
        s = s < 10 ? "0" + s : s;
        var time = h + ":" + m + ":" + s + " " + session;
        document.getElementById("MyClockDisplay").innerText = time;
        document.getElementById("MyClockDisplay").textContent = time;
        setTimeout(showTime, 1000);
    }
    showTime();
<div id="MyClockDisplay"></div>