This is very easy to generate a random number with jQuery but it does require a little trick. The first idea comes to my mind is using the jQuery math.random() method.
math.random();
The jquery math.random() method will generate a random number between 0 and 1.
For example:
0.2354486641392316
0.2291743008785303
0.2388286943452832
0.9688323080366275
0.3675530797804054
0.9903216010816865
0.7923237158564237
Etc….
jQuery Example File:
Please mouse right click the above link, then select “Save link as…” to download the example source file.
We already get a random number between 0 and 1 as shown above. But how can we convert them to an integer within a certain range, for example, between 0 and 10, between 1 and 6, etc…?
Luckily enough, jQuery library has both the Math.ceil() method and Math.floor() method. Let’s see how they works one by one:
jQuery Math.ceil() Method
Math.ceil()
In short, Math.ceil() will round a number upward to it’s nearest integer.
For example:
Math.ceil(1.2) – > 2
Math.ceil(1.6) – > 2
Math.ceil(0.80) -> 1
Math.ceil(0.30) -> 1
Math.ceil(4) -> 4
Math.ceil(4.3) -> 5
Math.ceil(-4.1) -> -4
Math.ceil(-4.8) -> -4
The best way to study how jQuery Math.ceil() works is to write a simple jQuery codes, as shown below:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery("document").ready(function() {
// Declare a variable
var i = 0;
function loopProcess() {
// Increase the number by 0.10
i = i + 0.10;
// Print out the number and the ceil number
jQuery("#outputText").text(i + " ----> " + Math.ceil(i));
}
// Execute the function in set interval (milli-seconds)
setInterval(loopProcess, 2000);
});
</script>
</head>
<body>
<h1>Testing Math.ceil() Method</h1>
<div id="outputText">Print Here!</div>
</body>
</html>
The first printed number is the original number, and the second number is after the ceiling.
jQuery Example File:
Please mouse right click the above link, then select “Save link as…” to download the example source file.
jQuery Math.floor() Method
Math.floor()
Math.floor() will round a number downward to it’s nearest integer.
For example:
Math.floor(1.9) -> 1
Math.floor(1.7) -> 1
Math.floor(0.80) -> 0
Math.floor(0.30) -> 0
Math.floor(4) -> 4
Math.floor(4.3) -> 4
Math.floor(-4.2) -> 5
Math.floor(-4.8) -> 5
The following jQuery demonstrate how Math.floor works:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery("document").ready(function() {
// Declare a variable
var i = 0;
function loopProcess() {
// Increase the number by 0.10
i = i + 0.10;
// Print out the number and the Math.floor number
jQuery("#outputText").text(i + " ----> " + Math.floor(i));
}
// Execute the function in set interval (milli-seconds)
setInterval(loopProcess, 2000);
});
</script>
</head>
<body>
<h1>Testing Math.floor() Method</h1>
<div id="outputText">Print Here!</div>
</body>
</html>
jQuery Example File:
Please mouse right click the above link, then select “Save link as…” to download the example source file.
Generate Random Number Within a Range
Okay! We should have enough knowledge to convert the random number generated by math.random() method to an integer within a certain range.
Let’s recall the numbers generated by Math.random() method. The jquery math.random() method will generate a random number between 0 and 1.
For example:
0.2354486641392316
0.5291743008785303
0.0106874251723083
0.6388286943452832
0.9688323080366275
0.3675530797804054
0.8903216010816865
0.7923237158564237
Etc….
How about generating random numbers between 1 and 10 or 0 and 9.
Hm… Let’s try to multiply the random numbers generated by Math.random() by 10. The results will be:
Math.random() x 10:
2.354486641392316
5.291743008785303
0.106874251723083
6.388286943452832
9.688323080366275
3.675530797804054
8.903216010816865
7.923237158564237
Etc….
Case i)
If we use Math.ceil() to round up the numbers generated by Math.random(), we will get:
Math.ceil(Math.random() x 10):
3
6
1
7
10
4
9
8
Etc….
Ha! We get random number between 1 and 10 using:
Math.ceil(Math.random() * 10);
jQuery Example File:
Case ii)
If we use Math.floor() to round up the numbers generated by Math.random(), we will get:
Math.floor(Math.random() x 10):
2
5
0
6
9
3
8
7
Etc….
In other words, we get random number between 0 and 9 using:
Math.floor(Math.random() * 10);
jQuery Example File:
Demo Generate Random Number Between 1 and 10:
With this concept, this should be easy to generate random numbers within a range.
Leave a Reply