首頁猿問如何在表格中顯示隨機圖像

如何在表格中顯示隨機圖像

JavaScript

尚方寶劍之說 2022-07-08 17:58:41

我有一張桌子和一個圖片文件夾。我想在頁面加載時使用 html 和 javascript 在表格的每個單元格中隨機插入一個圖像。我還希望圖像的順序在每次刷新時都不同，并且不會重復。到目前為止，我的 html 看起來像這樣：<table> <tr> <td><img src"" id="00></td> <td><img src"" id="01></td> <td><img src"" id="02></td> </tr> <tr> <td><img src"" id="10></td> <td><img src"" id="11></td> <td><img src"" id="12></td> </tr>...</table>我的 js 看起來像這樣：window.onload = showPics;let myPics = new Array('images/butterfly.jpg', 'images/cat.jpg', 'images/dinosaur.jpg', 'images/dog.jpg', 'images/duck.jpg', 'images/elephant.jpg');function showPics() { let randomPic = Math.floor(Math.random() * myPics.length); document.querySelectorAll('#00, #01, #02, #10, #11, #12').src = myPics[randomPic];但是圖像沒有被顯示。請幫忙

查看完整描述

2 回答

青春有我

TA貢獻1784條經驗獲得超8個贊

你的.querySelectorAll()返回數組，所以你需要循環它。此外，您應該調用new random每個元素，而不是一次，否則它將包含相同的圖像

window.onload = function() {

let myPics = ['https://via.placeholder.com/150?text=1', 'https://via.placeholder.com/150?text=2', 'https://via.placeholder.com/150?text=3',

'https://via.placeholder.com/150?text=4', 'https://via.placeholder.com/150?text=5', 'https://via.placeholder.com/150?text=6'

];

function showPics() {

document.querySelectorAll('.img').forEach(function(tag) {

let index = getRandomIndex();

tag.src = myPics[index];

tag.addEventListener('click', getImageName);

tag.dataset.index = index;

})

}

function getRandomIndex() {

return Math.floor(Math.random() * myPics.length);

}

function getImageName() {

alert(myPics[this.dataset.index])

}

showPics();

}

<table>

<tr>

</tr>

<tr>

</tr>

</table>

為了獲得不重復的圖像，請跟蹤您已經使用的索引（確保您有更多或相同數量的圖像然后是占位符）。

let usedImages = {};

function getRandomPic {

let randomPic;

do {

randomPic = Math.floor(Math.random() * myPics.length);

} while (usedImages[randomPic] === true);

usedImages[randomPic] = true;

return myPics[randomPic];

}

反對回復 2022-07-08

MMTTMM

TA貢獻1869條經驗獲得超4個贊

changing在您想要更改和更改的所有圖像中添加像圖像這樣的類showPics，并且您不需要放置new關鍵字來創建數組[]就可以正常工作，并且不要將隨機圖像存儲在始終為您提供相同圖像的變量中.

function showPics() {

document.querySelectorAll('.changeImages').forEach(val => {

val.src = myPics[Number(Math.floor(Math.random() * myPics.length))];

})

}

反對回復 2022-07-08

2 回答
0 關注
253 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在表格中顯示隨機圖像

如何在表格中顯示隨機圖像

2 回答

添加回答