类似彩票，出现5个不相等的随机数

前言

前几天课堂上做了一个小 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 到这里也就结束了，希望大家喜欢！

类似彩票，出现5个不相等的随机数

前言

思路解析

推荐阅读更多精彩内容