javaScript实现双色球

双色球咋玩的：
　　“双色球”彩票投注区分为红色球号码区和蓝色球号码区。每注投注号码由6个红色球号码和1个蓝色球号码组成。

红色球号码从1--33中选择；蓝色球号码从1--16中选择。

有啥要求：
1、彩票号码随机输出，且无重复数字

2、不足两位的号码第一位补0

以下为实现代码：
html代码：

    <div class="box">
        红球：
        <div class="redbull"></div> 
        蓝球：
        <div class="bluebull"></div>
        <div class="but">
            <button type="button" id="start">开始</button> //创建开始按钮
            <button type="button" id="stop">停止</button> //创建停止按钮
        </div>
    </div>

css样式：

       span {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #333;
            border-radius: 100%;
        }

        .red {
            background: red;
            color: #fff;
        }

        .blue {
            background: blue;
            color: #fff;
        }
        button {
            width: 100px;
            height: 50px;
            background: deepskyblue;
            border: none;
            outline: none;
            border-radius: 10px;
            font-size: 25px;
        }
        button:hover {
            background: rgb(3, 150, 106);
            color: brown;
        }

js代码：

        var redbull = document.querySelector('.redbull'); //获取class名为redbull的第一个元素
        var bulebull = document.querySelector('.bulebull');//获取class名为redbull的第一个元素
        var action = document.querySelector('#action');//获取id名为redbull的第一个元素
        var stop = document.querySelector('#stop');//获取id名为redbull的第一个元素
        //用于生成红球蓝球的标签函数
        var productionElement = function (count, targetElement) {
            var str = '';
            for (var j = 1; j <= count; j++) {
                str += '<span>' + (j < 10 ? '0' + j : j) + '</span>';
            }
            // 操作dom不要在循环体内进行，非必要时刻只操作一次就可以
            targetElement.innerHTML = str;
        }
        //    调用 productionElement函数生成32个红球元素
        productionElement(32, redbull);
        productionElement(16, bulebull);
        // 获取随机数的函数
        var randomCount = function (start, end) {
            var len = end - start + 1;
            return Math.floor(Math.random() * len + start);
        }

        // 生产数组
        var productionArr = function (count, startCount, endCount) {
            var arr = [];
            while (arr.length < count) {
                var result = randomCount(startCount, endCount);
                if (arr.indexOf(result) === -1) {
                    arr.push(result);
                }
            }
            return arr;
        }

        // 渲染页面
        var renderPage = function (list, childrenElement, bg) {
            for (var i = 0; i < childrenElement.length; i++) {
                childrenElement[i].className = '';
            }
            for (var j = 0; j < list.length; j++) {
                childrenElement[list[j] - 1].className = bg;
            }
        }

        // 自动选择
        var actionCheck = function () {
            var result1 = productionArr(6, 1, 32);
            var redbullTag = redbull.children;
            var result2 = productionArr(1, 1, 16);
            var bulebullTag = bulebull.children;
            renderPage(result1, redbullTag, 'red');
            renderPage(result2, bulebullTag, 'blue');
        }
        //    使用计时器点击开始按钮每200毫秒执行一次随机自动选择
        var timer = null;
        start.onclick = function () {
            if (!timer) {
                timer = setInterval(actionCheck, 200);
            }
        }
        //点击停止按钮关闭定时器!

        stop.onclick = function () {
            clearInterval(timer);
            timer = null;

双色球.JPG