在javascript中查找已用时间

Find elapsed time in javascript

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

这是我的代码: -

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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是:

0时59分59秒
1时59分59秒
1点59分00秒
1时59分01秒




1时59分59秒
01:00:00

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


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

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

1
2
3
4
5
6
7
    var start = Date.now();
   
    setInterval(function() {
      document.getElementById('difference').innerHTML = Date.now() - start;
   
      // the difference will be in ms
    }, 1000);
1
 


这里发生了太多事情。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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();
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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并返回3s 3秒钟。

如果您需要以秒为单位而不是毫秒的时间戳,请将1000的所有实例更改为1(有效地将所有实例乘以1000,从毫秒到秒(即:因为每1秒1000毫秒)。

以下是更干燥形式的缩放单位:

1
2
3
4
5
6
const SECOND = 1000
const MINUTE = SECOND * 60
const HOUR = MINUTE * 60
const DAY = HOUR * 24
const MONTH = DAY * 30
const YEAR = MONTH * 12

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

例:

1
2
3
start = performance.now();

elapsedTime = performance.now() - start;

我发现有用的是C ++构造的'端口'(尽管通常在C ++中我离开show由析构函数隐式调用):

1
2
3
4
5
6
7
8
var trace = console.log
function elapsed(op) {
    this.op = op
    this.t0 = Date.now()
}
elapsed.prototype.show = function() {
    trace.apply(null, [this.op, 'msec', Date.now() - this.t0, ':'].concat(Array.from(arguments)))
}

使用 - 例如:

1
2
3
4
5
function debug_counters() {
    const e = new elapsed('debug_counters')
    const to_show = visibleProducts().length
    e.show('to_show', to_show)
}

我知道这是一个很老的问题但是我想要自己解决方案以防万一有人希望有一个JS封装的插件。理想情况下我会:启动,暂停,恢复,停止,重置方法。提供以下代码可以很容易地添加所有提到的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
(function(w){
 
  var timeStart,
      timeEnd,
      started = false,
      startTimer = function (){
        this.timeStart = new Date();
        this.started = true;
      },
      getPartial = function (end) {
        if (!this.started)
          return 0;
        else {
          if (end) this.started = false;
          this.timeEnd = new Date();
          return (this.timeEnd - this.timeStart) / 1000;
        }
      },
      stopTime = function () {
        if (!this.started)
          return 0;
        else {
          return this.getPartial(true);
        }
      },
      restartTimer = function(){
        this.timeStart = new Date();
      };
  w.Timer = {
    start : startTimer,
    getPartial : getPartial,
    stopTime : stopTime,
    restart : restartTimer
  };
})(this);
1
2
3
4
Start
Partial
Stop
Restart


我会使用getTime()方法,减去时间,然后将结果转换为hh:mm:ss.mmm格式。


1
2
3
4
5
6
7
var hours = 0;
if(minutes == 59 && seconds == 59)
{
    hours = hours + 1;
    minutes = '00';
    seconds == '00';
}