首页 文章

JavaScript中的按钮单击计数器

提问于
浏览 次
1

在这里，我找到了一个JavaScript按钮点击计数器，计算否 . 单击按钮并将数字保存在称为Web存储的内容中，我不知道它到底是什么 .

有一点我知道这个脚本只能用于一台计算机，这意味着如果我点击按钮10次，那么如果任何其他访问者点击该按钮，它将不会显示我之前点击过的点击次数 .

现在我需要的是，无论如何使用javascript或php，点击次数应该保存在我的服务器中的文本文件中，稍后当任何其他访问者访问HTML页面时，他也应该得到相同的数字 . 文本文件 .

这里的 HTML 页面带有代码 .

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  if (localStorage.clickcount)
    {
    localStorage.clickcount=Number(localStorage.clickcount)+1;
    }
  else
    {
    localStorage.clickcount=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

以一种简单的方式，

HTML页面上有一个按钮 .

如果访问者A单击它5次并关闭该页面 .

之后，访问者B首先访问他应该获得数字5的页面，然后当他点击时，它应该被计算并自动保存 .

javascript html

3 回答

  • 1

    这是一件简单的事情 . 这个答案来自w3schools . 在这里使用AJAX和PHP . 为了保存该值，我们使用名为“vote_result.txt”的文本文件 .

    index.html

    <html>
    <head>
    <script type="text/javascript">
    function getVote(int)
    {
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("poll").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","poll_vote.php?vote="+int,true);
    xmlhttp.send();


    if(typeof(Storage)!=="undefined")
      {
      if (localStorage.clickcount)
        {
        localStorage.clickcount=Number(localStorage.clickcount)+1;
        }
      else
        {
        localStorage.clickcount=1;
        }
      document.getElementById("result").innerHTML="You have voted " + localStorage.clickcount + " times before this session";
      }
    else
      {
      document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
      }
    }

    </script>

    </head>
    <body bgcolor=#5D003D>
    <div id="poll">

    <p>Click the button to see the counter increase.</p>
    <p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p><form>
    <input type="Button" class="voteButton" name="vote" value="Vote" onclick="getVote(this.value)" />
    </form>
    </div>
    </body>
    </html>

    poll_vote.php

    <?php
$vote = $_REQUEST['vote'];

//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);

//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];

if ($vote == 0)
  {
  $yes = $yes + 1;
  }
if ($vote == 1)
  {
  $no = $no + 1;
  }

//insert votes to txt file
$insertvote = $yes;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>    
<table>
<tr>
<td><div id="votesMsg">Total Votes  :</div></td>
<td><div id="votesCounter">
<?php echo($yes); ?></div>
</td>
</tr>
</table>
<input type="Button" class="voteButton" name="vote" value="Vote again !!!" onclick="getVote(this.value)" />

    然后在工作目录中，创建一个名为poll_result.txt的文件

    就这样 . 现在在localhost中运行此页面..

    回复于
  • 2

    您应该在用户关闭页面之前将“点击”计数存储到您的数据库中，否则计数将清零 . 如果您在下次另一个用户打开页面时将计数存储在数据库中，您可以从以前的计数 . 我希望你得到我说的话 . 谢谢sujathan .

    回复于
  • 0

    您对本地存储有误解 . 本地存储是一种将信息存储到客户端浏览器的方式，该浏览器对于您站点的每个访问者都是唯一的 . 它与用户之间共享的服务器数据库完全不同 . 在您的情况下，用户B无法知道用户A单击了多少时间，除非您将信息从用户A存储到服务器数据库并在用户B单击该页面时查询它 .

    回复于

相关问题