継続的にカウントアップするURL APIを使用したTimber Frameworkカウンタの使用

jqueryなどのスキルはこれに限定されています。私たちのウェブサイトでは、いくつかのプラグインで木材フレームワークを使用しています。私は彼らのカウンターを使いたいが、カウンターをリアルタイムで持ち上げてもらいたい。可能であればお手伝いください。前もって感謝します。 HTMLの中でリアルタイムで書きたいと思っています。私は十分な情報を提供したことを願っています。要約すると、私は何が助けが必要なのですか？私は木材フレームワークのスタイルと見た目を使いたいのですが、カウンターを数に止まらず、非常に基本的なカウンターではなくリアルタイムにすることができます。継続的にカウントアップするURL APIを使用したTimber Frameworkカウンタの使用

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

サンプルサイトからOUR COUNTER

<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を使用したTimber Frameworkカウンタの使用

答えて

関連する問題