页面上的多个倒数计时器

Question

我创建了一个页面，其中添加了多个倒数计时器。但我希望它们仅在用户位于特定部分时才起作用，例如在页面中添加点导航，点击后用户使用滚动效果被带到该部分，因此在每个部分中，都有一个倒计时计时器，但是只工作一次并且更新每个部分的值，如何使倒计时器仅在用户位于该特定部分时工作。

这是脚本

var a = 0;   
$(window).scroll(function() {

  var oTop = $('#counter{{loop.index}}').offset().top - window.innerHeight;
 
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },

        {

          duration: 2000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
            //alert('finished');
          }

        });
    });
    a = 1;
  }

});

这是动态的，但如果我对每个部分都有不同的脚本，那么它的工作方式也是一样的

var oTop = $('#counter{{loop.index}}').offset().top - window.innerHeight;

对于这个部分每个部分都有相同的高度，我已经从 alert($("#counter4").height());

来自这个 .height() 函数

Answer 1

你可以从这个例子中得到灵感它也有多个倒数计时器和滚动条 https://www.cssscript.com/demo/scroll-triggered-counter/

页面上的多个倒数计时器

Multiple Countdown timer on a page

javascript

jquery

countdowntimer