JavaScript - 计算网站访问者的数量

JavaScript - Count Number of Visitor for Website

提问by Suresh

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

我是 JavaScript 新手，如何在浏览器上刷新页面时增加数字。仅客户端实现:)

Here is my html code:

这是我的 html 代码：

<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:

我的 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.

这就是我刷新浏览器时结果的样子，但目前它是静态的。

回答by gurvinder372

This example demonstrate following.

本示例演示以下内容。

• How to check number of timesvisitor 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 locallysince it will not work with sandboxed frames like stack-snippets, fiddle, etc.

注意：您需要在本地进行测试，因为它不适用于stack-snippets、fiddle等沙盒框架。

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>

回答by bhansa

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

在这种情况下，您可以使用localStorage保持浏览器中的计数。

<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/

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