在javascript中查找已用时间

Question

我是JavaScript的新手,我正在尝试编写一个代码,用于计算从用户登录到当前时间所经过的时间.

这是我的代码: -

function markPresent() {
    window.markDate = new Date();
    $(document).ready(function() {
        $("div.absent").toggleClass("present");
    });
    updateClock();
}

function updateClock() {    
    var markMinutes = markDate.getMinutes();
    var markSeconds = markDate.getSeconds();

    var currDate = new Date();
    var currMinutes = currDate.getMinutes();
    var currSeconds = currDate.getSeconds();
    var minutes = currMinutes - markMinutes;
    if(minutes < 0) { minutes += 60; }
    var seconds = currSeconds - markSeconds;
    if(seconds < 0) { seconds += 60; }

    if(minutes < 10) { minutes = "0" + minutes; }
    if(seconds < 10) { seconds = "0" + seconds; }

    var hours = 0;
    if(minutes == 59 && seconds == 59) { hours++; }
    if(hours < 10) { hours = "0" + hours; }

    var timeElapsed = hours+':'+minutes+':'+seconds;
    document.getElementById("timer").innerHTML = timeElapsed;
    setTimeout(function() {updateClock()}, 1000);
}

输出正确到00:59:59,但之后O/P是:

00:59:59 01:59:59 01:59:00 01:59:01 ...01:59:59 01:00:00

我怎样才能解决这个问题,是否有更有效的方法可以做到这一点？谢谢.

Answer 1

没有冒犯,但这是大量过度引擎.只需存储脚本首次运行时的开始时间,然后在每次计时器触发时从当前时间中减去该开始时间.

有很多关于将ms转换为可读时间戳的教程,因此这里不需要介绍.

    var start = Date.now();
    
    setInterval(function() {
      document.getElementById('difference').innerHTML = Date.now() - start;
    
      // the difference will be in ms
    }, 1000);

<div id="difference"></div>

Answer 2

这里发生的事情太多了。

一种更简单的方法是markDate每次都与当前日期进行比较并重新格式化。

见演示： http : //jsfiddle.net/7e4psrzu/

function markPresent() {
    window.markDate = new Date();
    $(document).ready(function() {
        $("div.absent").toggleClass("present");
    });
    updateClock();
}

function updateClock() {  
    var currDate = new Date();
    var diff = currDate - markDate;
    document.getElementById("timer").innerHTML = format(diff/1000);
    setTimeout(function() {updateClock()}, 1000);
}

function format(seconds)
{
var numhours = parseInt(Math.floor(((seconds % 31536000) % 86400) / 3600),10);
var numminutes = parseInt(Math.floor((((seconds % 31536000) % 86400) % 3600) / 60),10);
var numseconds = parseInt((((seconds % 31536000) % 86400) % 3600) % 60,10);
    return ((numhours<10) ? "0" + numhours : numhours)
    + ":" + ((numminutes<10) ? "0" + numminutes : numminutes)
    + ":" + ((numseconds<10) ? "0" + numseconds : numseconds);
}

markPresent();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="timer"></div>

Answer 3

你可以简单地使用performance.now()

例子：

start = performance.now();

elapsedTime = performance.now() - start;

Answer 4

我们还可以使用 console.time() 和 console.timeEnd() 方法来完成同样的事情。

句法：

console.time(label);
console.timeEnd(label);

标签：为新计时器指定的名称。这将识别计时器；调用 console.timeEnd() 时使用相同的名称来停止计时器并将时间输出到控制台。

console.time(label);
console.timeEnd(label);

Answer 5

这是我刚刚为我的用例制作的解决方案。我觉得它很有可读性。基本前提是简单地从当前时间戳中减去时间戳，然后除以正确的单位：

const showElapsedTime = (timestamp) => {
    if (typeof timestamp !== 'number') return 'NaN'        

    const SECOND = 1000
    const MINUTE = 1000 * 60
    const HOUR = 1000 * 60 * 60
    const DAY = 1000 * 60 * 60 * 24
    const MONTH = 1000 * 60 * 60 * 24 * 30
    const YEAR = 1000 * 60 * 60 * 24 * 30 * 12
    
    // const elapsed = ((new Date()).valueOf() - timestamp)
    const elapsed = 1541309742360 - timestamp
    
    if (elapsed <= MINUTE) return `${Math.round(elapsed / SECOND)}s`
    if (elapsed <= HOUR) return `${Math.round(elapsed / MINUTE)}m`
    if (elapsed <= DAY) return `${Math.round(elapsed / HOUR)}h`
    if (elapsed <= MONTH) return `${Math.round(elapsed / DAY)}d`
    if (elapsed <= YEAR) return `${Math.round(elapsed / MONTH)}mo`
    return `${Math.round(elapsed / YEAR)}y`
}
      
const createdAt = 1541301301000

console.log(showElapsedTime(createdAt + 5000000))
console.log(showElapsedTime(createdAt))
console.log(showElapsedTime(createdAt - 500000000))

例如，如果过去了 3000 毫秒，则 3000 大于SECONDS（1000）但小于MINUTES（60,000），因此此函数将 3000 除以 1000 并返回3s3 秒过去。

如果您需要以秒而不是毫秒为单位的时间戳，请将1000to 的所有实例更改为1（这有效地将所有内容乘以 1000 以从毫秒到秒（即：因为每 1 秒为 1000 毫秒）。

以下是更 DRY 形式的缩放单位：

const SECOND = 1000
const MINUTE = SECOND * 60
const HOUR = MINUTE * 60
const DAY = HOUR * 24
const MONTH = DAY * 30
const YEAR = MONTH * 12