为了账号安全,请及时绑定邮箱和手机立即绑定

计算经过的时间并将其放入 javascript 中的 Days:Hours:Minutes:

计算经过的时间并将其放入 javascript 中的 Days:Hours:Minutes:

潇潇雨雨 2021-06-17 18:05:59
我正在尝试计算设置的日期时间对象和当前时间之间经过的时间。我希望它能够以这种格式出现 DD:HH:MM:SS 其中 DD 是天,HH 是小时,MM 是分钟,SS 是秒。我能够得到总天数、总小时数、总分钟数和总秒数,但我不确定如何按照我想要的方式对其进行格式化。请帮忙<!DOCTYPE html><html><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 回答

?
慕容森

TA贡献1853条经验 获得超18个赞

我建议您使用像Moment.js这样的库,但是如果您想在纯 Javascript 中执行此操作,您可以将总秒数与您已经定义的除法参数相除,并在它们较少时用零填充它们十个以上。


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>


<head>

  <meta charset="UTF-8">

  <title>timer</title>

</head>


<body>

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

</body>


</html>


查看完整回答
反对 回复 2021-06-18
  • 1 回答
  • 0 关注
  • 154 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信