Question

我对jquery等的技能在这方面是有限的。对于我们的网站，我们使用木材框架和一些插件。我想使用他们的计数器，但让计数器实时上升。如果可以的话请帮忙。先感谢您。在HTML我写的实时，我希望计数器是实时的。我希望我提供了足够的信息。总而言之，我需要帮助的是我想使用木框架样式并且看起来但是让计数器是实时的而不是停在一个数字并且是一个非常基本的计数器。

HTML `

                        <div class="column width-4 offset-4 center">
                            <div class="counter-wrapper">
                                <p style="font-size:60px;" class="counter lead"><span class="stats-1" data-count-from="1300000" data-count-to="realtime" >1000000</span></p>
                                <p style="font-size:36px;" class="lead">Hotspots</p>
                            </div>
                        </div>

`

的Javascript

<script>
    $( document ).ready( function(){
        $( '.stats-1' ).counter();
        $( '.stats-2' ).counter({
            autoStart: true
        });
    });
</script>

实时计数器网址 https://reelsonar-services.com/api/v1/hotspot_count

来自示例网站的我们的计数器

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.flipcountdown.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.flipcountdown.css" />

<script>
    var hotspot_count = 1000000;

    function fetch_waterbody_count() {

        var url="https://reelsonar-services.com/api/v1/hotspot_count";
        //var url="http://reelsonar-services.com:8085/hotspot_count";

        var html = [];
        $.getJSON( url, function( data ) {
            console.log( data );
             $.each(data, function(index, d){
                 html.push("Hotspots: ", d.hotspot_count, "<br>");
                 var count = parseInt( d.hotspot_count );
                 if( count != hotspot_count) {

                     hotspot_count = count;
                     update_counter( hotspot_count )
                 }

             });


        });
    }

    function update_counter( count ) {

        jQuery('#flipcountdown').flipcountdown({size:'md',tick:count});
    }

    function reset_counter( count ) {

        jQuery('#flipcountdown').flipcountdown({size:'md',tick:count});
    }

            function pulse_hotspot() {
        (function pulse(back) {
        $('#hotspot_img').animate(
            {
            'font-size': (back) ? '25px' : '35px',
            opacity: (back) ? 1 : 0.5
            }, 1200, function(){pulse(!back)});
        $('#hotspot_img img').animate(
            {
            'width': (back) ? '125px' : '112px'
            }, 1200);
        })(false);
            }
</script>

<body style="background: lightblue;text-align: center">
    <script>
$(document).ready(function(){

    $("#fetchButton").click(function(event){

    fetch_waterbody_count();
});

    $("#addOneButton").click(function(event){
    hotspot_count += 1;
    update_counter( hotspot_count );
});

    $("#addTenButton").click(function(event){
    hotspot_count += 10;
    update_counter( hotspot_count );
});

    $("#resetButton").click(function(event){

    reset_counter(1000000);
});

    setInterval(fetch_waterbody_count, 2000);    
    pulse_hotspot();
});

 </script>
 <script>
 jQuery(function(){
 jQuery('#flipcountdown').flipcountdown({size:'md',tick:hotspot_count});  <!-- Medium sized -->
})
</script>

 <div style="font-size: x-large; padding-bottom: 1em">ReelSonar Global Hotspot Counter</div>
 <div style="font-size: large; padding-bottom: 1em">Displays Hotspots as they are created by our users in real time.</div>

    <pre>(Retrieves Hotspot count every two seconds)</pre>
    <div id="hotspot_img"><img src="hotspot.png" /></div>
</body>

</html>

Answer 1

这是一个轮询问题：定期发送Ajax请求，获取最新数字并在屏幕上显示（使用Timber的计数器添加动画效果）。

这是一个工作示例。请注意它有点复杂，因为返回的数据是一个数组，而不是一个对象（需要处理在一个数组中返回多个数字时的情况）：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="lib/css/components/timber.css" />
</head>
<body>

<span data-count-from="1" data-count-to="1" id="counter"></span>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="lib/js/plugins/jquery.tm.counter.js"></script>
<script type="text/javascript">    
  $(function() {
    var queue = [];
    var url="https://reelsonar-services.com/api/v1/hotspot_count";
    var counter = document.getElementById('counter');
    var $counter = $(counter);
    var latestNum = null;

    getData(true);
    setInterval(function() {
      getData();
    }, 30000);

    function getData(init) {
      $.getJSON(url, function(data) {
        if (init) {
          var num = data.shift().hotspot_count;
          counter.dataset.countFrom = num;
          $counter.text(formatNumber(num));
        }
        queue = queue.concat(data);
        playCount();
      });
    }

    function playCount() {
      if (queue.length === 0) {
        return;
      }
      var countTo = queue.shift().hotspot_count;
      if (countTo && countTo === latestNum) {
        playCount();
      }
      latestNum = countTo;

      counter.dataset.countTo = countTo;
      $counter.counter();
      setTimeout(function() {
        counter.dataset.countFrom = countTo;
        if (queue.length > 0) {
          playCount();
        }
      }, 1000);
    }

    function formatNumber( number ) {
      return number.toString().replace( /(\d)(?=(\d{3})+$)/g, '$1,' );
    }
  });
</script>
</body>
</html>

使用带有连续计数的URL API的Timber Framework计数器

1 个答案: