雙色球咋玩的：
　　“雙色球”彩票投注區(qū)分為紅色球號碼區(qū)和藍色球號碼區(qū)。每注投注號碼由6個紅色球號碼和1個藍色球號碼組成。

紅色球號碼從1--33中選擇；藍色球號碼從1--16中選擇。

有啥要求：
1、彩票號碼隨機輸出，且無重復數(shù)字

2、不足兩位的號碼第一位補0

以下為實現(xiàn)代碼：
html代碼：

    <div class="box">
        紅球：
        <div class="redbull"></div> 
        藍球：
        <div class="bluebull"></div>
        <div class="but">
            <button type="button" id="start">開始</button> //創(chuàng)建開始按鈕
            <button type="button" id="stop">停止</button> //創(chuàng)建停止按鈕
        </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的第一個元素
        //用于生成紅球藍球的標簽函數(shù)
        var productionElement = function (count, targetElement) {
            var str = '';
            for (var j = 1; j <= count; j++) {
                str += '<span>' + (j < 10 ? '0' + j : j) + '</span>';
            }
            // 操作dom不要在循環(huán)體內進行，非必要時刻只操作一次就可以
            targetElement.innerHTML = str;
        }
        //    調用 productionElement函數(shù)生成32個紅球元素
        productionElement(32, redbull);
        productionElement(16, bulebull);
        // 獲取隨機數(shù)的函數(shù)
        var randomCount = function (start, end) {
            var len = end - start + 1;
            return Math.floor(Math.random() * len + start);
        }

        // 生產數(shù)組
        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毫秒執(zhí)行一次隨機自動選擇
        var timer = null;
        start.onclick = function () {
            if (!timer) {
                timer = setInterval(actionCheck, 200);
            }
        }
        //點擊停止按鈕關閉定時器!

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

雙色球.JPG