此函式應該在每次呼叫時從 url 中抓取隨機影像
function grabImg(){
var img = document.createElement('img');
img.src = 'https://picsum.photos/200/300';
document.getElementById('flex-cat').appendChild(img);
}
并顯示在下面的div中
<div class="container-1">
<h2>Image Grabber</h2>
<button class="btn btn-success" onclick="grabImg()">Grab Image</button>
<div class="flex-box-container-2" id="flex-cat"></div>
</div>
最初，當單擊按鈕時，它會呼叫該函式并很好地顯示影像。但是，當多次單擊按鈕時，不會顯示不同的隨機影像，而是會繼續顯示第一次顯示的相同影像。
關于如何防止這種情況的任何提示？
uj5u.com熱心網友回復：
使用picsum檔案，請參閱Advanced Usage，您可以在瀏覽器中請求多個相同大小的影像，添加隨機查詢引數以防止影像被快取。然后您可以使用輔助函式隨機化數字，然后使用字串文字 => 連接img.src = https://picsum.photos/200/300?random=${randomRange(10000)}。
編輯：
要使其真正隨機，請使用陣列跟蹤使用輔助函式創建的亂數。如果該值已經存在于陣列中，則randomImage再次運行該方法，否則將該值推入陣列以進行跟蹤并回傳隨機值。
const arr = []
function randomImage() { // get a random number
let num = ''
let tempRan = Math.random()
if(!arr.includes(tempRan)){
num = tempRan
arr.push(num)
}else{
randomImage()
}
return arr[arr.length-1]
}
function grabImg() {
var img = document.createElement('img');
img.src = `https://picsum.photos/200/300?random=${randomImage()}`;
document.getElementById('flex-cat').appendChild(img);
}<div class="container-1">
<h2>Image Grabber</h2>
<button class="btn btn-success" onclick="grabImg()">Grab Image</button>
<div class="flex-box-container-2" id="flex-cat">
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/506839.html
標籤：javascript 功能
上一篇：Swift全域函式串列