Home > JavaScript > Generating Random Number in JavaScript

Generating Random Number in JavaScript

September 23rd, 2009 Captain Leave a comment Go to comments

Generating random numbers is very important in Javascript like other programming languages… JavaScript adds dynamism to our html pages. For example: If you want to add a slideshow that is arranged in order at random to your page, you need to generate a random number. In this article, we will see to generate a random number by using Javascript.


Structure 1.0: This is basic statement and we don’t determine nothing like maximum or minimum limit. A float number is generated which falls between 0 and 1.

1
Math.random();

Example 1.0: Let’s get output.

1
document.write(Math.random());

Probable Output of Example 1.0:

1
0.7594164892550456

1.1) Generating a Random Number Between Two Numbers

Structure 1.1: If we want to generate a random number between two numbers (that we determined), we should use this structure:

1
2
3
var MinNum=(Our minimum limit);
var MaxNum=(Our maximum limit);
Math.floor(Math.random()*(MaxNum-MinNum))+MinNum;

Formula: MinNum <= result < MaxNum

In this usage, the random number falls between MinNum(included) and MaxNum(excepted).

Example 1.1: We are generating a random number between 10(included) and 100(inculded).

1
2
3
var MinNum=10;
var MaxNum=101;
document.write(Math.floor(Math.random()*(MaxNum-MinNum))+MinNum);

Structure 1.2: This stucture can be used instead of Structure 1.1. The both structures do the same work except a little difference. The difference is using different functions in each structure which are floor() and round() functions.

1
2
3
var MinNum=(Our minimum limit);
var MaxNum=(Our maximum limit);
Math.round(Math.random()*(MaxNum-MinNum))+MinNum;

Formula: MinNum <= result <= MaxNum

In this usage, the random number falls between MinNum(included) and MaxNum(included).

Example 1.1: We are generating a random number between 10(included) and 100(inculded).

1
2
3
var MinNum=10;
var MaxNum=100-MinNum;
document.write(Math.round(Math.random()*MaxNum)+MinNum);

Application 1.0 (Getting a random image from an array)

 
functions.js:

1
2
3
4
5
6
7
var sourcefolder="http://www.memiso.com/wp-content/uploads/2009/09/";
var my_array=Array("Desert-Landscape-300x225.jpg","Forest-300x225.jpg","Winter-Leaves-300x225.jpg","Autumn-Leaves-300x225.jpg");
function randomImage(){
   randomNumber=Math.floor(Math.random()*4);
   document.getElementById("ImageDiv").innerHTML='<img src="' +sourcefolder+my_array[randomNumber] + '" vspace="3">';
}
randomImage();

 
index.html:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Getting a Random Image with Javascript</title>
</head>
<body>
<div style="margin: 2px; padding:4px; width: 300px; height: 255px; background-color:#f5f5f5; border:1px solid #cccccc;"><div  id="ImageDiv"></div><div id="ButtonDiv"><input onclick="randomImage();" type="button" value="Get Random Image" /></div></div>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>

 
Output of Application:


Download This Application:

rar iconRandomImage.rar (866 byte)
Bookmark and Share
Categories: JavaScript Tags: , , , , ,
  1. No comments yet.
  1. No trackbacks yet.
eXTReMe Tracker