Как построить динамический счетчик посетителей

Здравствуйте, ребята. Мне нравится использовать поддельный динамический счетчик посетителей в моем WooCommerce Store (WordPress). Я хотел бы добавить чуть ниже кнопку покупки, чтобы счетчик был таким:
http://i.imgur.com/Fsq43OY.gif

В этом примере оно иногда уменьшается, а иногда увеличивается полностью динамично.

Я хочу, чтобы число запускалось ч / б 200-5000, чтобы оно не увеличивалось выше 5000 и не уменьшалось ниже 200, а не мгновенное падение с 500-200, оно должно быть медленным и устойчивым, увеличиваться и уменьшаться.

1

Решение

Используя некоторые JS, вы можете это осуществить. Использовать Math.random() метод и изменить счетчик каждые n секунд с setInterval(),

function random(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}

var initial = random(500, 2000);
var count = initial;

setInterval(function() {
var variation = random(-5,5);

count += variation
console.log('You currently have ' + count + ' visitors')

}, 2000)
1

Другие решения

Просто идея:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">    </script>
<script type="text/javascript">
$(document).ready(function() {
function setCounterValue() {
var random = Math.floor(Math.random() * (5000 - 1000 + 1)) + 1000;
$("div#counter").html("visitor "+random);
setTimeout(function(){ setCounterValue(); }, 3000);
}
setCounterValue();
setTimeout(function(){ setCounterValue(); }, 3000);
});
</script>
</head>
<body>
<div id="counter"></div>
</body>
</html>
0

По вопросам рекламы [email protected]