JavaScript - 计算网站访客数量

Question

我是JavaScript的新手，每当在浏览器上刷新页面时，如何增加数字。仅限客户端实施：）

这是我的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>

我的JavaScript：

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

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

这是刷新浏览器时的结果，但现在是静态的。

Answer 1

此示例演示了以下内容。

• 如何查看访客访问本网站的次数
• 如何显示计数

使用

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);
}

注意：您需要本地测试，因为它不适用于沙盒，例如 stack-snippets ，小提琴< / strong>等等。

<强>演示

＆＃13;

＆＃13;

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;
}

＆＃13;

.counter-item {
  background-color: #ccc;
  padding: 5px;
}

#incrementCounter {
  margin-top: 20px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在这种情况下，您可以使用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/