js数字滚动

最新推荐文章于 2024-07-22 17:43:07 发布

进步者-王东太

最新推荐文章于 2024-07-22 17:43:07 发布

阅读量340

点赞数

分类专栏：总结文章标签： js 数字滚动

本文链接：https://blog.csdn.net/qq_41557799/article/details/103809499

版权

总结专栏收录该内容

74 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
       <script type="text/javascript" src="js/timepeople.js"></script>
   </head>
   <body>
       <div class="group-pic" style="width: 100%;height: 500px;background: red;"></div>
       <h2 class="timer" id="time" data-to=""></h2>
       <h2 class="timer" id="time2" data-to=""></h2>
       <div class="group-pic2" style="width: 100%;height: 1000px;background: orange;"></div>
       <script type="text/javascript">
           $(document).ready(function() {
               var a, b, c, d;
               a = $(window).height(); //浏览器窗口高度
               //alert(a);
               d=1;
               var group = $(".timer");
               $(window).scroll(function() {
                   b = $(this).scrollTop(); //页面滚动的高度
                   //alert("b:"+b);
                   c = group.offset().top; //元素距离文档（document）顶部的高度
                   //alert(c)
                   if (a + b > c) {
                       console.log(a+b+"**"+c)
                       if(d==1){
                           $("#time").attr("data-to", "5000")
                           $("#time2").attr("data-to", "5000")
                           $('.timer').each(count)
                           d--;
                       }

                   } else {
                       //alert(111111);
                   }
               });
           });
       </script>

</body>
</html>

*********************************************timepeople.js****************************************************

// JavaScript Document
$.fn.countTo = function (options) {
       options = options || {};

       return $(this).each(function () {
           // set options for current element
           var settings = $.extend({}, $.fn.countTo.defaults, {
               from: $(this).data('from'),
               to: $(this).data('to'),
               speed: $(this).data('speed'),
               refreshInterval: $(this).data('refresh-interval'),
               decimals: $(this).data('decimals')
           }, options);

           // how many times to update the value, and how much to increment the value on each update
           var loops = Math.ceil(settings.speed / settings.refreshInterval),
               increment = (settings.to - settings.from) / loops;

           // references & variables that will change with each update
           var self = this,
               $self = $(this),
               loopCount = 0,
               value = settings.from,
               data = $self.data('countTo') || {};

           $self.data('countTo', data);

           // if an existing interval can be found, clear it first
           if (data.interval) {
               clearInterval(data.interval);
           }
           data.interval = setInterval(updateTimer, settings.refreshInterval);

           // initialize the element with the starting value
           render(value);

           function updateTimer() {
               value += increment;
               loopCount++;

               render(value);

               if (typeof(settings.onUpdate) == 'function') {
                   settings.onUpdate.call(self, value);
               }

               if (loopCount >= loops) {
                   // remove the interval
                   $self.removeData('countTo');
                   clearInterval(data.interval);
                   value = settings.to;

                   if (typeof(settings.onComplete) == 'function') {
                       settings.onComplete.call(self, value);
                   }
               }
           }

           function render(value) {
               var formattedValue = settings.formatter.call(self, value, settings);
               $self.html(formattedValue);
           }
       });
   };

   $.fn.countTo.defaults = {
       from: 0, // the number the element should start at
       to: 0, // the number the element should end at
       speed: 1000, // how long it should take to count between the target numbers
       refreshInterval: 100, // how often the element should be updated
       decimals: 0, // the number of decimal places to show
       formatter: formatter, // handler for formatting the value before rendering
       onUpdate: null, // callback method for every time the element is updated
       onComplete: null // callback method for when the element finishes updating
   };

   function formatter(value, settings) {
       return value.toFixed(settings.decimals);
   }

// custom formatting example
$('#count-number').data('countToOptions', {
   formatter: function (value, options) {
   return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
   }
});

function count1(options) {
document.getElementById('dt').style.display = "block"; //控制盒子显示
}

function count(options) {
   var $this = $(this);
   options = $.extend({}, options || {}, $this.data('countToOptions') || {});
   $this.countTo(options);
}

*********************************************timepeople.js**************************************************

进步者-王东太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js数字滚动

<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.min.js">&...
复制链接

扫一扫

专栏目录