Question

我是Java的新手，所以对js没有太多了解，所以我要求在单击按钮时生成随机图像，图像是使用php（codeigniter framework）显示的，如何在每次单击时都显示随机图像，例如.jpg有时应该排在最前面，或者b.jpg应该排在最前或最后

<img src="<?=base_url('assets/game/a.jpg')?>" style="width:120px;"><br>
<img src="<?=base_url('assets/game/b.jpg')?>" style="width:120px;"><br>
<img src="<?=base_url('assets/game/c.jpg')?>" style="width:120px;"><br>
<img src="<?=base_url('assets/game/d.jpg')?>" style="width:120px;"><br>
<img src="<?=base_url('assets/game/e.jpg')?>" style="width:120px;"><br>

<button class="btn btn-success clk_btn" onclick="myfunction">generate random imgaes</button>

Answer 1

这里是一个示例，只需将div替换为图片，您可能还想根据图片数量更改数字。

function random () {
  const randomNr = Math.random()*100;
  const elements = document.querySelectorAll('div');
  
  elements.forEach((el) => el.style.display = 'none')

  if (randomNr < 34) {
    elements[0].style.display = 'block';
  } else if(randomNr < 64) {
      elements[1].style.display = 'block';
  } else {
      elements[2].style.display = 'block';
  }
}

div {
  display: none;
}

<div>image1</div>
<div>image2</div>
<div>image3</div>

<button onclick="random()">switch</button>

Answer 2

一种可能性是通过添加“隐藏”属性来隐藏所有图像，然后单击以选择一个随机图像，然后删除该“隐藏”属性；）

let images = document.getElementsByTagName('img');
for(let i = 0; i < images.length; i++)
  images[i].setAttribute('hidden', true);
    


function myfunction()
{
  let images = document.getElementsByTagName('img');
  
  for(let i = 0; i < images.length; i++)
    images[i].setAttribute('hidden', true);
  let rand = Math.floor(Math.random()*images.length);
  images[rand].removeAttribute('hidden');
}

<img src="http://via.placeholder.com/350?text=A" style="width:120px;"><br>
<img src="http://via.placeholder.com/350?text=B" style="width:120px;"><br>
<img src="http://via.placeholder.com/350?text=C" style="width:120px;"><br>
<img src="http://via.placeholder.com/350?text=D" style="width:120px;"><br>
<img src="http://via.placeholder.com/350?text=E" style="width:120px;"><br>

<button class="btn btn-success clk_btn" onclick="myfunction()">generate random imgaes</button>

<p id="result"></p>

Answer 3

您可以尝试使用此代码。

// Javascript
var images = [
  "<?=base_url('assets/game/a.jpg')?>",
  "<?=base_url('assets/game/b.jpg')?>",
  "<?=base_url('assets/game/c.jpg')?>",
  "<?=base_url('assets/game/d.jpg')?>",
  "<?=base_url('assets/game/e.jpg')?>"
];

document.getElementById("my_button").addEventListener("click", function() {
  document.getElementById("my_image").src = images[Math.floor(Math.random()*5)%5]
})

<!-- HTML -->
<button id="my_button">Generate random image</button>
<br>
<img id="my_image" style="width:120px;"/>

文档：

当使用javascript单击按钮时如何显示随机图像

3 个答案: