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

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

用户将始终从slide-1.png开始，5秒钟后用户单击“下一步”按钮并转到slide-2.png。10秒钟后，用户点击“上一页”返回slide-1.png，并在那里停留了5秒钟

这基本上是基于事件的应用程序。当用户单击“下一步”或“上一步”时，时间将开始录制，当用户再次单击“下一步”或“上一步”时，时间将停止录制旧会话并开始录制新会话

用户在单击“下一步”/“上一步”后不会转到新的html页面。它只是改变src信息的图像

---

我该如何处理这个问题？我目前正在我的web应用程序中使用PHP、Javascript和Java。

您需要捕获他们开始查看幻灯片的时间：

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小时后，它会将结束时间设置为“超时”。你可以使用它来知道用户离开了那张特定的幻灯片，没有完成其余的部分。

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

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

JavaScript函数是call setInterval（），可以使用clearInterval（）停止。为获得最佳结果，请将setInterval（）函数创建为变量

样本变量：

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

样本条件01：

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

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

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

样本条件02：

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

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

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

为了确保计时器中的重叠最小，并确保更严格的行为，我建议在幻灯片显示容器在单击时可见时应用唯一的CSS类，并在不可见时将其删除

样本条件03：

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

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

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

setInvertval可以“嗅探”动态条件的另一个示例是使元素高度相等，即使在窗口调整大小和文本换行时也是如此

最后，还可以使用new Date（）函数

---

我希望这能有所帮助。

你是否需要解释一下他们看幻灯片后离开电脑一天的情况？或者有一个最大值，你会认为它们“闲置”？