模拟随机双色球

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>彩票模拟</title>
    <style>
        .lottery_wrap{
            width: 850px;
            height: 100px;
            border: 1px solid grey;
            border-radius: 10px;
            margin: 0 auto;
            background: lightgrey;
            position: relative;
        }
        p {
            width: 80px;
            height: 80px;
            margin: 10px;
            background: red;
            display: inline-block;
            text-align: center;
            line-height: 80px;
            border-radius: 50%;
            font-size: 2.5em;
            color: white;
        }
        #p6{
            background: blue;
        }
        h1{
            text-align: center;
        }
        #checkBall{
            position: absolute;
            top: 30px;
            right: 10px;
            border: 1px solid lightblue;
            height: 40px;
            background: red;
            color: white;
            font-size: 1.5em;
            border-radius: 10px;
        }
    </style>
</head>

<body>

<h1>彩票模拟</h1>
<div class="lottery_wrap" id="lotteryWrap">
    <input type="button" name="name" value="随机一注" id="checkBall" />
</div>
<script type="text/javascript">
        var lotteryWarp = document.getElementById('lotteryWrap');
        for ( var i = 0; i<7;i++){
            var p = document.createElement('p');
            lotteryWarp.appendChild(p);
            p.id = 'p' + i;
        }
        function getRandomRedBall() {
            var array = [];  //创建数组用来存放随机生成的数字
            var array1 = [];//创建对比数组用来判断生成的随机数是否重复
            for (var i = 0; i < 6; i++) {
                do { // 用do-while循环首先生成一个随机数
                    var number = Math.floor(Math.random() * 33 + 1); // 随机生成1~33的一个随机数
                } while (array1[number] !== undefined);  // 用对比数组来判断生成的数字是否重复;
                array1[number] = '';
                if (number < 10) { //判断数字如果是个位数则前面添加0
                    number = '0' + number;
                }
                array[i] = number;//将生成的不重复的数字放入数组中
            }
            array.sort(function (a, b) {
                return a - b;
            }) //把生成的数组按小到大排列
            var redBall = document.getElementsByTagName('p');
            for (var i = 0; i < 6; i++) {
                redBall[i].innerHTML = array[i];//将数组中的数字依次放入6个红球中
            }
            return redBall;
        }

        function getRandomBlueBall() {
            var blueBall = document.getElementById('p' + 6);
            var number = Math.floor(Math.random() * 16 + 1);
            if (number < 10) {
                number = '0' + number;
            }
            blueBall.innerHTML = number;
            return blueBall;
        }


        function getRandomBall() {
            getBall = getRandomRedBall() + getRandomBlueBall();
            return getBall;
        }

        getRandomBall(); //得到双色球

        var checkBall = document.getElementById('checkBall');
        var timer = setInterval('getRandomBall()',100);
        isOn = true;
        checkBall.onclick = function() {
            isOn ? clearInterval(timer) : timer = setInterval('getRandomBall()',100);
            isOn = !isOn;
        }
</script>
</body>
</html>

转自:https://www.cnblogs.com/spring-qingfeng/p/5789326.html

posted @ 2021-02-18 09:50  Justin_Xean  阅读(140)  评论(0编辑  收藏  举报
dddedeeded