如何在网站加载时创建访问计数器

Question

我需要为网站创建一个计数器。每次页面加载时访问者数量增加，并将此计数器保存在服务器上。在stackoverflow中，我搜索了很多这方面的答案，但没有成功。

是否有关于 html、javascript、php 等代码的完整解决方案？

Answer 1

我搜索了很多答案，最后我在这个过程中附加了这些答案：

1. 我必须将访客计数存储在服务器的文件中。
2. 第一次运行时，检查文件是否存在。如果不存在，请创建该文件。
3. 将访客值存储在该文件中。

JavaScript 部分：

<script type = "text/javascript">


function createCounterFileIfNotExist() {
    
    if(!UrlOrFileExists("https://tafhimulquranbd.com/visit_counter.txt")){
        
        var newInt = "1"; 
        document.getElementById("demo").innerHTML = newInt; 
     
        writeDoc(newInt); 
    }else{
        loadDoc(); 
    }
}

function UrlOrFileExists(url)
{
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
      var http=new XMLHttpRequest();
    } 
    else {
      var http=new ActiveXObject("Microsoft.XMLHTTP");
    }

    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

function loadDoc() {
    var newStr = ""; 
  var xhttp = new XMLHttpRequest();
  
  if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xhttp=new XMLHttpRequest();
 }
else
  {// code for IE6, IE5
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  xhttp.onreadystatechange = function() {
      
    //   alert(this.readyState); 
    //   alert(this.status); 
      
      
      
      
    if (this.readyState == 4 && this.status == 200) {
    newStr =  this.responseText;
    
    // alert(newStr); 
    var oldInt ="1";
    var newInt; 
    
    if(newStr){
      oldInt = parseInt(newStr); 
      newInt = oldInt + 1; 
    }else{
        newInt =1; 
    }
    
     
     
     
    //   alert(newInt); 
     document.getElementById("demo").innerHTML = newInt; 
     
     writeDoc(newInt); 
    }
  };
  xhttp.open("GET", "visit_counter.txt", true);
  xhttp.send();
  
  return newStr; 
}


function writeDoc(newCounter) {
var xmlhttp;
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)
  {
        // alert('As Salamu Alaikum, Jajakumullah for Visiting Our Page.')
 }
}

xmlhttp.open("POST","phpwrite2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name="+newCounter);

}


</script>

PHP 部分：

<?php
$myFile = "visit_counter.txt";

$fh = fopen($myFile, 'w') or die("can't open file");
$stringData = $_POST["name"];
fwrite($fh, $stringData);
fclose($fh);
?>

Html 部分：

<div>Website visit counter:</div>
<div id="demo" class="website-counter"> </div>
    
<!--this script will run when the page is loaded : window.onload -->
<script> 
        window.onload = function exampleFunction() { 
            createCounterFileIfNotExist(); 
        } 
</script> 

CSS部分：

/* Styles for website counter container */
.website-counter {
  background-color: #ff4957;
  height: 50px;
  width: 80px;
  color: white;
  border-radius: 30px;
  font-weight: 700;
  font-size: 25px;
  margin-top: 10px;
}
.demo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
   margin: auto;
    width: 50%;
 
  padding: 10px;
}