使用木材框架計數器的URL API不斷增加

當談到這個問題時，我對jQuery等的使用技巧是有限的。對於我們的網站，我們使用一些插件的木材框架。我想用他們的櫃檯，但櫃檯實時上升。如果可以的話請幫忙。先謝謝你。在HTML中我寫了實時的地方，我希望櫃檯是實時的。我希望我已經提供了足夠的信息。所以總而言之，我需要幫助的是我想使用木材框架的風格和外觀，但有實時的櫃檯，而不是停在一個數量和作爲一個非常基本的櫃檯。使用木材框架計數器的URL API不斷增加

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>

實時計數器URL 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>

來源

2017-05-19 Mike Pupo

這是一個投票的問題：定期發送Ajax請求，獲取最新的數量和在屏幕上顯示出來（使用木材的櫃檯添加動畫效果）。

這是一個工作示例。請注意，這是一個有點複雜，因爲返回的數據是一個數組，而不是一個單一的對象（需要處理的情況時，多個號碼在一個陣列中返回）：

<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>

來源

2017-05-20 01:22:41 shaochuancs

非常感謝你抽出時間來做這個。對此，我真的非常感激。我把它與木材框架一起工作。當然我的營銷總監並不高興，因爲它不會更新。我試着向她解釋爲什麼。所以問題是讓Ajax請求更新？我會做一些研究，看看我能否解決這個問題，但如果你有任何解決方案，請讓我知道。再次感謝你！ –

@MikePupo歡迎您。「沒有頁面刷新的內容得到更新」不是問題，它是Ajax的主要優點。我認爲你的營銷總監需要的是：當內容更新時得到通知，否則，用戶不知道號碼發生了變化。爲了解決這個「通知」問題，可以在更改數字時添加一些動畫，例如淡入/淡出，調整文本大小等。 – shaochuancs

只是想確保其正確。現在它顯示的是熱點的實際數量，但是這個數字是靜態的，並且不會計數或刷新。我一直在想弄清楚如何讓它更新，我無法弄清楚。 –

使用木材框架計數器的URL API不斷增加

回答

相關問題