用js实现双色球

html样式

  

        
      //创建7个li；前6个是红球。最后一个是篮球
        

        

        

        

        

        

    
    开始         //开始按钮
    停止          //结束按钮

js样式

var lis = document.querySelectorAll("ul li"),//获取每一个li(放双色球号码)
start = document.getElementById("start"),//获取开始按钮
stop = document.getElementById("stop");//获取停止按钮

    //封装一个函数，功能为随机选红（蓝）号
    function randoms( stop, star,lens) {   //三个参数   lens为红（蓝）号码所在数组的长度；star为随机数的起始值‘；stop为随机数的
        var arr = []; 
        // console.log(arr.length)                                                //创建一个空的数组，目的是下边去接随机出来的内容
        while (arr.length < lens) {               //用while去循环遍历新创建的arr数组；while循环的功能是—先判断，再循环；
            var sj = Math.floor(Math.random() * (stop - star + 1) + star)      //star到stop的随机数
            if( arr.indexOf (sj) == -1){         //去除数组重复，indexOf()的功能是，在数组中找不见这一项，就返回 -1；
            arr.push(sj)                                  //只要数组中没有当前随机出来的数，我们就把它推（push)进我们创建的新数组
            }
        }
        return  arr                   //函数最终返回的是接不重复随机数的数组arr
    }
    //封装一个红蓝色球的产生及写入
    function arrWrite() {
        var redarr = randoms(32, 1, 6);  //红色球
        var bluearr = randoms(1, 1, 16);  //蓝色球
        redarr.sort(function(a,b){    //红色球排序（升序）
            return a-b
        })
        var brr = redarr.concat(bluearr);  //红蓝色球合并在一个数组里
      
        for (var i in brr) {       //遍历合并后的双色球，并写入
            lis[i].innerHTML = brr[i]
        }
    }
    
    arrWrite()    //调用红篮球的函数，目的是在我们一打开页面，就会出现一组红蓝球随机号码
   var timer = null;       //创建一个空的名字，去接计时器
    start.onclick = function () {          //开始键的点击事件
        timer = setInterval(function () {    //计时器
            arrWrite()                                  //调用红篮色球的函数
        }, 10)
        start.disabled = true;               //点击开始之后，禁用开始键，使其不能点击
    }
    stop.onclick = function(){          //停止键的点击事件
        clearInterval(timer);               //清楚定时器
        start.disabled = false;              //点击停止键之后，让开始键解禁
    }