美文网首页
JavaScript实现简单的双色球(实例讲解)

JavaScript实现简单的双色球(实例讲解)

作者: HappyforSuzy | 来源:发表于2018-08-28 20:08 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>双色球</title>
        <link rel="stylesheet" type="text/css" href="css/twoToneClass.css">
    </head>
        <script type="text/javascript">
            function getway(){
            //定义一个数组 用来装红色球的随机数
                var reds=[parseInt(Math.random()*33+1)];  //1-33的随机数
    
                    //PS: 在Angularjs中的写法。 
                    $scope.random=Math.floor(Math.random()*10+1);
    
                //定义一个数组 用来装蓝色球的随机数
                var blues=[parseInt(Math.random()*16+1)];  //1-16的随机数
    
                while(reds.length<6){   //双色球是6红1蓝,故长度小于6  说明会循环5次  因为前面reds已经有一次的默认值
                    var r=parseInt(Math.random()*33+1);  //定义r  随机数的取值与reds一致  用于与reds作比较
                    for (var i = 0; i < reds.length; i++) {
                        if (reds[i]==r) {       //若 reds中的随机值与r中的相等,则跳出,继续i++取值
                            break;                //若reds中的随机值与r中的不相等,则进入else if
                        } else if(i==reds.length-1){  //reds.length-1 --> 原先的reds.length为5,减1为4,而数组是从0 开始算,所以这里会循环5次,刚好与 reds.length<6 同步;且 i等于reds.length-1,是让随机数循环5次(另外就是让它找到定义中的最后一位数)
                            reds.push(r);               //将r中的值添加到reds中    push():向数组中添加元素
    //值得注意是!r与reds作比较时,是以reds中现有的数作比较,因为 reds.push(r); 这句代码已经向reds中添加了数值,所以r不是以reds中自身产生的随机数作比较,而是原先r添加到reds中的值作比较
                        }
                    }
                }
                //document.write(reds);
                //排序
                reds.sort(function compare(a,b) {
                    return a-b;
                })
                //打印随机数
                for (var h = 0; h < reds.length; h++) {
                    document.getElementById('tone'+h+'').innerHTML=reds[h];
                }
                 document.getElementById('tone6').innerHTML=blues;
            }
            
        </script>
    <body>
        <div id="tone0"></div>
        <div id="tone1"></div>
        <div id="tone2"></div>
        <div id="tone3"></div>
        <div id="tone4"></div>
        <div id="tone5"></div>
        <div id="tone6"></div>
        <button type="button" id="cilckMe" onclick="getway()">点我生成双色球</button>
    </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:JavaScript实现简单的双色球(实例讲解)

          本文链接:https://www.haomeiwen.com/subject/vzaqwftx.html