首页手记【学习分享】京东双色球实现原理

【学习分享】京东双色球实现原理

标签：

Html/CSS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="tips" content="为了以后方便，把常用的小效果制作整理，如有问题或者更好的方法，请告知！谢谢！！！！">
<meta name="author" content="QQ邮箱：30860662@qq.com">
<title>京东双色球</title>
<style>
*{padding:0;margin:0;}
.clearfix:after{clear:both;content:'';display:block;}
.clearfix{zoom:1;}
ol{list-style:none;}
ol li{float:left;width:30px;height:30px;margin-right:8px;margin-bottom:8px;line-height:30px;text-align:center;border:1px solid #ccc;background:#fff;border-radius:15px;cursor:pointer;}
.on{border:1px solid #e3393c;background:#e3393c;color:#fff;}
.box{width:450px;height:262px;margin:0 auto;margin-top:50px;background:#fceaea;padding:10px 0 10px 20px;}
.tit{ font-size: 14px; font-weight: bold;padding-bottom: 20px;padding-left: 0;padding-right: 0;padding-top: 10px;}
.tit h3 { display: inline;color:#e3393c;}
input{float:right;width:70px;height:30px;background:#e3393c;color:#fff;border:0;cursor:pointer;margin-right:50px;margin-top:20px;}
</style>
<script>

    //定义一个随机数
    function rnd(n,m)
    {
        return parseInt(n+Math.random()*(m-n));
    }
    //在数组里查找某个数
    function findInArr(arr,iNum)
    {
        for(var i=0;i<arr.length;i++)
        {
            if(arr[i]==iNum)
            {
                return true;
            }
        }
        return false;
    }
window.onload=function()
{
    var oBox=document.getElementById('box');
    var oLi=oBox.getElementsByTagName('li');
    var oBtn=oBox.getElementsByTagName('input')[0];
    var timer=null;
    oBtn.onclick=lottery;
    lottery();
    function lottery()
    {
        clearInterval(timer);
        timer=setInterval(function()
        {
            var arr=[];
            while(arr.length<6)
            {
                var num=rnd(1,34);
                if(!findInArr(arr,num))
                {
                    arr.push(num);
                }
            }
            //清除每个按钮的样式
            for(var j=0;j<oLi.length;j++)
            {
                oLi[j].className='';
            }
            //给选中的每个按钮加样式
            for(var i=0;i<6;i++)
            {
                var vs=arr[i];//字符的值与li的所在位数值是一样的。
                oLi[vs-1].className='on';//搜索出数字33，但是下标没有33，所以得是索引-1；
            }
        },50);
        //关掉setInterval
        setTimeout(function()
        {
            clearInterval(timer);
        },500);
    }
};

</script>
</head>

<body>
<div id="box" class="box">
    <div class="tit">
           <h3 class="caipiaoRed">红球区：</h3>
        <span>（至少选择6个号码，最多16个号码）</span>
    </div>
    <ol class="clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
    </ol>
    <input type="button" value="机选红球"/>
</div>
</body>
</html>

点击查看更多内容