跟踪用户观看在线图像幻灯片的时间

Question

我目前正在进行一个项目，该项目要求web应用程序跟踪用户在幻灯片放映的一张幻灯片上停留的时间。假设在线幻灯片有5张(slide-1.png到slide-5.png)幻灯片，用户可以使用"下一步"one_answers"上一步"按钮浏览幻灯片。

用户总是从slide-1.png开始，5秒后用户点击"下一步"按钮转到slide-2.png。10秒后，用户点击"上一步"回到slide-1.png，并停留了5秒。

这基本上是基于事件的应用程序。当用户点击"下一步"或"上一键"时，时间开始记录，当用户再次点击"下一步"或"上一键"时，时间停止记录旧会话，开始记录新会话。

用户在点击"下一步"/"上一页"后不会跳转到新的html页面。这只是图像改变src信息。

你知道我该怎么做吗?我目前使用PHP, Javascript和Java在我的web应用程序。

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小时后，它会将endTime设置为'Timed out.'，你可以使用它来知道用户离开了特定的幻灯片，并没有完成查看其余的

Answer 2

对您定义的设置条件进行遍历和'嗅探'的JavaScript函数将最适合此场景。您应该采取的方法是为每个.png分配它自己的ID属性。通过JavaScript和jQuery创建专门针对每个图像的变量。然后将鼠标向下或单击事件附加到幻灯片上，以检测可见的图像并触发该特定图像的计时器。当然，您需要隐藏在页面上的每个图像的输入字段，以便计数器增加到。

在链接中，您将看到类似的功能，即当用户单击"放大"组件时，计时器将启动。只有当用户点击出图像时，它才会停止。

JavaScript函数是调用setInterval()，可以用clearInterval()停止。为了获得最佳效果，可以将setInterval()函数创建为一个变量。

样本变量:

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

样本条件01:

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

样本条件02:

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

为了确保最小的重叠在计时器和确保更严格的行为，我建议应用一个独特的CSS类的幻灯片显示容器，当它是可见的点击和删除它时，它是不可见的。

样本条件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()函数。