html - 从指定的图像开始并在点击时随机化

Question

我想要一个特定的图像显示，并允许用户单击它并且图像会发生变化，有点像鼠标悬停效果。但是，我希望它显示一组列表中的随机图像。每刷新一次页面就会发生一次，然后就完成了。我宁愿它不可逆。

我用它来随机抽一张带有图像的卡片。我从卡片的背面开始，点击时有很多可能性出现。

谢谢！

Answer 1

据我了解，这是您需要的基本代码

<img src="img/BackOfCard.jpg" onClick="Randomize(this)" />
<input type="hidden" value="1" id="onlyOnce">
<script type="text/javascript" language="javascript">
function Randomize(obj) {
  onlyOnce = document.getElementById("onlyOnce");
  if (onlyOnce.value=="1") {
    var n = Math.round((100*Math.random())+0.5);
    var urls = ["url1.png","url2.png","and so on"];
    obj.src = urls[n];
    onlyOnce.value="0";
  }
}
</script>

这假设您有一个名为“img”的文件夹，其中包含卡片的背面图像和所有卡片的正面存储在那里。牌面将以 Ace = 1.jpg、2 = 2.jpg、3 = 3.jpg、King = 13.jpg 等格式存储。