CODEWITHSUNDEEP
javascripthtmlcss
Suresh
Suresh

Reputation: 351

JavaScript - Count Number of Visitor for Website

I am new to JavaScript, How do i increment the number whenever the page is refreshed on the browser. Client Implementation only :)

Here is my html code:

<div id="CounterVisitor">
          <span class="counter-item">0</span>
          <span class="counter-item">0</span>
          <span class="counter-item">1</span>
          <span class="counter-item">1</span>
          <span class="counter-item">8</span>
          <span class="counter-item">4</span>
</div>

My JavaScript: 

var counter = 001184;
var newnum = 001184 + 1;

var el = document.getElementsByClassName("counter-item");
el.innerHTML = newnum;

This is how the result will look like when i refresh the browser, but it is static for now.

enter image description here

Upvotes: 1

Views: 55503

Answers (2)

gurvinder372
gurvinder372

Reputation: 68393

This example demonstrate following.

  • How to check number of times visitor has visited this website
  • How to show the count

using 

incrementAndShowValue();

function incrementAndShowValue() {
  var value = getCookie("visitcounter") || 0;
  var newValue = ("00000" + (Number(value) + 1)).slice(-6);
  var container = document.getElementById("counterVisitor");
  String(newValue).split("").forEach(function(item, index) {
    container.children[index].innerHTML = item;
  });
  counter++;
  setCookie("visitcounter", counter);
}

Note : You need to test this locally since it will not work with sandboxed frames like stack-snippets, fiddle, etc.

Demo

incrementAndShowValue();

function incrementAndShowValue() {
  var value = getCookie("visitcounter") || 0;
  var newValue = ("00000" + (Number(value) + 1)).slice(-6);
  var container = document.getElementById("counterVisitor");
  String(newValue).split("").forEach(function(item, index) {
    container.children[index].innerHTML = item;
  });
  counter++;
  setCookie("visitcounter", counter);
}

function setCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + value + expires + "; path=https://stacksnippets.net/js";
}

function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}
.counter-item {
  background-color: #ccc;
  padding: 5px;
}

#incrementCounter {
  margin-top: 20px;
}
<div id="counterVisitor">
  <span class="counter-item">0</span>
  <span class="counter-item">0</span>
  <span class="counter-item">0</span>
  <span class="counter-item">0</span>
  <span class="counter-item">0</span>
  <span class="counter-item">0</span>
</div>

<button id="incrementCounter">Increase Count</button>

Upvotes: 0

bhansa
bhansa

Reputation: 7504

In that case you can use localStorage to keep the count in your browser.

<div id="CounterVisitor">
</div>

<script>
var n = localStorage.getItem('on_load_counter');

if (n === null) {
  n = 0;
}
n++;

localStorage.setItem("on_load_counter", n);

nums = n.toString().split('').map(Number);
document.getElementById('CounterVisitor').innerHTML = '';
for (var i of nums) {
  document.getElementById('CounterVisitor').innerHTML += '<span class="counter-item">' + i + '</span>';
}

</script>

JsFiddle: https://jsfiddle.net/e2q8j1q4/55/

Upvotes: 3

Related Questions