js方法写双色球

时倾172

已于 2023-04-26 14:04:27 修改

阅读量790

点赞数

文章标签： javascript css 前端

于 2023-04-25 09:56:40 首次发布

本文链接：https://blog.csdn.net/weixin_62751076/article/details/130358241

版权

JS中写双色球：

双色球规则：红球随机生成1-33 需去重蓝球 1-16 可以和红球重复

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li {
            list-style: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid red;
            float: left;
            margin-left: 10px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }

        .last {
            border-color: skyblue;
        }
    </style>
</head>

<body>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li class="last">7</li>

    <script>
        /* 
        红球 随机生成1-33 需去重   蓝球 1-16 可以和红球重复
        */
        var lis = document.querySelectorAll("li");
        var arr = [];
        

        // 随机数函数
        function random(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        // 生成红球
        // for 会限制循环次数
        go()
        function go() {
            // 存放数值
            var newArr = [];
            do {
                var res = random(1, 33);
                // 去重
                if (newArr.indexOf(res) == -1) {
                    newArr.push(res)
                }
            } while (newArr.length < 6)
            // 蓝球
            newArr.push(random(1, 16))

            // 遍历数组渲染页面
            for (var i = 0; i < lis.length; i++) {
                lis[i].innerHTML = newArr[i] < 10 ? "0" + newArr[i] : newArr[i];
            }
        }

        // 定时器
        var timer = setInterval(go, 50);

        // 自动停止
        setTimeout(function () {
            clearInterval(timer)
        }, 5000)




    </script>
</body>

</html>