JavaScript 随机数示例

JavaScript 随机数(Random)

Math.random() 函数返回一个浮点数, 伪随机数在范围从0到小于1，即[0,1) ，也就是说，从0（包括0）往上，但是不包括1（排除1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。

Math.random() - JavaScript | MDN

Math.ceil()，Math.floor()，Math.round()及parseInt()都可以得到整数，它们的区别：
Math.ceil(); //向上取整。
Math.floor(); //向下取整。
Math.round(); //四舍五入。

Math.floor(Math.random() * 10); // 返回 0 至 9 之间的数

Math.floor(Math.random() * 11); // 返回 0 至 10 之间的数

Math.floor(Math.random() * 10) + 1; // 返回 1 至 10 之间的数

Math.floor(Math.random() * (max - min) ) + min; //返回介于 min（包括）和 max（不包括）之间的随机数

Math.floor(Math.random() * (max - min + 1) ) + min; //返回介于 min 和 max（都包括）之间的随机数

例子1、返回 0 与 9 之间的随机整数（均包含）的例子，源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 随机数示例</title>
</head><body><h2>随机数示例</h2><p>Math.floor(Math.random() * 10) 返回 0 与 9 之间的随机整数（均包含）：</p><p id="demo"></p><button onclick="randomNumber()">产生</button><script>
function randomNumber(){
document.getElementById("demo").innerHTML = Math.floor(Math.random() * 10);
}
</script></body>
</html>

保存文件名为：随机数例1.html

用浏览器运行测试之，效果如下：

例子2、返回 0 与 9 之间的随机整数（均包含）的例子，另一种写法源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 随机数示例2</title>
</head><body><h2>随机数示例2</h2><p>返回 1 与 9（均包含）之间的随机数的另一种写法：</p><p id="demo"></p><button onclick="randomNumber(1,9)">产生</button><script>
function randomNumber(min, max){
document.getElementById("demo").innerHTML =  Math.floor(Math.random() * (max - min + 1) ) + min;
}
</script></body>
</html>

保存文件名为：随机数例2.html

用浏览器运行测试之，效果如下：

例子3、下面给出一个随机数的猜数字游戏源码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>猜数字游戏</title>
</head>
<body><p >数字范围[1~100]</p><label for="guessNum">请猜一个数字：</label><input type="text" id="guessNum" class="guessNum" /><input type="submit" name="" id="" value="确定" class="guessSubmit"/><p class="guesses"></p><p class="lastResult"></p><p class="lowOrHi"></p></body>
<script>//开始编写 JavaScript 代码let randomNumber = Math.floor(Math.random()* 100) + 1;const guesses = document.querySelector('.guesses');const lastResult = document.querySelector('.lastResult')const lowOrHi = document.querySelector('.lowOrHi')const guessSubmit = document.querySelector('.guessSubmit')const guessNum = document.querySelector('.guessNum')let guessCount = 1;let resetButton;function checkGuess(){let userGuess = Number(guessNum.value);if(guessCount === 1){guesses.textContent = '上次猜的数字：';}guesses.textContent += userGuess + ' 'if(userGuess === randomNumber){lastResult.textContent = '恭喜你！猜对了';lastResult.style.backgroundColor = 'green';lowOrHi.textContent = '';setGameOver();}else if(guessCount === 10){lastResult.textContent = '答题次数过多，游戏结束！'setGameOver();}else{lastResult.textContent = '回答错误！';lastResult.style.backgroundColor = 'red';if(userGuess < randomNumber){lowOrHi.textContent = '猜低了！'}else if(userGuess > randomNumber){lowOrHi.textContent = '猜高了！'}}guessCount ++;guessNum.value = '';//获取较焦点guessNum.focus();}guessSubmit.addEventListener('click',checkGuess);function setGameOver(){guessNum.disabled = true;guessSubmit.disabled = true;resetButton = document.createElement('button');resetButton.textContent = '开始新游戏！';document.body.appendChild(resetButton);resetButton.addEventListener('click',resetGame);}function resetGame(){guessCount = 1;const resetParas = document.querySelectorAll('.resultParas p');for(let i = 0; i < resetParas.length;i ++){resetParas[i].textContent = '';}resetButton.parentNode.removeChild(resetButton);guessNum.disabled = false;guessSubmit.disabled = false;guessNum.value = '';guessNum.focus();lastResult.style.backgroundColor = 'burlywood';randomNumber = Math.floor(Math.random() * 100) + 1;}
</script>
</html>

可以用Math.random()的方法轻松的生成一个随机的数字，但是这个数字可能是重复的。如何实现？

首先创建一个范围的数组，再把这个数组打散，然后再依次提取使用，这样可以做到随机永不重复，且效率较高。见下面的例子。

例4、生成不重复的随机数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机不重复</title>
<script>
//首先创建一个范围的数组
var count=100;
var originalArray=new Array;//原数组
//给原数组originalArray赋值
for (var i=0;i<count;i++){ originalArray[i]=i+1;
}
//再把这个数组打散，
originalArray.sort(function(){ return 0.5 - Math.random(); }
);
//然后再依次提取使用，下面是输出
for (var i = 0; i < count; i++) {document.write(originalArray[i] + "<br>");
}
</script>
</head><body>
</body>
</html>

附录

parseInt()； //向下取整。parseInt - JavaScript | MDN

JavaScript 随机数示例相关推荐

JavaScript 验证码示例
在本教程中,您将获得 JavaScript 验证码示例. Captcha 用于确定填写和提交 Web 表单的用户是否为人类.在开发 Web 项目时,我们经常需要添加验证码功能. 所以在这里我分享了在 ...
JavaScript验证码示例
In this tutorial you will get JavaScript captcha example. 在本教程中,您将获得JavaScript验证码示例. Captcha is used ...
Javascript 随机数函数学习之一：产生服从均匀分布随机数
大家都知道Math.random是 javascript 中返回伪随机数的函数,但查看 MDN, The Math.random() function returns a floating-point ...
JavaScript定时器示例
JavaScript定时器示例在前端,我们有很多功能需要用到定时器(Timing).譬如轮询,譬如定时关闭弹框,譬如实现秒表,譬如一段时间后跳转页面等等.因此,我们需要掌握定时器的用法. windo ...
JavaScript随机数的应用
JavaScript的随机数Math.random()/返回值/ 在0(包含)和1(不包括)之间的浮点伪随机数. ** 例子 function getRandom() {//获取0-1之间随机数ret ...
JavaScript 随机数 – 如何在 JS 中生成随机数
在使用 JavaScript 程序时,有时您可能需要生成一个随机数. 例如,您可能希望在开发 JavaScript 游戏(例如猜数字游戏)时生成一个随机数. JavaScript 有许多用于处理数字和 ...
python生成随机数random操作_Python random生成随机数示例
代码中经常有一些生成随机数的需求.特意整理了一下Python中random模块的一些相关使用方法示例. python生成随机数随机整数: >>> import random > ...
微信小程序获取手机号 JavaScript解密示例代码详解
刚开始开发微信小程序的时候,想着实现手机验证码登入,后来查阅资料得知,发给用户的短信是要自己付费的.后来想想,微信获取用户的手机号一样可以保证手机号码的真实性,因为手机号既然可以绑定微信,那么肯定是被 ...
Tabulator 交互式数据表格 javascript 库示例
在本JavaScript 教程中,我们将看到如何使用tabulator js.在这个tabulator js 示例或tabulator js 教程中,我们将看到如何使用 tabulator js 立 ...

JavaScript 随机数示例

JavaScript 随机数示例相关推荐

最新文章

热门文章