随机数计数器 - 使用移动设备滚动时激活Javascript

时间:2017-06-28 16:29:33

标签: javascript jquery mobile

我在我的页面上运行了一个Javascript插件,用于数字计数器(TF-Numbers)。它在桌面上运行良好,但似乎无法在移动设备上运行,所有计数器都显示为0。

您可以在我的网站上找到它:www.arcticwolfdesign.com并亲眼看看。

以下是javascript代码:

/*
* TF-Numbers
* Author : Aleksej Vukomanovic
*/

//Statistics in numbers
jQuery.fn.statsCounter = function(){
   //declaring vars
    var stat = this.find('.statistics-inner').children();
    var startValue = 0;

    //iterate through every .stat class and collect values
   stat.each(function(){
      var count = jQuery(this).data('count');
      var number = jQuery(this).find('.number');
      var start = 0;
      var go = setInterval(function(){ startCounter(); },20); //increment value every 1ms

      function startCounter(){
          incrementBy = Math.round(count / 10); //Divide inputed number by 100 to gain optimal speed (not too fast, not too slow)
          start = start + incrementBy;
          jQuery(number).text(start);
          //if desired number reched, stop counting
          if( start === count ) {
              clearInterval(go);
          } else if( start >= count ){ //or if greater than selected num - stop and return value
              clearInterval(go);
              jQuery(number).text(count);
          }
      }//startCounter;
  });//stat.each()
}//statsCounter();

  //if visible src = http://www.rupertlanuza.com/how-to-check-if-element-is-visible-in-the-screen-using-jquery/
  function isElementVisible(elementToBeChecked) {
    var TopView = jQuery(window).scrollTop();
    var BotView = TopView + jQuery(window).height();
    var TopElement = jQuery(elementToBeChecked).offset().top;
    var BotElement = TopElement + jQuery(elementToBeChecked).height();
    return ((BotElement <= BotView) && (TopElement >= TopView));
  }

$(document).ready(function(){

   var statistics = $('.statistics');
   var title = statistics.find('h2');
   var countTitles = statistics.find('.count-title');
   var numbers = statistics.find('.number');
   var icons = statistics.find('.fa');
   var bg;

   title.css( 'color', statistics.data('title-color') );
   icons.css( 'color', statistics.data('icons-color') );
   numbers.css( 'color', statistics.data('numbers-color') );
   countTitles.css( 'color', statistics.data('count-titles') );
   if( statistics.data('background').indexOf('.png') > -1 || statistics.data('background').indexOf('.jpg') > -1 || statistics.data('background').indexOf('.jpeg') > -1 ){
    bg = 'url('+statistics.data('background')+') no-repeat'; 
   } else {
    bg = statistics.data('background');
   }
   statistics.css('background', bg);

    //setting counts to 0
   if( $('.stat').length > 0 ){
      var stat = $('.stat');
      stat.each(function(){
        stat.find('.number').text(0);
      })
    }
    //animating when scrolled
    var countDone = 0;
    $(window).scroll(function(){
      //if .statistics exists, initialize
    if( $('.statistics').length ){
      var visible = isElementVisible('.statistics');





    //if stats section visible, start the counting after 400ms
     if( visible && countDone == 0 ) { //check if it's not already done
       setTimeout(function(){
        jQuery('.statistics').statsCounter();
        countDone = 1;
       },400);
      }//if visible && not shown
    }//if exists
    });//scroll function
})

在移动设备上滚动时,我需要添加什么才能激活它?

0 个答案:

没有答案