Отслеживать, как долго пользователь просматривает слайд онлайн-изображения слайд-шоу

Question

В настоящее время я работаю над проектом, который требует, чтобы веб-приложение отслеживало, как долго пользователь остается на одном слайде слайд-шоу. Скажите, что слайд-шоу онлайн имеет слайды 5 (слайд-1.png для слайдов - 5.png), пользователь может перемещаться по слайд-шоу с помощью кнопок «Далее» и «Предыдущая».

Пользователь всегда запускается на слайде 1.png, через 5 секунд пользователь нажимает кнопку «Далее» и переходит на слайд-2.png. Через 10 секунд пользователь нажал «Предыдущее», чтобы вернуться назад на слайд-1.png и остался там на 5 секунд.

Это в основном приложение, основанное на событиях. Время начнет запись, когда пользователь нажимает «Далее» или «Предыдущий», и прекращает запись старого сеанса и начинает запись нового сеанса при повторном нажатии кнопки «Далее» или «Предыдущий».

Пользователь не переходит на новую страницу html после нажатия «Далее»/«Предыдущая». Это просто изменение изображений src.

Любые идеи о том, как я должен подходить к этому? В настоящее время я использую PHP, Javascript и Java в своем веб-приложении.

Answer 1

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

var startTime = new Date(); 

Затем захватить время, когда слайд уходит:

var endTime = new Date(); 

Затем вы можете рассчитать время, прошедшее ,

var elapsed = endTime - startTime; // elapsed time in milliseconds 

Если вам необходимо учитывать в случае, когда пользователь открывает слайд, а затем отходит от компьютера, вы можете также запустить таймер тайм-аут, который будет регистрировать пользователя, как того таймаут для этого слайда.

setTimeout(function() { 
    endTime = 'Timed out.'; 
}, ((3 * 60) * 60) * 1000); // ((3hrs * 60mins) * 60secs) * 1000ms 

Через 3 часа было бы установить Конечное время в 'Timed out.' и вы могли бы использовать, чтобы знать, что пользователь отошел от этого конкретного слайда и не закончил просмотр остальных.

Answer 2

Функция JavaScript, которая перебирает петли и «обнюхивает» для заданных условий, будет работать лучше всего для этого сценария. Подход, который вы должны предпринять, - это присвоить каждому свой собственный атрибут .png. Создавайте переменные с помощью JavaScript и jQuery, которые специально предназначены для каждого изображения. Затем прикрепите событие mousedown или click к слайд-шоу, которое определит, какое изображение будет видимым, и вызовите таймер для этого конкретного изображения. Конечно, вам понадобятся поля ввода, скрытые на странице, для каждого изображения для счетчика.

В ссылке вы увидите аналогичную функциональность, посредством которой при нажатии на компонент «увеличить» начнется таймер. Он останавливается, только когда пользователь щелкает изображение.

Функция JavaScript - это вызов setInterval() и может быть остановлен с помощью clearInterval(). Для достижения наилучших результатов создайте функцию setInterval() как переменную.

переменная Пример:

var firstSlide = jQuery('img#slide1'); 

Sample Состояние 01:

if (firstSlide.length > 0) 
{ 
    //start counter with setInterval(); 
} 

Sample Состояние 02:

if (firstSlide.is(':visible')) 
{ 
    //start counter with setInterval(); 
} 

Для обеспечения минимального дублирования в таймере и ан уверенное более строгое поведение, я бы предложил применить уникальный CSS-класс к контейнеру слайд-шоу, когда он будет виден на клике и удалить его, когда он не будет виден.

Sample Состояние 03:

slideShow.click(function() { 
slideShow.addClass('isClicked'); 
}); 
if (firstSlide.is(':visible') && jQuery('slideShow.isClicked').length > 0) 
{ 
    //start counter with setInterval(); 
} 

http://www.alexldixon.com/clicktimerhelp.htm

Другой пример, где setInvertval может «нюхать» динамических условиях, делает высоту элементов равны, даже если окно изменяет размер и текст обручи.

https://jsfiddle.net/dixalex/ojoevj1k/

var makeSameHeight = setInterval(function() { 
    var currentTextHeight = $('div.myClass-content').height() + "px"; 
    var imgDivHeight = $('div.imgUrl').height() + "px"; 
    if (currentTextHeight === imgDivHeight) 
    { 
     var doNothing = ""; 
    } else { 
     $('div.imgUrl, div.postImageUrl, a.myClass').css("height", currentTextHeight); 
    } 
}, 50); 

Наконец, вы можете также использовать функцию новый Date().

Надеюсь, это поможет.