Здравствуйте, ребята. Мне нравится использовать поддельный динамический счетчик посетителей в моем WooCommerce Store (WordPress). Я хотел бы добавить чуть ниже кнопку покупки, чтобы счетчик был таким:
В этом примере оно иногда уменьшается, а иногда увеличивается полностью динамично.
Я хочу, чтобы число запускалось ч / б 200-5000, чтобы оно не увеличивалось выше 5000 и не уменьшалось ниже 200, а не мгновенное падение с 500-200, оно должно быть медленным и устойчивым, увеличиваться и уменьшаться.
Используя некоторые 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)
Просто идея:
<!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>