js制作双色球

div样式如下

<div class="top">
        红球
        <div class="redball"></div>
        蓝球
        <div class="blueball"></div>
        <div>
            <button type="button" id="action">机选</button>
            <button type="button" id="stop">停止</button>
        </div>
    </div>

css代码如下

            display: inline-block;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            color: #333;
            border-radius: 100%;
        }
        .red {
            background: red;
            color: white;
        }
        .blue {
           background: blue;
            color:white;
        }

js代码如下
1.首先，我们要获取到所有的元素

 var redball = document.querySelector('.redball');
 var blueball = document.querySelector('.blueball');
 var action = document.querySelector('#action');
 var stop = document.querySelector('#stop');

2.然后我们要在js中添加元素，得到红球和蓝球的个数；

  var productionElement = function (count, targetElement) {
            var str = '';
            for (var j = 1; j <= count; j++) {
                str += '<span>' + j + '</span>'
            }
            targetElement.innerHTML = str;
        }
        productionElement(32, redball);
        productionElement(16, blueball);

3.取到随机数

   var randerCount = function (start, end) {
            var len = end - start + 1;
            return Math.floor(Math.random() * len + start);
        }

4.生产数组

 var productionArr = function (count, startCount, endCount) {
            var arr = [];
            while (arr.length < count) {
                var result = randerCount(startCount, endCount);
                if (arr.indexOf(result) === -1) {
                    arr.push(result);
                }
            }
            return arr;
        }

5.渲染页面

 var arr = randerPage = function (list,childrenElement,bg) {
            for(var j = 0; j < childrenElement.length; j ++) {
                childrenElement[j].className = '';
            }
            for (var i = 0; i < list.length; i ++ ) {
                childrenElement[list[i] - 1].className = bg;
            }
        }

6.自动选择

 var actionCheck = function () {
            var result1 = productionArr(6,1,32);
            var redballTag = redball.children;
            var result2 = productionArr(1,1,16);
            var blueballTag = blueball.children;
            randerPage(result1,redballTag,'red');
            randerPage(result2,blueballTag,'blue');
        }
        var timer = null;
        //开始//
        action.onclick= function () {
            if(!timer) {
                timer = setInterval(actionCheck,20);
            }
        }
        //停止//
        stop.onclick = function() {
            clearInterval(timer);
            timer = null;
        }