JavaScript中的按鈕點擊計數器

在這裏，我發現了一個JavaScript按鈕點擊計數器，點擊一個按鈕並將這個數字保存在一個名爲web存儲的東西中，我不知道那是真的。JavaScript中的按鈕點擊計數器

我知道的一件事是，這個腳本只適用於一臺電腦，這意味着如果我點擊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號第一，然後他點擊的時候，它應該得到自動計算並保存。

來源

2012-09-29 Samson John Souza

您需要服務器端代碼才能產生此效果。你在用什麼語言？ PHP？ ASP？ – Ohgodwhy

我在HTML頁面使用php –

@Samon Souza你需要創建一個'ajax調用'來發送數據到服務器。然後服務器需要評估響應，然後打開文件，寫入文件，然後關閉文件。現在，每次「請求」頁面時，您都需要在該文件中包含文本，並將該文本用作計數器。 – Ohgodwhy

，可以儲存的「點擊」算到用戶之前，你的數據庫關閉該頁面，否則將計數清零zero.If你存儲在下次數據庫計數時，其他用戶打開網頁就可以啓動點擊從前計數count.I希望你有什麼在說，謝謝sujathan。

來源

2012-09-29 07:38:29

您的本地存儲的誤解。本地存儲是將信息存儲到客戶端瀏覽器的一種方式，這對每個訪問者來說都是唯一的。它與用戶之間共享的服務器數據庫完全不同。在您的情況下，用戶B無法知道用戶A點擊了多少次，除非您將用戶A的信息存儲到服務器數據庫，並且稍後在用戶B單擊該頁面時查詢它。

來源

2012-09-29 07:42:42 Infinity

是的你的正確，但我該怎麼做。請你幫我解決這個問題。請爲我顯示代碼 –

你使用某種數據庫嗎？ MySQL的？ – Infinity

不，但我可以創建一個，如果它需要 –

這是一個簡單的事情。這個答案來自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

這就是所有文件。現在在本地運行此頁面。

來源

2012-09-29 08:14:22

JavaScript中的按鈕點擊計數器

回答

相關問題