前言
前幾天課堂上做了一個小 demo兔簇，隨機(jī)5個不相等的整數(shù)发绢，今天想和大家分享一下硬耍，希望能幫助大家！老規(guī)矩边酒，先來看效果经柴。
思路解析
先給大家講講思路，由于代碼量比較小墩朦，就直接上代碼了坯认。
主體部分就是一個 <button> 按鈕和一個 <p> 標(biāo)簽，這個沒什么可說的氓涣。那么就直接來說說效果是怎么實現(xiàn)的牛哺。
通過 <button>按鈕的點(diǎn)擊事件來觸發(fā)定時器setInterval()，然后通過定時器來調(diào)用函數(shù)產(chǎn)生隨機(jī)數(shù)劳吠，在函數(shù)里通過 <while>循環(huán)來得到5個不同的隨機(jī)數(shù),最后再清除定時器就可以產(chǎn)生一組隨機(jī)數(shù)了引润。來看看代碼吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" id="btn" value=" 隨機(jī)一注">
<p id="content"></p>
</body>
<script type="text/javascript">
function RandNumber(){
var arr=[];
// 要求 arr 里面裝載5個不一樣的數(shù)字，數(shù)字的范圍20-50
// 不確定循環(huán)次數(shù)的時候就用 while
// 想要隨機(jī)一個【a痒玩，b】區(qū)間的數(shù)字（整數(shù)）
// 公式：Math.random * (b-a+1)+a 最后取整
while(arr.length<5){
var num=parseInt(Math.random()*(50-20+1)+20);
while(arr.indexOf(num)!=-1){
//等于-1椰拒，表明在數(shù)組前面的數(shù)中沒有找到相同元素
// 不等于-1，表明在數(shù)組前面的數(shù)中找到相同元素凰荚，需要重新給出一個 隨機(jī)數(shù)
var num=parseInt(Math.random()*(50-20+1)+20);
}
arr.push(num);
}
return arr;
}
var p =document.getElementById('content');
var btn =document.getElementById('btn');
btn.onclick=function(){
var timer = setInterval(function(){
var nums =RandNumber();
p.innerHTML=nums;
},30);
setTimeout(function(){
clearInterval(timer);
},1000);
}
</script>
</html>
看完代碼，可能大家就對<while>里面判斷有點(diǎn)疑問褒脯。arr.indexof()是查找當(dāng)前元素在數(shù)組中的下標(biāo)便瑟，當(dāng)返回值為 -1 的時候，證明沒有找到該元素番川，也就說明了數(shù)組前面幾個數(shù)字沒有與當(dāng)前產(chǎn)生的數(shù)的值相等的到涂，當(dāng)不等于 -1 的時候就重新產(chǎn)生一個隨機(jī)數(shù)。然后就將產(chǎn)的數(shù)一次放入數(shù)組中颁督。
這個小 demo 到這里也就結(jié)束了践啄，希望大家喜歡！
