0

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

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

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

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

关于我应该如何处理这个问题的任何想法？我目前在我的 Web 应用程序中使用 PHP、Javascript 和 Java。

4

2 回答 2

0

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

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.'，您可以使用它来知道用户离开了该特定幻灯片并且没有完成查看其余部分。

于 2015-07-07T01:46:29.467 回答
0

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

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

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() 函数。

我希望这有帮助。

于 2015-07-07T01:53:54.417 回答