Today, We want to share with you website visitor counter code javascript.In this post we will show you website visitor counter code html, hear for How To Create A Simple Counter Using Javascript, HTML & CSS? we will give you demo and example for implement.In this post, we will learn about how to create a visitor counter in html? with an example.

website visitor counter code javascript

Contents

In this blog post, we will be discussing website visitor counter code in JavaScript. A website visitor counter is a simple script that keeps track of how many users visit a website. It can be used to measure the popularity of a website, or to see how users are interacting with the website.

To create a website visitor counter in JavaScript, you will first need to create a simple HTML page. On this page, you will include a script tag that points to the visitor counter code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Next, you will need to include the visitor counter code. This code will create a simple counter that will track the number of users that visit the page.

JavaScript – Count Number of Visitor for Website

Example 1: HTML Code

<div id="incrementCount">
          <span class="counter-item">9</span>
          <span class="counter-item">5</span>
          <span class="counter-item">7</span>
          <span class="counter-item">6</span>
          <span class="counter-item">5</span>
          <span class="counter-item">4</span>
</div>

Pure JavaScript Code

    var flg = localStorage.getItem('on_load_counter');

    if (flg === null) {
        flg = 0;
    }

    flg++;

    localStorage.setItem("on_load_counter", flg);

    document.getElementById('incrementCount').innerHTML = flg;

Example:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>JS Counter - www.pakainfo.com</title>
	<style>
	.main_container {
	  height: 46px;
	  width: auto;
	  padding: 3px;
	  margin: 2px;
	  max-width: 300px;
	  background-color: #555555;
	  align-content: center;
	}
	.container_inner {
	  height: auto;
	  border: none;
	  background-color: #555555;
	  max-width: 290px;
	  vertical-align: center;
	  padding-top: 12px;
	  padding-left: 10px;
	  align-content: center;
	}
	 .live_cnt {
	  width:30px;
	  height: 30px;
	  background-color: #888888;
	  color: #ffffff;
	  font-size: 22px;
	  text-align: center;
	  line-height: 20px;
	  padding: 3px;
	  margin: 1.5px;
	  font-family: verdana;
	  vertical-align: center;
	}
	</style>
  </head>

  <body onload="CounterVisitor(10)">
    <div class="main_container" id="id_main_container">
      <div class="container_inner" id="display_div_id">
      </div>
    </div>
  </body>

 <script>
  var total_visitor_list = [10,10000,10000];
  var visitor_cnt_0 = total_visitor_list[0];
  var visitor_cnt_1 = total_visitor_list[1];
  var visitor_cnt_2 = total_visitor_list[2];
  var result_data = "";
  var display_div = document.getElementById("display_div_id");

  function CounterVisitor(current_count){
    setInterval(function(){
      // clear count
      while (display_div.hasChildNodes()) {
          display_div.removeChild(display_div.lastChild);
      }
      visitor_cnt_0++;
      if (visitor_cnt_0 > 99) {
        visitor_cnt_0 = 10; // reset count
        visitor_cnt_1++;    // increase next count
      }
      if(visitor_cnt_1>99999){
        visitor_cnt_2++;
      }
      result_data = visitor_cnt_2.toString() + visitor_cnt_1.toString() + visitor_cnt_0.toString();
      for (var i = 0; i < result_data.length; i++) {
        var live_flag = document.createElement('span');
        live_flag.className = 'live_cnt';
        live_flag.innerText = result_data[i];
        display_div.appendChild(live_flag);
      }
    },1000);
  }
</script> 
</html>

Here is a basic HTML visitor counter using PHP code:

Also Read This 👉 JQuery Remove combobox items(options) from DropDownList

Create a new PHP file and name it “counter.php”.
Paste the following code into the file:

<?php
$file = "counter.txt";
$handle = fopen($file, "r");
if(!$handle) {
    echo "Could not open the file!";
}
else {
    $counter = (int) fread($handle,20);
    fclose($handle);
    $counter++;
    $handle = fopen($file, "w");
    fwrite($handle, $counter);
    fclose($handle);
    echo "You are visitor number " . $counter . ".";
}
?>

Save the file and upload it to your server.
Create a new HTML file and name it “index.html”.
Paste the following code into the file:

<!DOCTYPE html>
<html>
<head>
	<title>Visitor Counter</title>
</head>
<body>
	<h1>Welcome to my website!</h1>
	<p>
		<?php include("counter.php"); ?>
	</p>
</body>
</html>

Save the file and upload it to your server.

Now, every time someone visits your website, the “counter.php” file will update the “counter.txt” file and display the number of visitors on your “index.html” file. Note that this is a very basic visitor counter and may not be suitable for high-traffic websites.

I hope you get an idea about html visitor counter source code.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

website visitor counter code javascript

JavaScript – Count Number of Visitor for Website

Example:

Related posts: