[英]loop through an array of <divs> and only show one each time using javascript
[英]How to show array elements one at a time using only Javascript?
我做了一個JavaScript數組隨機化器,它每次間隔顯示一個元素。 我想讓他們一次顯示一個沒有間隔但有按鈕的顯示。 當我單擊按鈕時,它將切換到下一個元素,但是直到那時它仍保持不變。 你能幫我嗎?
var numberStrings = ["One", "Two", "Three", "Four", "Five", "Six"]; var i = 0; setInterval(function() { document .getElementById('numberList') .innerHTML = numberStrings[i++]; if (i == numberStrings.length) i = 0; }, 2000); function shuffleUsingRandomSwapping(array) { var j, x, i = 0, len = array.length; for (i; i < len; i++) { j = Math.floor(Math.random() * len); x = array[i]; array[i] = array[j]; array[j] = x; } }
<button onclick="shuffleUsingRandomSwapping(numberStrings);updateNumberList(numberStrings);">Shuffle Using Random Swapping</button> <div id="numberList"></div>
var numberStrings = ["One", "Two", "Three", "Four", "Five", "Six"]; var curElement = 0; function updateNumberList() { document .getElementById('numberList') .innerHTML = numberStrings[curElement++]; if (curElement == numberStrings.length) curElement = 0; } function shuffleUsingRandomSwapping(array) { var j, x, i = 0, len = array.length; for (i; i < len; i++) { j = Math.floor(Math.random() * len); x = array[i]; array[i] = array[j]; array[j] = x; } }
<button onclick="shuffleUsingRandomSwapping(numberStrings);updateNumberList(numberStrings);">Shuffle Using Random Swapping</button> <div id="numberList"></div>
我不知道您的情況,但是如果您只想在每次按下按鈕時顯示一個數組中的隨機元素,則應該以一種更加簡單的方式來完成,而不必重新排列數組。
var numberStrings = ["One", "Two", "Three", "Four", "Five", "Six"]; function displayRandomElem() { document .getElementById('numberList') .innerHTML = numberStrings[Math.floor(Math.random() * numberStrings.length)]; }
<button onclick="displayRandomElem()">Shuffle Using Random Swapping</button> <div id="numberList"></div>
要以隨機順序顯示值,以免重復出現,請使用以下代碼:
var numberStrings = ["One", "Two", "Three", "Four", "Five", "Six"]; function displayRandomElem() { if (numberStrings.length == 0) return; document .getElementById('numberList') .innerHTML = numberStrings.splice(Math.floor(Math.random() * numberStrings.length), 1); }
<button onclick="displayRandomElem()">Shuffle Using Random Swapping</button> <div id="numberList"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.