双色球 揭秘幸运号背后的故事

动态展示.gif

Tips：
双色球是中国福利彩票的一种玩法。双色球投注区分为红色球号码区和蓝色球号码区，红色球号码区由1-33共三十三个号码组成，蓝色球号码区由1-16共十六个号码组成。投注时选择6个红色球号码和1个蓝色球号码组成一注进行单式投注。

划重点：
总共7个球组成 6个红球 1 个蓝球
红色球数值范围：1-33；
蓝色球数值范围：1-16；

css样式：

 * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
.clearfix:after {
        display: block;
        content: '';
        width: 0;
        height: 0;
        clear: both;
    }

    clearfix {
        zoom: 1;
    }
 .ball-container>li {
        float: left;
        width: 60px;
        height: 60px;
        margin-right: 20px;
        line-height: 60px;
        text-align: center;
        border: 1px solid #000;
        border-radius: 50%;
    }

一口气写这么多代码有点累 缓缓继续···

    .ball-container>.red {
        border: 1px solid red;
        color: red;
    }

    .ball-container>.blue {
        border: 1px solid blue;
        color: blue;
    }
    .start, .end {
        cursor: pointer;
    }

我比较喜欢使用ul，li来做这类案例 当然其他盒子也是可以的

<!-- 7个球 -->
    <ul class="ball-container clearfix" id="ball-container">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
  </ul>

    <!-- 两个按钮 -->
    <div class="button">
        <span class="start" id="start">开始</span>
        <span class="end" id="end">结束</span>
  </div>

获取元素

<script>
        var lis =  byID('ball-container').children;
        var start = byID('start');
        var end = byID('end');
        var timer =  null; //设置装定时器的变量
        console.log(lis); //这里可以打印查看元素是否都获取到了
       //封装找ID名
        function byID(id) {
            return document.getElementById(id);
        }

因为是随机抽取数值所以先把随机函数写好 以便调用

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

实现步骤：
敲黑板!!! 接下来就是重点取红色球与蓝色球了

c.gif

1，首先给两个空数组盛放经过加工后的红色球与蓝色球
*****怎么判断球取好了呢 不要捉急咱们慢慢来

当红色球数组长度小于6时 执行随机函数将取出的球放在一个新的变量temp里 此时已取出6个红色球

****要注意的是此时取出的6个球可能会有重复的 所以还需要做一步去重的工作

a.gif

2，通过indexOf判断 如果在红色盒子里没有出现过随机出来的数字 此时再 将数字放进盛放红色球的数组 这样红色球就取好了

3，蓝色球只有一个 所以直接通过随机函数取出放进蓝色球数组就好了

4，最后一步将红、蓝两个数组拼接起来简单的双色球就搞定大半了

function balls() {
            var blue;
            var red = [];
            while(red.length < 6) {
                var temp = random(1,33); //取出红色球
                if(red.indexOf(temp) === -1) {  //下标为-1则表明之前没有出现过
                    red.push(temp);  //将去重后的随机数放进数组
                }
            }
            var blue = random(1,16);  //随机取出蓝色球
            return red.concat(blue);  //将红色球与蓝色球数组拼接
        }

此时还只能在控制台看到随机取出的数组 所以下一步就需要将取出的数值写入html
为了便于区分 通过添加类名的方式给盒子添加红色或颜色

 function update() {
            for (var i = 0, len = lis.length; i < len ; i++) {
                var newarr = balls();
                lis[i].innerHTML = newarr[i];
                lis[i].className =  i === 6 ?  'blue' : 'red';
               //三目运算法判断如果i为6则为蓝色球  反之为红色球
            }
        }  

此时简单的双色球已经搞定了 通过不断刷新就可以得到随机数
接下来就是让它自己动起来
添加定时器并且给两个按钮绑定事件，在点击开始或结束按钮时执行相应动作

            start.onclick = function() {
                if(timer) {   //判断如果有定时器则return
                    return;
                }
              timer = setInterval(function() {
                update()
              },200)
            }
            end.onclick = function() {
                clearInterval(timer);  //清除定时器
                timer = null; //将定时器置空
            }
        }
        addEvent()

今天的分享就到这里啦，如有错误欢迎不吝指出。