实时点击/链接计数器

时间:2013-04-21 02:33:20

标签: firebase

我有这个代码......

<script>
      $(document).ready(function(){
    var x = 0;    
    function resetcounter() {
    x = 0;
    document.getElementById("counting").value = x;
    }

   function count() {
   if(x<50)
    {
      x += 1;
    }
    else
    {
        x=0;
    }
    document.getElementById("counting").value = x;
   }
   $('#btn').click(

         function() {
         count();
    });

    $('#reset').click(

    function() {
           resetcounter();
    });  
});
</script>

效果很好。但是我需要它来实时更新。我想用firebase。 我如何将饲料送入firebase。基本上我需要这个...每当有人点击我网站上的某个按钮时,就会有计数器跟踪它被点击的次数,它会实时显示给页面上的每个人。

1 个答案:

答案 0 :(得分:2)

这里的一般方法是将'x'变量移到Firebase并使用它来支持计数器的状态。由于我们正在对多个潜在客户进行计数,因此我们将这些更新与事务包装在一起。

它看起来像这样:

var x = new Firebase('https://countingex.firebaseio-demo.com/');

x.on('value', function f(s) {
    $('#counting').text(0 + s.val());
});

$('#btn').click(function() {
  x.transaction(function(current_value) {
    return current_value + 1;
  });
});

$('#reset').click(function() {
    x.set(0);
});

我放了working example up on JSFiddle;通过在多个窗口中打开它来看一看。为了简单起见,我省略了对神奇数字50的条件。

要开始使用其他Firebase基础知识,我建议您查看我们的interactive tutorial