JavaScript 随机数示例

客官°小女子只卖身不卖艺 2022-09-14 09:40 111阅读 0赞

JavaScript 随机数(Random)

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

[Math.random() - JavaScript | MDN][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

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_14_color_FFFFFF_t_70_g_se_x_16][]

**例子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

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_14_color_FFFFFF_t_70_g_se_x_16 1][]

**例子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][parseInt - JavaScript _ MDN]

[Math.random_ - JavaScript _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/8b036f5d87b94ef2812cc4716988afa1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_14_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/62d65e70a5ba4128892c0ed63eb59a2f.png
[parseInt - JavaScript _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt