Question

大家好我喜欢在我的WooCommerce商店（WordPress）上使用假动态访客计数器我想在下面添加购买按钮，所以这样的计数器：

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

我希望这个数字能够以200-5000的速度运行，所以它不会增加到超过5000而且不会减少到200以下并且不会从500-200瞬间下降它应该是缓慢而稳定的增加和减少。

Answer 1

使用一些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中嵌入的代码，您可以更改interval（两次更新之间的ms数）和variation（计数可以变化的数量±）。您可能希望将interval更改为更高的值。

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

Answer 2

只是一个想法：

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

如何构建动态访问者计数器

2 个答案: