Следите за тем, сколько времени потрачено, показывая определенные элементы на странице

Итак, скажем, у нас есть 4 Divs (3 скрытых, 1 видимых), пользователь может переключаться между ними через javascript/jQuery.

Я хочу рассчитать время, потраченное на каждое Div, и отправить xhr, содержащее это время, на сервер, чтобы сохранить его в базе данных. Этот xhr будет отправлен, когда пользователь переключит представление div.

Как я могу это сделать? Любые подсказки будут очень благодарны.

Спасибо,

Ответ 1

В любой момент вы можете записать время начала/круга в переменной с помощью:

var start = new Date();

Когда вы хотите рассчитать прошедшее время, просто вычтите сохраненную дату из нового экземпляра Date:

var elapsed = new Date() - start;

Это даст вам истекшее время в миллисекундах. Сделайте дополнительную математику (деление) для вычисления секунд, минут и т.д.

Ответ 2

Здесь вы идете:

HTML:

<div id="divs">
    <div>First</div>
    <div class="selected">Second</div>
    <div>Third</div>
    <div>Fourth</div>
</div>

<p id="output"></p>

JavaScript:

var divs = $('#divs > div'),
    output = $('#output'),
    tarr = [0, 0, 0, 0],
    delay = 100;

divs.click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});

setInterval(function() {
    var idx = divs.filter('.selected').index();
    tarr[idx] = tarr[idx] + delay;
    output.text('Times (in ms): ' + tarr);
}, delay);

Живая демонстрация: http://jsfiddle.net/7svZr/2/

Я сохраняю время в миллисекундах, потому что целые числа чище и безопаснее (0.1 + 0.2 != 0.3). Обратите внимание, что вы можете настроить "точность" (задержку функции интервала), установив переменную delay.

Ответ 3

Я использую очень легкую функцию для обеспечения времени, прошедшего в этом формате: hh/mm/ss

OnClick/OnFocus/и т.д..

var start_time = new Date();

при выходе:

var end_time = new Date();

var elapsed_ms = end_time - start_time;
var seconds = Math.round(elapsed_ms / 1000);
var minutes = Math.round(seconds / 60);
var hours = Math.round(minutes / 60);

var sec = TrimSecondsMinutes(seconds);
var min = TrimSecondsMinutes(minutes);

function TrimSecondsMinutes(elapsed) {
    if (elapsed >= 60)
        return TrimSecondsMinutes(elapsed - 60);
    return elapsed;
}

Ответ 4

Вот класс многократного использования, пример включен в код:

/*
     Help track time lapse - tells you the time difference between each "check()" and since the "start()"

 */
var TimeCapture = function () {
    var start = new Date().getTime();
    var last = start;
    var now = start;
    this.start = function () {
        start = new Date().getTime();
    };
    this.check = function (message) {
        now = (new Date().getTime());
        console.log(message, 'START:', now - start, 'LAST:', now - last);
        last = now;
    };
};

//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check('say something here')//look at your console for output
//..do more stuff
time.check('say something else')//look at your console for output
//..do more stuff
time.check('say something else one more time')//look at your console for output