<html>
<head>
<title> Random Image Generator </title>
</head>
<script>
function getRandomImage() { //declare an array to store the images var randomImage = new Array();
//insert the URL of images in
array randomImage[0] = "
https://images.pexels.com/photos/858115/pexels-photo-858115.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";
randomImage[1] = "
http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cutepuppies.jpg";
randomImage[2] = "
https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"; randomImage[3] = "
https://images.unsplash.com/photo-1543877087-ebf71fde2be1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60";
randomImage[4] = "
https://wi.wallpapertip.com/wsimgs/156-1565522_puppies-desktop-wallpaper-desktop-background-puppies.jpg"; randomImage[5] = "
https://images.unsplash.com/photo-1501265976582-c1e1b0bbaf63?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60";
//generate a number and provide to the image to generate randomly
var number = Math.floor(Math.random()*randomImage.length);
//return the images generated by a random numbe
return document.getElementById("result").innerHTML = '<img src="'+randomImage[number]+'" />'; }
</script>
<body>
<center><h2 style="color:green"> Random Image Generator </h2></center> <h4> Click the button to generate and display random images on the webpage </h4> <!-- call user-defined getRandomImage function after 2 seconds --> <button onclick = "setInterval(getRandomImage, 2000)"> Generate Image </button> <br> <br> <span id="result" align="center"> </span> </body> </html>
ต้องเเก้ยังไงไม่ให้รูปเป็น loop ครับ
<head>
<title> Random Image Generator </title>
</head>
<script>
function getRandomImage() { //declare an array to store the images var randomImage = new Array();
//insert the URL of images in
array randomImage[0] = "https://images.pexels.com/photos/858115/pexels-photo-858115.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";
randomImage[1] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cutepuppies.jpg";
randomImage[2] = "https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"; randomImage[3] = "https://images.unsplash.com/photo-1543877087-ebf71fde2be1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60";
randomImage[4] = "https://wi.wallpapertip.com/wsimgs/156-1565522_puppies-desktop-wallpaper-desktop-background-puppies.jpg"; randomImage[5] = "https://images.unsplash.com/photo-1501265976582-c1e1b0bbaf63?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60";
//generate a number and provide to the image to generate randomly
var number = Math.floor(Math.random()*randomImage.length);
//return the images generated by a random numbe
return document.getElementById("result").innerHTML = '<img src="'+randomImage[number]+'" />'; }
</script>
<body>
<center><h2 style="color:green"> Random Image Generator </h2></center> <h4> Click the button to generate and display random images on the webpage </h4> <!-- call user-defined getRandomImage function after 2 seconds --> <button onclick = "setInterval(getRandomImage, 2000)"> Generate Image </button> <br> <br> <span id="result" align="center"> </span> </body> </html>