how to add a visitor counter code javascript HTML?

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.

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>

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.