从数组中选取一个随机img以显示何时单击img

时间:2017-03-10 20:46:39

标签: javascript html

我来了一个像这样的java脚本。

<script>
function pickimg2() {
var imagenumber = 19;
  var randomnumber = Math.random();
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images = new Array;
images[0] = "2_of_clubs.png";
images[1] = "2_of_diamonds.png";
images[2] = "2_of_hearts.png";
images[3] = "2_of_spades.png";
images[4] = "3_of_clubs.png";
images[5] = "3_of_diamonds.png";
images[6] = "3_of_hearts.png";
images[7] = "3_of_spades.png";
images[8] = "4_of_clubs.png";
images[9] = "4_of_diamonds.png";
images[10] = "4_of_hearts.png";
images[11] = "4_of_spades.png";
images[12] = "5_of_clubs.png";
images[13] = "5_of_diamonds.png";
images[14] = "5_of_hearts.png";
images[15] = "5_of_spades.png";
images[16] = "6_of_clubs.png";
images[17] = "6_of_diamonds.png";
images[18] = "6_of_hearts.png";
images[19] = "6_of_spades.png";
images[20] = "6_of_clubs.png";
images[21] = "6_of_diamonds.png";
images[22] = "6_of_hearts.png";
images[23] = "6_of_spades.png";
  var image = images[rand1];
  document.randimg.src = image;
}

直播演示

https://jsfiddle.net/0d2u525x/

然后我尝试使用这个HTML代码。

<body onload="pickimg2">
<a href=""onClick="pickimg();return false;"><img src="BicycleBlue.jpg" name="randimg" border=0></a>
<input id="clickMe" type="button" value="clickme" onclick="doFunction();">
</input>
</body>


https://jsfiddle.net/0d2u525x/

我怎么能做这个工作,这应该适用于由67张卡组成的完整卡片组,所以如果你可以帮助我,使用代码,以便它设置为taht imagenumber,它将是一个hughe help,我当然要添加我自己的最后一张图片。 ?

2 个答案:

答案 0 :(得分:0)

Math.Random生成一个介于0和1之间的浮点数,这不是你需要的。 由于您共有24张图片,请尝试此操作

 var randomnumber = Math.Floor(Math.random()*24);

答案 1 :(得分:0)

试试这个

&#13;
&#13;
var images = 
      ["2_of_clubs.png", "2_of_diamonds.png", "2_of_hearts.png", "2_of_spades.png"
      ,"3_of_clubs.png", "3_of_diamonds.png", "3_of_hearts.png", "3_of_spades.png"
      ,"4_of_clubs.png", "4_of_diamonds.png", "4_of_hearts.png", "4_of_spades.png"
      ,"5_of_clubs.png", "5_of_diamonds.png", "5_of_hearts.png", "5_of_spades.png"
      ,"6_of_clubs.png", "6_of_diamonds.png", "6_of_hearts.png", "6_of_spades.png"
      ,"7_of_clubs.png", "7_of_diamonds.png", "7_of_hearts.png", "7_of_spades.png"
      ,"8_of_clubs.png", "8_of_diamonds.png", "8_of_hearts.png", "8_of_spades.png"
      ,"9_of_clubs.png", "9_of_diamonds.png", "9_of_hearts.png", "9_of_spades.png"];

    function pickimg2() {
      var imagenumber = images.length;
      var randomnumber = Math.random();
      var rand1 = Math.floor(imagenumber*randomnumber);
      var image = images[rand1];
      document.randimg.src = image;
      document.randimg.alt = image;
      document.getElementById("imageName").innerHTML = image;
    }
&#13;
<img src="BicycleBlue.jpg" name="randimg" border=0>
 <p id="imageName"></p>
    <input id="clickMe" type="button" value="clickme" onclick="pickimg2();"/>
&#13;
&#13;
&#13;

修改 您的代码的第一个问题是images数组。有许多方法可以初始化数组,但最简单的是文字形式,如下所示:

var arr = [0,3,5,6];

此外,如果您要重用该数组,则应在函数pickimg2之外定义。