顯示隨機div的框

我正在嘗試創建一種假設顯示隨機div的框。例如關於動物的有趣事實。我發現一些代碼，寫了一些我自己和它的工作原理是這樣的：「隨機有趣的事實」顯示隨機div的框

：當頁面加載 2.一個隨機的div被加載每次用戶點擊按鈕 1.隨機格裝在下面的代碼中，「Rundom fun facts」只能用一次。我怎樣才能讓它繼續工作？我的意思是，我可以點擊它100次，它會顯示100個不同的div。這是我的第二個問題：當使用例如100個div（有關動物的許多有趣的事實）時，下面的代碼會很長，有沒有更簡單的方法來創建循環？有很多滑塊，但我找不到任何需要的東西。任何幫助，將不勝感激。

<div id="box"> 
    <div id="funfact1"> 
     <p> 
     Squirrels plant thousands of new trees each year simply by   forgetting where they put their acorns. </p> 
    </div><!-- end funfact1 --> 

    <div id="funfact2"> 
     <p>Macaques in Japan use coins to buy vending machine snacks.  </p> 
    </div><!-- end funfact2 --> 

    <div id="funfact3"> 
     <p>Japanese Macaques make snowballs for fun. </p> 
    </div><!-- end funfact3 --> 

    <div id="funfact4"> 
     <p>Dogs’ nose prints are as unique as human fingerprints and  can be used to identify them. </p> 
    </div><!--end funfact4 --> 
    <div id="buttonDiv"> 
     <button id="buttonShuffle">Random fun fact</button> 
    </div><!-- end buttonDiv --> 
</div><!-- end div box --> 
<script type="text/javascript"> 
randomNumber = Math.floor(Math.random()*4+1); 

window.onload = function() { 
    if (randomNumber == 1) { 
     document.getElementById("funfact1").style.display = "inline"; 
     document.getElementById("funfact2").style.display = "none"; 
     document.getElementById("funfact3").style.display = "none"; 
     document.getElementById("funfact4").style.display = "none"; 
    } 
    if (randomNumber == 2) { 
     document.getElementById("funfact1").style.display = "none"; 
     document.getElementById("funfact2").style.display = "inline"; 
     document.getElementById("funfact3").style.display = "none"; 
     document.getElementById("funfact4").style.display = "none"; 
    } 
    if (randomNumber == 3) { 
     document.getElementById("funfact1").style.display = "none"; 
     document.getElementById("funfact2").style.display = "none"; 
     document.getElementById("funfact3").style.display = "inline"; 
     document.getElementById("funfact4").style.display = "none"; 
    } 
    if (randomNumber == 4) { 
     document.getElementById("funfact1").style.display = "none"; 
     document.getElementById("funfact2").style.display = "none"; 
     document.getElementById("funfact3").style.display = "none"; 
     document.getElementById("funfact4").style.display = "inline"; 
    } 
} 

randomNumber1 = Math.floor(Math.random()*4+1); 
    document.getElementById("buttonShuffle").onclick=function() { 
    if (randomNumber1 == 1) { 
     document.getElementById("funfact1").style.display = "inline"; 
     document.getElementById("funfact2").style.display = "none"; 
     document.getElementById("funfact3").style.display = "none"; 
     document.getElementById("funfact4").style.display = "none"; 
    } 
    if (randomNumber1 == 2) { 
     document.getElementById("funfact1").style.display = "none"; 
     document.getElementById("funfact2").style.display = "inline"; 
     document.getElementById("funfact3").style.display = "none"; 
     document.getElementById("funfact4").style.display = "none"; 
    } 
    if (randomNumber1 == 3) { 
     document.getElementById("funfact1").style.display = "none"; 
     document.getElementById("funfact2").style.display = "none"; 
     document.getElementById("funfact3").style.display = "inline"; 
     document.getElementById("funfact4").style.display = "none"; 
    } 
    if (randomNumber1 == 4) { 
     document.getElementById("funfact1").style.display = "none"; 
     document.getElementById("funfact2").style.display = "none"; 
     document.getElementById("funfact3").style.display = "none"; 
     document.getElementById("funfact4").style.display = "inline"; 
    } 
} 

</script>

Fiddle

來源

2016-08-29 Young Buck

試試這個：

<div id="box"> 
    <p id="funFacts"></p> 
</div><!-- end div box --> 
<script type="text/javascript"> 
    var funFacts = [ 
       'Squirrels plant thousands of new trees each year simply by   forgetting where they put their acorns. ', 
       'Macaques in Japan use coins to buy vending machine snacks.  ' , 
       'Japanese Macaques make snowballs for fun. ' ]; 
    var randomNumber = Math.floor(Math.random() * (funFacts.length-1)); 

    window.onload = function() { 
    document.getElementById('funFact').innerHTML = funFacts[randomNumber]; 
    }; 
    document.getElementById("buttonShuffle").onclick=function() { 
    var randomNumber1 = Math.floor(Math.random() * (funFacts.length-1)); 
    document.getElementById('funFact').innerHTML = funFacts[randomNumber1]; 
} 

</script>

你所面臨的問題是，你這是在buttonShuffle的每次調用運行只有一次，而不是功能之外產生randomNumber1。你的下一個問題是不寫一些很多的div，你可以看到我已經使用一系列的funfcts解決了。

來源

2016-08-29 08:49:31 binariedMe

謝謝你的解釋。我之前嘗試過使用數組，但無法做到正確。現在我明白應該如何完成了。 –

@YoungBuck是的。如果發現它解決了您的問題，您可以接受該答案。它可以幫助其他人。謝謝。 – binariedMe

如果你想保留所有的div並且寫一個不太重複的代碼，你可以試試這個。一般來說，當你編寫代碼時，嘗試識別重複並導出它們的函數。

window.onload = function() { 

    // show random fact on load 
    randomFact() 

    // show random fact on button click 
    document.getElementById("buttonShuffle").addEventListener('click', randomFact) 
} 

function randomFact() { 
    // generate random 
    var random = Math.floor(Math.random() * 4) 

    // get all facts 
    var funfacts = document.getElementsByClassName('funfact') 

    // hide all facts 
    for (var i = 0; i < funfacts.length; i++) { 
    funfacts[i].style.display = 'none' 
    } 

    // show one 
    funfacts[random].style.display = 'inline' 
}

https://jsfiddle.net/kxv7y6x9/

來源

2016-08-29 08:57:17 Quentin

這是最好的答案！對我的投票。 :) –

謝謝=）你也可以在一個函數中導出隨機數的生成，它返回一個與前一個不同的函數。 – Quentin

昆汀 - 這正是我需要的。非常感謝你。順便說一句，如何修改函數返回一個不同的數字從provious一個？我不會問你是否沒有提到這個:) –

這將解決您的問題，

如果你想動態的帖子算你可以做這樣的事情，

HTML，

<div id="box"> 

    <div class="text"> 
     <p>Squirrels plant thousands of new trees each year simply by forgetting where they put their acorns</p> 
    </div><!-- end funfact1 --> 

    <div class="text"> 
     <p>Macaques in Japan use coins to buy vending machine snacks.</p> 
    </div><!-- end funfact2 --> 

    <div class="text"> 
     <p>Japanese Macaques make snowballs for fun.</p> 
    </div><!-- end funfact3 --> 

    <div class="text"> 
     <p>Dogs’ nose prints are as unique as human fingerprints and can be used to identify them. </p> 
    </div><!--end funfact4 --> 

    <div id="buttonDiv"> 
     <button id="buttonShuffle">Random fun fact</button> 
    </div><!-- end buttonDiv --> 

</div><!-- end div box -->

Javascript，

var texts = document.getElementsByClassName('text'), 
    randomNumber; 

function updateNumber(){ 
    randomNumber = (Math.floor((Math.random() * texts.length) + 1)) - 1; 
} 

function updateText(){ 
    updateNumber(); 
    for (i = 0; i < texts.length; i++) { 
     texts[i].style.display = "none"; 
    } 
    texts[randomNumber].style.display = "block"; 
} 

window.onload = function(){ 
    updateText(); 
} 

document.getElementById('buttonShuffle').onclick = function(){ 
    updateText(); 
}

CSS，

#box { 
    width: 350px; 
    height: 250px; 
    border: solid thin blue; 
    padding: 10px; 
    position: relative; 
} 
#buttonDiv { 
    position: absolute; 
    bottom: 10px; 
    left: 120px; 

}

見例如：https://jsfiddle.net/xbouf1o2/21/

來源

2016-08-29 09:24:17

在下面的按鈕「隨機有趣的事實」的作品只有一次的代碼。我怎樣才能讓它繼續工作？

發生這種情況的原因是因爲您的randomNumber1變量計算一次。你需要在onclick事件中計算你的隨機數。這樣，每次點擊按鈕時，都會生成一個隨機數，並顯示相關的趣味事實。

當使用例如100 divs（關於動物有很多有趣的事實）時，下面的代碼會很長，有沒有更簡單的方法來創建一個循環？

首先，您需要從每個有趣的事實中刪除ID，然後添加一個類。現在你可以使用JS來獲取所有有趣的事實，使用document.getElementsByClassName(class)。這將返回一個我們可以循環訪問的節點列表。

其次，創建一個函數，爲你做洗牌。

function shuffleRandomFunfact(event) { 
    // Generate a random number. 
    var randomNumber = Math.floor(Math.random() * 4); 
    // Loop through the nodelist. 
    for (var i = 0; i < funfacts.length; i++) { 
    // If the index of the current funfact is the same 
    // as the random number. 
    if (i === randomNumber) 
     funfacts[i].style.display = 'inline'; 
    // Otherwise ... 
    funfacts[i].style.display = 'none'; 
    } 
}

現在，您只需要將上述函數附加到事件偵聽器。

Fiddle

來源

2016-08-29 09:25:08

顯示隨機div的框

回答

相關問題