js双色球：全网最清晰思路！不懂算我输

需求：

页面显示6个红球，1个蓝球；
点击开始按钮，数字开始随机变换；
点击结束按钮，数字停止变换，显示红蓝随机数

思路：

1、封装函数：用于获取id名
2、通过封装好的函数，通过id名，获取某元素
3、封装函数：获取一定位数的随机数数组
1）空数组：接收最后的结果
2）while循环：获取所需个数的随机数
随机数
小于0的随机数，前面拼接0
if判断：数组去重，结果放于空数组
4、先运行一次页面函数
5、封装函数：为写入页面
1）每次循环，从空字符串开始
2）调用封装：获取红球字符串
获取蓝球字符串
3）拼接红蓝字符串
4）for in循环，遍历每一项添加至空字符串，并写入页面
6、给定一个空字符串，用于存放定时器
7、开始按钮点击事件
1）赋予空对象定时器
2）操作后禁用
8、结束按钮点击事件
1）清除定时器
2）还原空对象
3）接触开始按钮禁用

解析：

    //封装获取id名
    function getId(names){
        return document.getElementById(names);
    }
    //获取元素
    var red_num = getId('getDiv');
    var starts = getId('starts');
    var ends = getId('ends');
    //封装  得到的一定位数的随机数数组
    function getNum(start,end,many){  //start 随机数的起始值;end 随机数的结束值;many 需要几个随机数
        var shuzu = [];  //用来装最后的结果 
        while(shuzu.length < many){  //需要几个随机数去循环
            //随机数
            var num = Math.floor(Math.random() * (end - start + 1) + start);
            var num = num < 10 ? '0' + num : num;  //小于10，在前面加0
            if(shuzu.indexOf(num) == -1){  //数组去重
                shuzu.push(num);  //结果放到空数组里
            }
        }
        return shuzu;
    }
    getHtml();
    function getHtml(){  //为写入页面封装
        //使每一次循环都从空开始
        var str = '';
        //调用封装的函数，获取红球
        var sj = getNum(1,33,6);
        //调用封装的函数，获取篮球
        var sjj = getNum(1,16,1);
        //拼接为一个完整数组
        var qiu = sj.concat(sjj);
        //循环并写入页面
        for(var i in qiu){
            //给空字符串添加项
            str += `${qiu[i]}`;
            //页面显示添加项后的字符串
            red_num.innerHTML = str;
        }
    }        

    var timer = null;
    //给一个空对象，用于存放定时器
    starts.onclick = function(){
     //开始按钮点击事件
        timer = setInterval(getHtml,100);
        //给空对象赋予定时器（函数为；调用写入页面函数
        starts.disabled = true;
        //在操作后，禁用开始按钮
    }
    ends.onclick = function(){
     //结束按钮点击事件
        clearInterval(timer);
        //清除定时器
        timer = null;
        //并还原空对象
        starts.disabled = false;
        //解除开始按钮禁用
    }