Как я могу исправить мой секундомер Javascript с форматом времени 00:00?(секунды: миллисекунды) - PullRequest
Новая
       12

Как я могу исправить мой секундомер Javascript с форматом времени 00:00?(секунды: миллисекунды)

0 голосов
/ 21 февраля 2019

Есть ли способ заставить это запустить секундомер?Мне не нужны кнопки запуска или остановки, он должен просто запускать секундомер при загрузке страницы, а секундомер должен продолжать работать.

Я получил все остальное для работы, но не могу найти функцию, которая используетформат 00:00 для секундомера.Есть ли какая-нибудь команда, которая делает это?

"d.getSeconds ()" не делает это для меня. 

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

function update() {
  var d = new Date();
  document.getElementById("seconds").innerHTML = d.getSeconds();
}
#seconds {
  background-color: yellow;
  max-width: 17%;
}
<!DOCTYPE html>

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

</head>

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


</body>

Есть ли способ сделать innerHTML просто обычным секундомером в формате "00:00"?

Ответы [ 3 ]

0 голосов
/ 21 февраля 2019

Как вы это делаете, секундомер может начинаться с любого случайного числа (потому что оно начинается в текущие секунды).Я бы предложил просто сделать свой собственный ниже. Однако, если вы не хотите делать свой собственный, посмотрите на второй или третий фрагмент. 

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++;
}
#seconds {
  background-color: yellow;
  max-width: 17%;
}
<!DOCTYPE html>

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

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

Если вы хотите продолжить делать то же самое, что и вы, посмотрите на фрагмент ниже.Я получил минуты и секунды от new Date() и в основном отформатировал его, используя несколько операторов if, как вы хотели. 

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;
  }
}
#seconds {
  background-color: yellow;
  max-width: 17%;
}
<!DOCTYPE html>

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

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds"></p>
0 голосов
/ 21 февраля 2019

Вот некоторый код, который разбивает его и правильно форматирует.

Примечание: у нас есть базовая дата начала, которую нужно вычесть, это позволяет нам работать как настоящий секундомер.

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)}`;
}
#seconds {
  background-color: yellow;
  max-width: 17%;
}
<!DOCTYPE html>

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

</head>

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


</body>
0 голосов
/ 21 февраля 2019

Вы можете использовать padStart, а также некоторые математические функции для форматирования секундомера: 

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
}
<h1>Stop Watch</h1>
<p>Elapsed Time:</p>
<p id="seconds"></p>
...