Home > Web Front-end > JS Tutorial > Generating Random Numbers in JavaScript with Math.random()

Generating Random Numbers in JavaScript with Math.random()

Joseph Gordon-Levitt
Release: 2025-02-11 08:31:12
Original
898 people have browsed it

This article will introduce how to use the JavaScript Math.random() function to generate random numbers and build a reusable function to apply to various scenarios, such as loading random pictures, random selection of elements from an array, and generating random colors. Letters, strings, phrases, and passwords.

Core points:

  • The built-in Math.random() function in JavaScript generates pseudo-random floating point numbers between 0 (inclusive) and 1 (not included). To generate a random number greater than 1, just multiply the result by the scale factor.
  • To generate a random integer, use the Math.floor function to round down. To generate random integers within a specific range, simply add the minimum value of the range to the result.
  • This article shows how to use the Math.random() function to generate random images, colors, letters, strings, phrases, and passwords. These techniques can add random elements to your JavaScript program.
  • The functions created in the
  • article (such as randomInt, randomColor and randomString) are building blocks for more complex functions, showing the cornerstone of programming: using functions to create more complex functions.

Randomity in JavaScript

It is very useful to add random elements to your program. You may want to add some random styles to enhance the fun of your website, generate random phrases, or add accidental elements to the game.

Unfortunately, creating real random values ​​is actually very difficult (unless you are able to get exposed to radioactive substances… or a monkey using a keyboard). To solve this problem, the programming language uses a deterministic method to generate pseudo-random numbers. These numbers appear to be random, but are actually generated by functions that accept seed values ​​based on events such as time or mouse pointer position.

JavaScript has random function, which is a method with built-in Math objects. The ECMAScript standard does not specify how this function should generate random numbers, so it is left to the browser manufacturer to implement. At the time of writing, all major browsers currently use the xorshift128 algorithm in the background to generate pseudo-random numbers.

To use it, just enter Math.random() and it will return a pseudo-random floating point number between 0 (inclusive) and 1 (not included):

const x = Math.random();
Copy after login
Copy after login

This can be expressed by the following inequality:

<code>0 ≤ x < 1</code>
Copy after login
Copy after login

But what if you want a random number greater than 1? It's simple: you just need to multiply by a scale factor to amplify it - for example, multiplying the result by 10 will yield a value between 0 (inclusive) and 10 (not included):

const y = Math.random() * 10;
Copy after login
Copy after login

If we multiply both sides of the previous inequality by 10, we can see the reason:

<code>0 ≤ y < 10</code>
Copy after login
Copy after login

But the result is still a floating point number. What if we want a random integer? It's very simple: we just need to use the Math.floor function to round the return value down to the integer below. The following code assigns a random integer between 0 and 9 (included) to the variable z:

const z = Math.floor(Math.random() * 10);
Copy after login
Copy after login

Note that even if we multiply by 10, the returned value is only 9.

We can generalize this method to create a function that will return 0 to (but not included) a random integer between the numbers provided as a parameter:

const x = Math.random();
Copy after login
Copy after login

We can now use this function to return random numbers between 0 and 9:

<code>0 ≤ x < 1</code>
Copy after login
Copy after login

So we now have a way to create random integers. But what if it is between two different values, instead of always starting from zero? We just need to use the above code and add the value we want the range to start. For example, if we want to generate random integers between 6 and 10 (included), we will first generate random integers between 0 and 4 using the above code, and then add 6 to the result:

const y = Math.random() * 10;
Copy after login
Copy after login

Note that in order to generate a random integer between 0 and 4, we actually have to multiply by 5.

We can generalize this method to create a function that will return a random integer between two values:

<code>0 ≤ y < 10</code>
Copy after login
Copy after login

This is just a generalized form of code we write to get random numbers between 6 and 10, but replace 6 with the min parameter and 10 with the max parameter. To use it, just enter two parameters to represent the lower and upper limits of the random number (included). Therefore, to simulate rolling six-sided dice, we can use the following code to return an integer between 1 and 6:

const z = Math.floor(Math.random() * 10);
Copy after login
Copy after login

Generating Random Numbers in JavaScript with Math.random()

(The picture should be inserted here, but the picture cannot be displayed because the local file system cannot be accessed)

The rest of the parts are similar to the original text. They can be rewritten according to the original text. While maintaining the consistency of the content, adjust the sentence structure and words to make it smoother and more natural. It should be noted that the pictures need to be preserved and kept in their original format.

The above is the detailed content of Generating Random Numbers in JavaScript with Math.random(). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template