Generate Random Numbers with jQuery

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:

Click here to download.

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:

Click here to download.

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:

Click here to download.

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:

Click here to download.

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:

Click here to download.

Demo Generate Random Number Between 1 and 10:

The lucky number is: Print Here

With this concept, this should be easy to generate random numbers within a range.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>