单击“HTML 计数器”按钮

Click Counter for HTML Button

本文关键字：按钮 计数器 HTML 单击      更新时间：2023-09-26

我正在尝试找到一种方法来跟踪按钮在网站上被按下了多少次。

到目前为止，它正在工作，但每次用户刷新网站时都会重置。

有没有办法防止它重置？

这是我所拥有的：

<button onclick="Test()" id="counter">Check</button>
<p>This program has been run <span id="displayCount">0</span> times.</p>
<script type="text/javascript">
      var count = 0;
      var button = document.getElementById("counter");
      var display = document.getElementById("displayCount");
      button.onclick = function(){
        Test()
        count++;
        display.innerHTML = count;
      }
    </script>

如果你想在客户端维护计数，尝试使用本地存储：-

<script type="text/javascript">
  var count;
  var button = document.getElementById("counter");
  var display = document.getElementById("displayCount");
   if( window.localStorage.getItem('clickCount')){
     count =  window.localStorage.getItem('clickCount');
   }else{
      count = 0;
    }
   display.innerHTML = count;
  button.onclick = function(){
    Test()
    count++;
     window.localStorage.setItem('clickCount',count);
    display.innerHTML = count;
  }
</script>

但是，如果有类似的东西，如果一个用户单击点击计数器将为每个用户更新，或者如果用户在单独的浏览器或设备中打开网站，计数器将是相同的，那么您必须将计数器发送到服务器。

您可以使用

会话/本地存储来存储计数。 查看以下存储按钮点击次数的示例http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_session

您可以使用 websockets 在页面上保持所有用户在线的数据更新，这可以计算按钮的点击次数，对于所有在线用户，在页面加载后计数。例如：我加载页面，点击 2 次，所以如果你现在加载页面，你会看到 0，如果你在页面上，你可以看到 2。这是很棒的技术，我在Facebook上有一个名为Aplicativo Desenhe的应用程序，使用它。

但。为了保存所有用户的所有点击，您需要将其保存到服务器，例如可以使用平面文件数据库或保存数据的TXT文件。因此，每次有人点击时，您都会运行一个函数在平面文件中发布 +1。这可能会导致许多用户一起失败，因此最好使用sql，以便您可以更好地保存所有数据。

需要更好地定义需求。如果您只想计算来自用户的点击次数，并为该用户显示它，您可以使用本地存储或cookie，但这显然只会显示该会话，浏览器，设备等。

我已经测试过它，在一个游戏中使用Facebook API，它有一个计数器，所有用户都需要点击，才能获得积分，所以你可以看到所有朋友的点击，在排行榜上实时更新，非常棒!!!!!!它被称为社交CLicker，我现在不知道代码在哪里.

Facebook API可以使用分数进行计数，您也可以使用它，也许，我不知道。

我希望这有帮助.

相关文章：