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