以隨機順序渲染圖像數組
[英]Render array of images in random order
問題描述
我有幾個 Figure 對象存儲在一個名為figureTab的數組中，我將使用過的元素存儲在一個名為used的數組中。
我需要設置兩次隨機數嗎？ 數組內的對象
var used = [];
for (let i = 0; i < figureTab.length; i++) {
var random = Math.floor(Math.random() * figureTab.length);
if (used.length == 0) {
used.push(random);
html += "<div>" + (figureTab[random].FigureNr + 1) + "></div>"
}
else{
for (let j = 0; j < used.length; j++) {
if (used[j] == random) {
random = Math.floor(Math.random() * figurTab.length);
j = 0;
}
}
used.push(random);
html += "<div>" + (figureTab[random].FigureNr + 1) + "></div>";
}
document.getElementById("alternatives").innerHTML = html;
2 個解決方案
解決方案1
0 已采納 2020-05-05 20:20:54
如果您正在尋找的是數組洗牌器，那么使用Array.prototype.reduceRight()可以使用更短的方法（實現Fisher-Yates 算法）：
const src = [{id:0, name: 'circle', path:'data:image/svg+xml;base64, PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiLz4NCjwvc3ZnPg=='}, {id:1, name: 'triangle', path: 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCsKgIDxwYXRoIGQ9Ik0wLDAgaDEwMCB2MTAwIHoiLz4NCjwvc3ZnPg=='}, {id:2, name: 'rhombus', path:'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCsKgIDxwYXRoIGQ9Ik01MCwwIGw1MCw1MCBsLTUwLDUwIGwtNTAtNTAgeiIvPg0KPC9zdmc+'}, {id:3, name: 'square', path: 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCsKgIDxwYXRoIGQ9Ik0wLDAgaDEwMCB2MTAwIGgtMTAwIHoiLz4NCjwvc3ZnPg=='}, {id:4, name: 'trapezoid', path:'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCsKgIDxwYXRoIGQ9Ik0wLDEwMCBoMTAwIGwtMjAsLTEwMCBoLTYwIHoiLz4NCjwvc3ZnPg=='}], wrapper = document.getElementById('wrapper'), shuffle = arr => arr.reduceRight((r,_,__,s) => (r.push(s.splice(0|Math.random()*s.length,1)[0]), r),[]) shuffle(src).forEach(({name,path}) => { const figure = document.createElement('img') figure.src = path figure.alt = name wrapper.appendChild(figure) })
img{ width: 100px; height:100px; margin: 10px; }
<div id="wrapper"></div>
解決方案2
0 2020-05-05 20:50:27
有兩個功能：
/*
- Shuffles an array properly -- without duplicates -- based on the Fischer-Yeats
algorithm
*/
shuffle(array)
/*
- Passes an htmlString, an array, and an optional selector of the tag that the new
HTML will be rendered into (if no selector is provided then it will render to
<body> by default).
*/
function renderString(string, shuffled, selector = 'body')
function renderString(string, shuffled, selector = 'body') { const node = document.querySelector(selector); for (let [index, url] of shuffled) { node.insertAdjacentHTML('beforeend', string); node.lastElementChild.firstElementChild.src += url; node.lastElementChild.lastElementChild.textContent = index; } } function shuffle(array) { let qty = array.length, temp, i; while (qty) { i = Math.floor(Math.random() * qty--); temp = array[qty]; array[qty] = array[i]; array[i] = temp; } return array; } const thumbs = [[0, '/img/link.gif'], [1, '/img/sol.png'], [2, '/img/ren.gif'], [3, '/img/balls.gif'], [4, '/img/austin.gif']]; const htmlString = ` <figure> <img src='https://glpjt.s3.amazonaws.com/so/av'> <figcaption></figcaption> </figure>`; let mixed = shuffle(thumbs); //console.log(mixed); renderString(htmlString, mixed, 'main');
main { display: flex; flex-flow: column nowrap; justify-content: start; width: 80%; margin: 0 auto; } figure { width: 320px; margin: 0 auto; padding: 5px 10px; outline: 3px outset tomato; font-family: Verdana; font-size: 3rem; } img { display: block; max-width: 100%; height: auto; object-fit: contain; } figcaption { text-align: center; }
<main></main>
以隨機順序顯示一組圖像 JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.