按钮在JavaScript中点击计数器 [英] Button click counter in JavaScript
问题描述
在这里，我发现了一个JavaScript按钮点击计数器，可以计算出没有。点击一个按钮并将该号码保存在网络存储器中，我不知道这是什么。
有一件事我确信只有这个脚本适用于一台电脑，这意味着如果我点击10次按钮，如果有任何其他访客点击该按钮，它将不会显示我之前点击过的点击次数。
现在我需要的是，不管怎样，无论是使用javascript还是php，点击次数都应该保存在我的服务器的文本文件中，以后当其他访问者访问HTML页面时，他也应该得到相同的数字，即出现在文本文件中。
这里是带有代码的 HTML 页面。
<！DOCTYPE html>
< html>
< head>
< script>
函数clickCounter（）
{
if（typeof（Storage）！==undefined）
{
if（localStorage.clickcount）
{
localStorage.clickcount = Number（localStorage.clickcount）+1;
}
else
{
localStorage.clickcount = 1;
}
document.getElementById（result）。innerHTML =您已经点击了按钮+ localStorage.clickcount +time（s）。
}
else
{
document.getElementById（result）。innerHTML =对不起，您的浏览器不支持网络存储...;
}
}
< / script>
< / head>
< body>
< p>< button onclick =clickCounter（）type =button>点击我！< / button>< / p>
< div id =result>< / div>
< p>点击按钮查看计数器增加量。< / p>
关闭浏览器标签（或窗口），然后重试，计数器将继续计数（未重置）。< / p>
< / body>
< / html>
通过一种简单的方式，
是一个HTML页面上的按钮。
如果访问者A点击它5次并关闭页面。
然后，访问者B访问他应该得到数字5的页面，然后当他点击时，它应该被自动计数并保存。 / div>
这是一件很简单的事情。这个答案来自w3schools。这里使用了AJAX和PHP。为了保存这个值，我们使用一个名为vote_result.txt的文本文件。
index.html
$ b
< ; HTML>
< head>
< script type =text / javascript>
函数getVote（int）
{
if（window.XMLHttpRequest）
{//代码为IE7 +，Firefox，Chrome，Opera，Safari
xmlhttp = new XMLHttpRequest （）;
}
else
{//代码为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（）;
$ b $ if（typeof（Storage）！==undefined）
{
if（localStorage.clickcount）
{
localStorage .clickcount =号码（localStorage.clickcount）+1;
}
else
{
localStorage.clickcount = 1;
}
document.getElementById（result）。innerHTML =您在本次会话之前投了+ localStorage.clickcount +次。
}
else
{
document.getElementById（result）。innerHTML =对不起，您的浏览器不支持网络存储...;
}
}
< / script>
< / head>
< body bgcolor =＃5D003D>
< div id =poll>
< p>点击按钮查看计数器增加。< / p>
关闭浏览器标签（或窗口），然后重试，计数器将继续计数（未重置）。< / p>< form>
< input type =Buttonclass =voteButtonname =votevalue =Voteonclick =getVote（this.value）/>
< / form>
< / div>
< / body>
< / html>
poll_vote.php
<？php
$ vote = $ _REQUEST ['vote'];
//获取文本文件的内容
$ filename =poll_result.txt;
$ content = file（$ filename）;
//将内容放入数组
$ array = explode（||，$ content [0]）;
$ yes = $ array [0];
$ no = $ array [1];
if（$ vote == 0）
{
$ yes = $ yes + 1;
}
if（$ vote == 1）
{
$ no = $ no + 1;
}
//将投票插入到txt文件
$ 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 =Buttonclass =voteButtonname =votevalue =再次投票!!! onclick =getVote（this.value）/>
然后在工作目录中创建一个名为poll_result.txt的文件。
就是这样。现在在localhost中运行这个页面。
Here i have found a JavaScript button click counter that counts the no. of clicks on a button and saves the number in something called web storage, I don't know what that really is.
One thing I know for sure that this script only works for one computer, meaning if I click the button 10 times then if any other visitor clicks the button it will not show that number of clicks to him which i have clicked before.
Now what i need is that, somehow either with javascript or php, the number of clicks should be saved on a text file in my server, and later whenever any other visitor visits the HTML page he also should get the same number which is present in the text file.
Here the HTML Page with the code.
<!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>
In a simple way,
There is a button on an HTML page.
If visitor A clicks it for 5 times and close the page.
And later, visitor B visits the page he should get the number 5 first, and then when he clicks, it should get counted and saved automatically.
this is a simple thing to do. This answer is derived from w3schools. Here AJAX and PHP is being used. To save the value, we use a text file called "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)" />
then in the working directory, create a file named poll_result.txt
Thats all. Now run this page in localhost..
这篇关于按钮在JavaScript中点击计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
