gpt4 book ai didi

php - 如何构建动态访客计数器

转载 作者:行者123 更新时间:2023-12-01 07:42:19 25 4
gpt4 key购买 nike

大家好,我喜欢在我的 WooCommerce 商店 (WordPress) 上使用假动态访客计数器,我喜欢在购买按钮下方添加,因此计数器如下所示: http://i.imgur.com/Fsq43OY.gif

在这个例子中,它有时会减少,有时会完全动态地增加。

我希望数字在 200-5000 之间运行,这样它就不会增加超过 5000,也不会减少到 200 以下,也不会立即从 500-200 下降,它应该是缓慢而稳定的增加和减少。

最佳答案

使用一些 JS 就可以实现这一点。使用 Math.random() 方法并使用 setInterval() 让计数每 n 秒更改一次。

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)

您可以更改变化(此处为 -5 到 5 之间)以及间隔(此处为每 2 秒一次)。

如果你使用JS请小心,你可以在源代码中看到代码...玩得开心。

<小时/>

编辑

这是嵌入 HTML 中的代码,您可以更改间隔(两次更新之间的毫秒数)和变化(计数可以变化±)。您可能想要将间隔更改为更高的值。

奖励:一些 CSS 样式

#counter-area {
padding: 2px;
background-color: rgba(205, 204, 204, 0.19);
border-radius: 2px;
width: 300px;
height: 30px;
line-height: 30px;
text-align: center;
}

#counter {
color: white;
background-color: red;
padding: 4px 6px;
border-radius: 5px;
}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
<div id="counter-area">Real time <span id="counter"></span> visitors right now</div>
</body>

<script>
function r(t,r){return Math.floor(Math.random()*(r-t+1)+t)}var interval=2e3,variation=5,c=r(500,2e3);$("#counter").text(c),setInterval(function(){var t=r(-variation,variation);c+=t,$("#counter").text(c)},interval);
</script>

</html>

关于php - 如何构建动态访客计数器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45577034/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com