0

我正在使用bookblock.js并尝试集成一个计时器来计算用户在每张幻灯片/页面上花费的秒数。我设法包含了计时器，但是每次用户登陆新幻灯片/页面时如何重置计时器？我还需要将花费的时间（以秒为单位）推送到 GTM dataLayer。

以下是我的代码供参考：

onBeforeFlip : function(page) { 

            var name = $(".bb-item").filter(function() { return $(this).css("display") == "block" }).attr("id");

            var startTimer = setInterval(function(){ 
                //console.log("seconds spent on this page");
            }, 1000);

            var d = new Date(1000*Math.round(startTimer/1000));
            function pad(i) { return ('0'+i).slice(-2); }
            var seconds = d.getUTCHours() + ':' + pad(d.getUTCMinutes()) + ':' + pad(d.getUTCSeconds());
            console.log(seconds);

            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({
                'event': 'slide',
                'slidename': name,
                'timespent': seconds
            });
        }

提前致谢！

4

1 回答 1

1

这是您描述的计时器的简短示例。

$(function() {
  var secondsPassed = 0;
  var timer;
  var slideIndex = 0;

  function formatSeconds(s) {
    var h = 0,
      m = 0;
    h = Math.floor(s / 3600);
    s = s - (h * 3600);
    m = Math.floor(s / 60);
    s = s - (m * 60);
    return (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);
  }

  function startTimer() {
    timer = setInterval(function() {
      $(".timer").html(formatSeconds(++secondsPassed))
    }, 1000);
  }

  function resetTimer() {
    clearInterval(timer);
    secondsPassed = 0;
    $(".timer").html(formatSeconds(secondsPassed));
    startTimer();
  }

  $("#next-btn").click(function() {
    $(".slide").eq(slideIndex++).hide();
    resetTimer();
  });
  
  startTimer();
});
.slides {
  width: 340px;
  height: 340px;
  overflow: hidden;
  border: 1px solid black;
}

.slide {
  width: 300px;
  height: 300px;
  float: left;
  margin: 19px;
  border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slides">
  <div class="slide red">
    Slide 1
  </div>
  <div class="slide orange">
    Slide 2
  </div>
  <div class="slide yellow">
    Slide 3
  </div>
  <div class="slide green">
    Slide 4
  </div>
  <div class="slide blue">
    Slide 5
  </div>
  <div class="slide purple">
    Slide 6
  </div>
</div>
<button id="next-btn">Next</button>
<span class="timer">00:00:00</span>

在这里您可以看到我们创建了一些功能来帮助我们，startTimer并且resetTimer. 我还创建formatSeconds了帮助格式化时间戳。

当页面加载并且第一张幻灯片打开时，我们启动计时器。当他们单击下一步时，我们重置计时器。

于 2021-11-18T20:21:14.510 回答