設置一個數組以選擇不同的變量onclick

Question

我有一個小實驗設置，我正在編輯創建一個隨機出現的div，當您單擊它時消失。我遇到了問題，每次單擊它時，都會強制變量「x」成爲與數組不同的數字。相反，它會在開始時從數組中挑選一個數字並在整個時間內堅持使用它。

DIV：

<div id="div" onclick="hide()" style="visibility:hidden;">Doge</div> 

JS：

<script type = "text/javascript"> 

var interval = [5000, 1000, 10000, 6000, 500]; 
var x = interval[Math.floor(Math.random() * interval.length)]; 
setInterval(function(){ 
document.getElementById('div').style.visibility = "visible"; 
},x); 

function hide(){ 
document.getElementById('div').style.visibility = "hidden"; 
var x = interval[Math.floor(Math.random() * interval.length)]; 
} 

</script> 

每次單擊我希望它在不同的時間間隔重新出現在div。

Answer 1

setInterval取delay值，並使用，對於每一個間隔。它不受更新變量的影響。你想要的是setTimeout，你每次調用hide函數時都會設置它。

var interval = [5000, 1000, 10000, 6000, 500]; 
var div = document.getElementById('div'); 

function hide(){ 
    div.style.visibility = "hidden"; 
    showIn(randomInterval()); 
} 

function randomInterval() { 
    return interval[Math.floor(Math.random() * interval.length)]; 
} 

function showIn(delay) { 
    setTimeout(function() { 
    div.style.visibility = "visible"; 
    }, delay); 
} 

// call directly in the beginning to show the div 
showIn(randomInterval()); 

Answer 2

問題在於你的隨機世代數，大部分時間都是一次又一次地重複相同的值。

Link of your random number generation output

嘗試解決這一點，再試一次。

Answer 3

<script type = "text/javascript"> 
 

 
var interval = [5000, 1000, 10000, 6000, 500]; 
 
var x = interval[Math.floor(Math.random() * interval.length)]; 
 
setInterval(function(){ 
 
document.getElementById('div').style.visibility = "visible"; 
 
},x); 
 

 
function hide(){ 
 
document.getElementById('div').style.visibility = "hidden"; 
 
var x = interval[Math.floor(Math.random() * interval.length)]; 
 
setInterval(function(){ 
 
document.getElementById('div').style.visibility = "visible"; 
 
},x); 
 
} 
 

 
</script>