如何建立動態訪問計數器

好傢伙我喜歡在我的WooCommerce商店（WordPress的）我喜歡略低於添加使用假動態訪客櫃檯購買按鈕，這樣的計數器：如何建立動態訪問計數器

在這個例子中有時會減少，有時會增加完全動態。

我想要數字運行B/W 200-5000，所以它不會增加超過5000，既不降低到200以下，也不是從500-200降低，它應該是緩慢穩定的增加和減少。

來源

2017-08-08 Mayank sharma

那將促進銷售！沒有認真。爲什麼？你真的認爲有人關心這些櫃檯嗎？就像酒店預訂頁面聲稱「這家酒店今天已經預訂了5次」。是的... – Andreas

這些都很煩人，但也許他們在一些人身上工作。我看到你有php和jquery標籤，所以你基本知道使用什麼，所以爲什麼不嘗試一些東西，當你有什麼顯示*（並卡住）*回來。 – Rasclatt

我真的認爲你問的問題很好，但你用它做的並不是很好.. – Ivan

使用一些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和variation（多少算可以改變±）（兩次更新之間的數毫秒）。您可能需要將interval更改爲更高的值。

獎勵：有些造型與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>

來源

2017-08-08 20:23:06 Ivan

我喜歡你的櫃檯，但請你舉個例子，Schnatti是如何創造出來的，那真是太好了！ –

「舉例說明Schnatti如何創建」你想讓我解釋他的代碼嗎？ – Ivan

他的代碼對我很有用，但它太假了，以至於從1000-4000增加到第二，然後減少，但以你的例子，它的工作完美，但如果你能提供像我這樣的格式，這將是真正偉大的你！伊萬的事情是，我只是noob在這就是這樣爲什麼示例Schnatti爲我工作，因爲它具有包含js和執行標籤的html格式，所以我只需要複製，但他的訪客動態數字沒有任何意義用戶將趕上它的虛假，但你的看起來合法！謝謝 –

只是一個想法：

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

來源

2017-08-08 20:19:04 Schnatti

即使此代碼可能工作。它是JavaScript。任何人都可以用純文本閱讀代碼，並看到計數器是假的。當這一點出現時，這肯定會損害銷售。我不會低調，但這不是一個好主意。 – Andreas

@Schnatti我喜歡你的反例，但櫃檯看起來非常假，任何人都可以得到它1092遊客增長到3121在幾秒鐘的事情，它應該有意義10-20訪客增加2-3減少同樣的格式再次減少和增加它應該讓一些真實的櫃檯看起來不完全是假的。 –

@Mayank sharma定義一個像「visitor」這樣的全局變量，當頁面加載時定義值：使用一個介於1000和5000之間的隨機數。在函數setCounterValue中，創建一個介於-10和10之間的隨機數。你給「訪問者」添加的這個值並顯示新的「訪問者」值...看看Ivan的答案，他已經提出了這個問題。 – Schnatti

如何建立動態訪問計數器

回答

相關問題