Créer une horloge en direct au format 00:00
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 getMinutes
pour 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
Vous devez utiliser à la setInterval
place de setTimeout
. De plus, vous pouvez utiliser la padStart()
fonction pour ajouter des zéros non significatifs à vos string
valeurs.
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>
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>