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

动态展示.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()

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

最后编辑于：2019.06.05 14:04:22

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

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