前言
前几天课堂上做了一个小 demo，随机5个不相等的整数，今天想和大家分享一下，希望能帮助大家！老规矩，先来看效果。
思路解析
先给大家讲讲思路，由于代码量比较小，就直接上代码了。
主体部分就是一个 <button> 按钮和一个 <p> 标签，这个没什么可说的。那么就直接来说说效果是怎么实现的。
通过 <button>按钮的点击事件来触发定时器setInterval()，然后通过定时器来调用函数产生随机数，在函数里通过 <while>循环来得到5个不同的随机数,最后再清除定时器就可以产生一组随机数了。来看看代码吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" id="btn" value=" 随机一注">
<p id="content"></p>
</body>
<script type="text/javascript">
function RandNumber(){
var arr=[];
// 要求 arr 里面装载5个不一样的数字，数字的范围20-50
// 不确定循环次数的时候就用 while
// 想要随机一个【a，b】区间的数字（整数）
// 公式：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，表明在数组前面的数中没有找到相同元素
// 不等于-1，表明在数组前面的数中找到相同元素，需要重新给出一个 随机数
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>里面判断有点疑问。arr.indexof()是查找当前元素在数组中的下标，当返回值为 -1 的时候，证明没有找到该元素，也就说明了数组前面几个数字没有与当前产生的数的值相等的，当不等于 -1 的时候就重新产生一个随机数。然后就将产的数一次放入数组中。
这个小 demo 到这里也就结束了，希望大家喜欢！
