JavaScript显示随机图像 [英] JavaScript Display Random Images
本文介绍了JavaScript显示随机图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
冒着人们不再对我感到满意的风险，我会发布我已经拥有的代码。请查看评论，让我知道我哪里出错了。是的，这是家庭作业，是的，我已经观看了视频，并查看了我们的书（JavaScript by Example），顺便说一下，这本书很糟糕。我试图通过电子邮件发送给我的老师，但我什么也没收到。这是JavaScript课程的5周介绍，我显然不理解任何一个。
At the risk of people not being happy with my again I will post the code that I already have. Please look at the comments and let me know where I am going wrong. Yes this is homework, yes I have watched videos and looked at our book (JavaScript by Example) which is a horrible book by the way. I have tried to e-mail my teacher but I get nothing back. This is a 5 week intro to JavaScript class and I am obviously not understanding any of it.
<HTML>
<HEAD>
<script>
//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
</script>
</HEAD>
<BODY>
<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>
</BODY>
</HTML>
推荐答案
LIVE DEMO
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 + ;））使用：
If you want to make it even better ( A+ ;) ) use:
var num = Math.floor(Math.random() * (imagesArray.length+1)); // 0...6
这篇关于JavaScript显示随机图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
