Javascript随机图像和答案答案

【问题标题】：Javascript random image and answerJavascript随机图像和答案
【发布时间】：2015-01-21 07:46:28
【问题描述】：

我有这个代码：

<!DOCTYPE html>
<html>
<head>

<script language="JavaScript">
<!-- Hide from old browsers


function pickimg(){
var imagenumber = 5 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images = new Array
images[1] = "1.png"
images[2] = "2.png"
images[3] = "3.png"
images[4] = "4.png"
images[5] = "5.png"
var image = images[rand1]
document.randimg.src = image
}
// -- End Hiding Here -->
</script>

</head>


<body onLoad="pickimg()">

<a href="" onClick="pickimg();return false;"><IMG SRC="YOUR IMAGE" name="randimg" border=0></a>


</body>
</html>

这给了我一个随机的图像，当我点击它时它会改变。此图像是 5 个数学问题，我想添加 5 个答案图像：answer1.png、answer2.png ... answer5.png

我希望我的脚本这样做：

当我进入网页时给我一张随机图片（问题）
当我点击它给我答案图片时。前任。如果随机图片是1.png给我answer1.png
当我单击 answer1.png 给我另一个随机问题，然后是那个问题的答案等等...我不想得到重复的问题，直到全部显示然后再去另一个随机序列 5图片和答案。

谢谢！

或者我可以使用带有链接而不是图像的不同网页，但更难做到不重复。你怎么看？

【问题讨论】：

问题是什么？

标签： javascript random

【解决方案1】：

一种可能性是对您的数组进行洗牌（请参阅How to randomize (shuffle) a JavaScript array? 了解如何操作），然后您可以简单地对洗牌后的数组进行迭代。

【讨论】：

【解决方案2】：

有人帮我写了这段代码。效果很好。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
 <base href="http://www.vicsjavascripts.org/StdImages/" />
</head>

<body>
<img id="question" src="1.gif" style="visibility:hidden;" onclick="Question('question','answer',QAArray,false);"/> 
<br/>
<img id="answer" src="Egypt5.jpg"  style="visibility:hidden;"onclick="Question('question','answer',QAArray,true);" />

<script type="text/javascript">
/*<![CDATA[*/

var QAArray=[
 ['1.gif','Egypt5.jpg'],
 ['2.gif','Egypt6.jpg'],
 ['3.gif','Egypt7.jpg'],
 ['4.gif','Egypt8.jpg']

]

function Question(q,a,ary,qa){
 var qo=document.getElementById(q),ao=document.getElementById(a),o=Question[a];
 if (!o||!o.a[0]){
  Question[a]=o={
   a:ary.concat().sort(function(){return 0.5 - Math.random();})
  }
 }
 if (o&&o.a[0]){
  if (qo.style.visibility=='hidden'){
   qo.style.visibility='visible';
   qo.src=o.a[0][0];
   ao.src=o.a[0][1];
  }
  if (qa===false&&ao.style.visibility=='hidden'){
   ao.style.visibility='visible';
  }
  else if (qa===true){
   qo.style.visibility=ao.style.visibility='hidden';
   o.a.splice(0,1);
   Question(q,a,ary);
  }
 }
}

Question('question','answer',QAArray);

/*]]>*/
</script>
</body>

</html>

【讨论】：

【解决方案3】：

你可以使用 sort() 来打乱这样的数组。

let yourArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
yourArray.sort(() => Math.random() - 0.5);
console.log(yourArray);

【讨论】：