4
votes

Comment puis-je corriger mon chronomètre Javascript avec le format d'heure 00:00? (Secondes: millisecondes)

Existe-t-il un moyen de faire fonctionner un chronomètre? Je n'ai besoin d'aucun bouton de démarrage ou d'arrêt, il devrait simplement exécuter un chronomètre lorsque la page se charge et que le chronomètre doit continuer à fonctionner.

J'ai tout fait fonctionner, mais je ne trouve pas de fonction qui utilise un format de 00 : 00 pour un chronomètre. Y a-t-il une commande qui fait ça?

Le "d.getSeconds ()" ne fait pas ça pour moi.

<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>

</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds"></p>


</body>

#seconds {
  background-color: yellow;
  max-width: 17%;
}

new Date();
var testVar = window.setInterval(update, 10);

function update() {
  var d = new Date();
  document.getElementById("seconds").innerHTML = d.getSeconds();
}

Existe-t-il un moyen de faire en sorte que le innerHTML soit simplement un chronomètre ordinaire au format "00:00"?

javascript function innerhtml stopwatch

0 commentaires

3 Réponses :

1
votes

Vous pouvez utiliser padStart , ainsi que des maths, pour formater le chronomètre:

<h1>Stop Watch</h1>
<p>Elapsed Time:</p>
<p id="seconds"></p>

window.setInterval(update, 1000);
function update(){
    var d = new Date();
    var minutes = Math.floor(d.getSeconds() / 60)
    var seconds = d.getSeconds() % 60
    var time = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    document.getElementById("seconds").innerHTML = time
}

0 commentaires

1
votes

Comme vous le faites, le chronomètre peut démarrer à n'importe quel nombre aléatoire (car il commence aux secondes actuelles). Je suggère simplement de créer le vôtre ci-dessous. Cependant, si vous ne souhaitez pas créer le vôtre, regardez le deuxième ou le troisième extrait de code.

<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>
</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds"></p>

#seconds {
  background-color: yellow;
  max-width: 17%;
}

update();
var testVar = window.setInterval(update, 10);
var seconds;
var milliseconds;
var d;

function update() {
  d = new Date();
  seconds = d.getSeconds();
  milliseconds = Math.floor((d.getMilliseconds() / 10));
  
  if (milliseconds < 10 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":0" + milliseconds;
  }
  else if (milliseconds < 10 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":0" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":" + milliseconds;
  }
}

Si vous voulez continuer à le faire comme vous le faisiez, regardez l'extrait ci-dessous. J'ai obtenu des minutes et des secondes de new Date () et je l'ai essentiellement formaté en utilisant quelques instructions si comme vous le souhaitiez.

<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>
</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds">00:00</p>

#seconds {
  background-color: yellow;
  max-width: 17%;
}

var testVar = window.setInterval(update, 10);
var seconds = 0;
var milliseconds = 1;

function update() {
  if (milliseconds == 100) {
    milliseconds = 0;
    seconds++;
  }
  
  if (milliseconds < 10 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":0" + milliseconds;
  }
  else if (milliseconds < 10 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":0" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":" + milliseconds;
  }
  milliseconds++;
}

5 commentaires

Existe-t-il un moyen de faire cela avec "Seconds". "Millisecondes"? J'ai essayé de jouer avec votre code, mais cela m'a juste donné (exemple) 55,996. Où le 55 augmenterait en quelques secondes et les millisecondes ne changeraient que le «6». Les 99 y resteraient.

@JohnDoee J'en suis presque sûr. Je vais y travailler maintenant

@JohnDoee J'ai mis à jour les deux extraits pour qu'ils soient Seconds: Milliseconds

@JohnDoee la raison pour laquelle cela n'a pas fonctionné pour vous était que 1. Il était mis à jour toutes les secondes pour que les millisecondes ne changent pas. Vous deviez changer le window.setInterval () . 2. Les millisecondes vous ont donné 3 chiffres car c'est ainsi que sont les millisecondes. J'ai dû diviser par 10 pour obtenir 2 chiffres

Merci. Je n'avais pas pensé à ça. Mais après avoir examiné votre code, cela a du sens.

1
votes

Voici un code qui le décompose et le formate correctement.

Note: Nous avons une date de début de base à soustraire, cela nous permet de travailler comme un vrai chronomètre.

<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>

</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds"></p>


</body>

#seconds {
  background-color: yellow;
  max-width: 17%;
}

let base = Date.now(); // Milliseconds
var testVar = window.setInterval(update, 10);

const displayNum = (num) => num.toString().padStart(2,'0');

function update() {
  let mil = Date.now() - base;
  let sec = Math.floor( mil/1000 );
  mil = mil%1000;
  let min = Math.floor( sec/60 );
  sec = sec%60;
  document.getElementById("seconds").innerHTML = `${displayNum(min)}:${displayNum(sec)}:${displayNum(mil)}`;
}

0 commentaires