0

冒着人们再次对我不满意的风险，我将发布我已经拥有的代码。请查看评论，让我知道我哪里出错了。

是的，这是家庭作业，是的，我观看了视频并查看了我们的书（JavaScript by Example），顺便说一句，这是一本可怕的书。我试图给我的老师发电子邮件，但我没有收到任何回复。这是对 JavaScript 课程的 5 周介绍，我显然不了解其中的任何内容。

// create an array named imagesArray that contains the seven image file names: dog.jpg, fox.jpg, mouse.jpg, alligator.jpg, fish.jpg, parrot.jpg and cat.jpg
imagesArray = new Array(7);
imagesArray[0] = new Image();
imagesArray[0].src = new "dog.jpg";
imagesArray[1] = new Image();
imagesArray[1].src = new "fox.jpg";
imagesArray[2] = new Image();
imagesArray[2].src = new "mouse.jpg";
imagesArray[3] = new Image();
imagesArray[3].src = new "alligator.jpg";
imagesArray[4] = new Image();
imagesArray[4].src = new "fish.jpg";
imagesArray[5] = new Image();
imagesArray[5].src = new "parrot.jpg";
imagesArray[6] = new Image();
imagesArray[6].src = new "cat.jpg";

function displayImage() {
  var num = Math.floor(Math.random());
  document.getElementById(imagesArray[num]);
}

// create a function named displayImage
// it should not have any values passed into it
// the statement block of the displayImage should have two statements
// the first statement should generate a random number in the range 0 to 6 (the subscript values of the image file names in the imagesArray)
// the second statement display the random image from the imagesArray array in the canvas image using the random number as the subscript value
// when you generate the random number you might want to use the following formula
// a random number * the number of images in the imagesArray (Hint use the appropriate Math method to generate a random number
// remember the subscript values of the array are 0 to 6 (seven elements) zero based array
// you will have to subtract 1 from the random number generated to account for the zero based array
// In the button tag below add an onClick event handler that calls the displayImage function
// do not pass any value to the displayImage function
<form name="imageForm">
  <table border=3>
    <tr>
      <td>
        <input type=button value="Display Random Image">
      </td>
    </tr>
    <tr>
      <td>
        <img src="blank.jpg" name="canvas">
      </td>
    </tr>
  </table>
</form>

4

3 回答 3

5

现场演示

HTML：

<!-- 
    //In the button tag below add an onClick event handler that calls the displayImage function
    //do not pass any value to the displayImage function
-->

<form name="imageForm">
  <table border=3>
  <tr>
    <td>
      <input onclick="displayImage();" type=button value="Display Random Image">
    </td>
  </tr>
  <tr>
    <td>
      <img src="blank.jpg" name="canvas" />
    </td>
  </tr>
  </table>
</form>

JS：

//create an array named imagesArray that contains the seven image file names
//dog.jpg, fox.jpg, mouse.jpg, alligator.jpg, fish.jpg, parrot.jpg and cat.jpg

var imagesArray = ["dog.jpg", "fox.jpg", "mouse.jpg", "alligator.jpg", "fish.jpg", "parrot.jpg", "cat.jpg"];


//create a function named displayImage
//it should not have any values passed into it

function displayImage(){

    //the first statement should generate a random number in the range 0 to 6 (the subscript values of the image file names in the imagesArray)
    var num = Math.floor(Math.random() * 7); // 0...6
    //the second statement display the random image from the imagesArray array in the canvas image using the random number as the subscript value
    document.canvas.src = imagesArray[num];

}

//remember the subscript values of the array are 0 to 6 (seven elements) zero based array
//you will have to subtract 1 from the random number generated to account for the zero based array

如果你想让它变得更好（A+ ;) ）使用：

var num = Math.floor(Math.random() * (imagesArray.length+1)); // 0...6
于 2013-10-30T20:51:45.720 回答
2

你很亲近！只是错过了几件事。

您的随机数生成器将生成一个介于 0-1 之间的数字。要使其生成 0-5 之间的数字（1-6，但请记住减去一个，因为这是数组的索引），请使用以下代码段：

var num = Math.floor(Math.random() * 5);

您需要将 onClick 属性添加到您的按钮元素。

<input type="button" onClick="displayImage()" value="Display Random Image">
于 2013-10-30T20:44:28.487 回答
1

谢谢你的线程！我是这样申请的。

JS

var imgArr = ["img.jpg","name.jpg","could.jpg","be.jpg","anything.jpg"];

function displayImg(){
    var num = Math.floor(Math.random() * (imgArr.length));
    document.canvas.src="img/"+imgArr[num];
}

HTML

<input type="button" onClick="displayImg()" value="Display Random Image">
<img src="img/dog4.jpg" name="canvas" style="width:200px"/>
于 2019-01-23T04:01:05.373 回答