随机选择双色球彩票

天使的同类

于 2022-03-31 16:14:46 发布

阅读量322

点赞数 1

分类专栏： CSS html 文章标签： js jquery

本文链接：https://blog.csdn.net/Summer_JK/article/details/123875662

版权

html 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

随机选择双色球彩票

彩票中不中无所谓，开心最重要了，反正我是没中过大于十块钱的彩票，哈哈哈哈

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main .balls {
            width: 450px;
            padding: 30px 10px 10px;
            margin-bottom: 20px;
            position: relative;
            border-radius: 4px;
        }

        .main .balls:after {
            content: '\20';
            clear: both;
            display: block;
            height: 0;
            overflow: hidden;
        }

        .main .balls span {
            position: absolute;
            left: 12px;
            top: 5px;
            font-size: 13px;
        }

        .main b {
            float: left;
            width: 30px;
            height: 30px;
            font-size: 15px;
            background: #FFF;
            border: 1px solid;
            border-radius: 50%;
            line-height: 30px;
            text-align: center;
            margin-right: 8px;
            margin-bottom: 8px;
            cursor: pointer;
        }

        .main .red .active {
            background: #f56c6c;
            color: #FFF;
        }

        .main .blue .active {
            background: #3a8ee6;
            color: #FFF;
        }

        .main .red {
            background: #feeff0;
        }

        .main .red b {
            border-color: #f56c6c;
        }

        .main .blue {
            background: #ecf8ff;
        }

        .main .blue b {
            border-color: #3a8ee6;
        }

        button {
            width: 80px;
            height: 35px;
            line-height: 35px;
            border-radius: 4px;
            color: rgb(255, 255, 255);
            border: none;
            background-color: rgb(68, 113, 244);
            outline: none;
            cursor: pointer;
        }

        button:last-child {
            background-color: transparent;
            color: #000;
            border: 1px solid gray;
        }

        .chooseResult,
        .chooseNumBox {
            margin-top: 20px;
        }

        .chooseNum {
            margin: 0 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            font-size: 15px;
            border: 1px solid;
            border-radius: 50%;
            line-height: 30px;
            text-align: center;
            color: #fff;
            background-color: #f56c6c;
        }

        .chooseNum:last-child {
            background-color: #3a8ee6;
        }
    </style>
</head>

<body>
    <div class="main">
        <h3 style="color: lightseagreen;">中它一个亿，然后环游世界！！！</h3>
        <div class="balls red">
            <span>红球</span>
            <div class="balls-wp">
                <b>01</b>
                <b>02</b>
                <b>03</b>
                <b>04</b>
                <b>05</b>
                <b>06</b>
                <b>07</b>
                <b>08</b>
                <b>09</b>
                <b>10</b>
                <b>11</b>
                <b>12</b>
                <b>13</b>
                <b>14</b>
                <b>15</b>
                <b>16</b>
                <b>17</b>
                <b>18</b>
                <b>19</b>
                <b>20</b>
                <b>21</b>
                <b>22</b>
                <b>23</b>
                <b>24</b>
                <b>25</b>
                <b>26</b>
                <b>27</b>
                <b>28</b>
                <b>29</b>
                <b>30</b>
                <b>31</b>
                <b>32</b>
                <b>33</b>
            </div>
        </div>
        <div class="balls blue">
            <span>蓝球</span>
            <div class="balls-wp">
                <b>01</b>
                <b>02</b>
                <b>03</b>
                <b>04</b>
                <b>05</b>
                <b>06</b>
                <b>07</b>
                <b>08</b>
                <b>09</b>
                <b>10</b>
                <b>11</b>
                <b>12</b>
                <b>13</b>
                <b>14</b>
                <b>15</b>
                <b>16</b>
            </div>
        </div>
        <div>
            <button onclick="reflash()">刷新</button>
            <button onclick="reset()">重置</button>
        </div>
        <div class="chooseResult">您随机选择的双色球彩票号码是：<div class="chooseNumBox"></div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        function randomFn() {
            return selectBall('red', 6) + '|' + selectBall('blue', 1);
        }
        function selectBall(color, n) {
            var wrap = document.querySelector('.' + color + ' .balls-wp');
            var balls = wrap.getElementsByTagName('b');
            // 重置高亮
            for (var i = 0; i < n; i++) {
                balls[i].classList.remove('active');
            }
            // 随机生成
            var choosed = [];
            for (var i = 0; i < n; i++) {
                var index = Math.floor(Math.random() * balls.length);
                choosed.push(balls[index]);
                balls[index].classList.add('active');
                balls[index].remove();
            }
            choosed.sort(function (a, b) {
                return a.textContent - b.textContent;
            });
            for (var i = n - 1; i >= 0; --i) {
                wrap.insertBefore(choosed[i], balls[0]);
            }
            // 返回拼接文字
            var chooseNum = []
            choosed.forEach(item => {
                $(".chooseNumBox").append('<span class="chooseNum">' + item.textContent + '</span>')
            })
            return choosed.map(function (val) {
                return val.textContent;
            }).join(',');

        }
        randomFn()

        // 刷新
        function reflash() {
            $('.chooseNumBox').html("");
            randomFn()
        }
        // 重置排序
        function reset() {
            location.reload();
        }
    </script>
</body>

</html>

效果图：
在这里插入图片描述

天使的同类

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
随机选择双色球彩票

随机选择双色球彩票彩票中不中无所谓，开心最重要了，反正我是没中过大于十块钱的彩票，哈哈哈哈<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi
复制链接

扫一扫

专栏目录