js数字滚动

冷不防 2023-06-27 03:39 20阅读 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);  
  \}