Вычисление истекшего времени и помещение его в Дни: Часы: Минуты: Формат секунд в javascript, где время обновляется каждую секунду - PullRequest
Новая
       30

Вычисление истекшего времени и помещение его в Дни: Часы: Минуты: Формат секунд в javascript, где время обновляется каждую секунду

3 голосов
/ 03 июня 2019

Я пытаюсь вычислить время, прошедшее между установленным объектом даты и времени и текущим временем.Я хочу, чтобы он мог отображаться в следующем формате: ДД: ЧЧ: ММ: СС, где ДД - день, ЧЧ - часы, ММ - минуты, СС - секунды. Я могу получить общий день, общее количество часов, общее количество минут иВсего секунд, но я не уверен, как отформатировать его так, как я хочу.Пожалуйста, помогите 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>timer</title>   
</head>
<body >
<div id ="time" name ="timer"></div>

<script>
var myVar = setInterval(myTimer, 1000);

function myTimer() {

  let seconds = 1000 ;
  let minutes = seconds * 60;
  let hours = minutes * 60;
  let days = hours * 24;
  let years = days * 365;


  const startDateTime = new Date("June 2, 2019 12:36:10 AM");
  const newDateTime = new Date();

  let timeDiff = newDateTime - startDateTime;

  let totalSeconds = Math.round(timeDiff/seconds);


  document.getElementById("time").innerHTML = totalSeconds;
}
</script>

</body>

</html>

1 Ответ

3 голосов
/ 03 июня 2019

Я бы посоветовал вам использовать библиотеку наподобие Moment.js , но если вы хотите сделать это в простом Javascript, вы можете просто разделить общее количество секунд с параметрами разделения, которые вы уже определили, и pad.их с нулем, когда они меньше десяти. 

var myVar = setInterval(myTimer, 1000);

const seconds = 1000;
const minutes = seconds * 60;
const hours = minutes * 60;
const days = hours * 24;
const years = days * 365;

function myTimer() {
  const startDateTime = new Date("June 2, 2019 12:36:10 AM");
  const newDateTime = new Date();

  let elapsedMilliseconds = newDateTime - startDateTime;
  
  document.getElementById("time").innerHTML = 
  `${formatElapsedTime(elapsedMilliseconds, days)}:${formatElapsedTime(elapsedMilliseconds, hours, 24)}:${formatElapsedTime(elapsedMilliseconds, minutes, 60)}:${formatElapsedTime(elapsedMilliseconds, seconds, 60)}`;
}

function formatElapsedTime(elapsedtime, timeunit, base) {
  let time = base ? (elapsedtime / timeunit) % base : elapsedtime / timeunit;
  time = Math.floor(time);
  time = time < 10 ? '0' + time : time;
  return time;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>timer</title>
</head>

<body>
  <div id="time" name="timer"></div>
</body>

</html>
...