HTML/CSS/JavaScript 解法, 执行用时: 1436ms, 内存消耗: 86752KB, 提交时间: 2021-07-09

{"css":".main .balls {\n    width: 450px;\n    padding: 30px 10px 10px;\n    margin-bottom: 20px;\n    position: relative;\n    border-radius: 4px;\n}\n\n.main .balls:after {\n    content: '\\20';\n    clear: both;\n    display: block;\n    height: 0;\n    overflow: hidden;\n}\n\n.main .balls span {\n    position: absolute;\n    left: 12px;\n    top: 5px;\n    font-size: 13px;\n}\n\n.main b {\n    float: left;\n    width: 30px;\n    height: 30px;\n    font-size: 15px;\n    background: #FFF;\n    border: 1px solid;\n    border-radius: 50%;\n    line-height: 30px;\n    text-align: center;\n    margin-right: 8px;\n    margin-bottom: 8px;\n    cursor: pointer;\n}\n\n.main .red .active {\n    background: #f56c6c;\n    color: #FFF;\n}\n\n.main .blue .active {\n    background: #3a8ee6;\n    color: #FFF;\n}\n\n.main .red {\n    background: #feeff0;\n}\n\n.main .red b {\n    border-color: #f56c6c;\n}\n\n.main .blue {\n    background: #ecf8ff;\n}\n\n.main .blue b {\n    border-color: #3a8ee6;\n}","js":"function randomFn() {\n\n    return selectBall('red', 6) + '|' + selectBall('blue', 1);\n}\nfunction selectBall(color, n) {\n    var wrap = document.querySelector('.' + color + ' .balls-wp');\n    var balls = wrap.getElementsByTagName('b');\n    for (var i = 0; i < n; i++) {\n        balls[i].classList.remove('active');\n    }\n    var choosed=[];\n    for(var i=0; i < n; i++){\n        var index = Math.floor(Math.random() * balls.length);\n        choosed. push(balls [index]) ;\n        balls[index].classList.add('active') ;\n        balls[index].remove() ;\n    }\n    choosed.sort( function(a, b) {\n        return a.textContent - b.textContent;\n    });\n    for (var i = n - 1; i >= 0; --i){\n        wrap.insertBefore(choosed[i], balls[0]) ;\n    }\n\n    return choosed.map( function(val) {\n        return val.textContent ;\n    }).join(',');\n}\n\n\n","html":"<div class=\"main\">\n    <div class=\"balls red\">\n        <span>红球</span>\n        <div class=\"balls-wp\">\n            <b>01</b>\n            <b>02</b>\n            <b>03</b>\n            <b>04</b>\n            <b>05</b>\n            <b>06</b>\n            <b>07</b>\n            <b>08</b>\n            <b>09</b>\n            <b>10</b>\n            <b>11</b>\n            <b>12</b>\n            <b>13</b>\n            <b>14</b>\n            <b>15</b>\n            <b>16</b>\n            <b>17</b>\n            <b>18</b>\n            <b>19</b>\n            <b>20</b>\n            <b>21</b>\n            <b>22</b>\n            <b>23</b>\n            <b>24</b>\n            <b>25</b>\n            <b>26</b>\n            <b>27</b>\n            <b>28</b>\n            <b>29</b>\n            <b>30</b>\n            <b>31</b>\n            <b>32</b>\n            <b>33</b>\n        </div>\n    </div>\n    <div class=\"balls blue\">\n        <span>蓝球</span>\n        <div class=\"balls-wp\">\n            <b>01</b>\n            <b>02</b>\n            <b>03</b>\n            <b>04</b>\n            <b>05</b>\n            <b>06</b>\n            <b>07</b>\n            <b>08</b>\n            <b>09</b>\n            <b>10</b>\n            <b>11</b>\n            <b>12</b>\n            <b>13</b>\n            <b>14</b>\n            <b>15</b>\n            <b>16</b>\n        </div>\n    </div>\n</div>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1454ms, 内存消耗: 87664KB, 提交时间: 2021-07-07

{"css":".main .balls {\n    width: 450px;\n    padding: 30px 10px 10px;\n    margin-bottom: 20px;\n    position: relative;\n    border-radius: 4px;\n}\n\n.main .balls:after {\n    content: '\\20';\n    clear: both;\n    display: block;\n    height: 0;\n    overflow: hidden;\n}\n\n.main .balls span {\n    position: absolute;\n    left: 12px;\n    top: 5px;\n    font-size: 13px;\n}\n\n.main b {\n    float: left;\n    width: 30px;\n    height: 30px;\n    font-size: 15px;\n    background: #FFF;\n    border: 1px solid;\n    border-radius: 50%;\n    line-height: 30px;\n    text-align: center;\n    margin-right: 8px;\n    margin-bottom: 8px;\n    cursor: pointer;\n}\n\n.main .red .active {\n    background: #f56c6c;\n    color: #FFF;\n}\n\n.main .blue .active {\n    background: #3a8ee6;\n    color: #FFF;\n}\n\n.main .red {\n    background: #feeff0;\n}\n\n.main .red b {\n    border-color: #f56c6c;\n}\n\n.main .blue {\n    background: #ecf8ff;\n}\n\n.main .blue b {\n    border-color: #3a8ee6;\n}","js":"randomFn();\n \nfunction randomFn() {\n    let red=document.querySelector('.red .balls-wp');\n    let hongqiu=red.getElementsByTagName('b');\n    let blue=document.querySelector('.blue .balls-wp');\n    let lanqiu=blue.getElementsByTagName('b');\n    let a=selectboll(red,hongqiu,6,33);\n    let b=selectboll(blue,lanqiu,1,16);\n    return a+'|'+b\n}\n \nfunction selectboll(zong,qiu,sel,alllength){\n    let boll=[];\n    for(let i=0; i<sel; i++){\n        let index=Math.floor(Math.random()*(alllength-i));\n        boll.push({\n            node:qiu[index],\n            value:qiu[index].innerHTML\n        })\n        zong.removeChild(qiu[index])\n    }\n   boll.sort((a,b)=>{\n       return a.value-b.value\n}).map((item)=>{\n       item.node.classList.add('active')\n   })\n    for(let i=sel-1; i>=0; i--){\n        zong.insertBefore(boll[i].node,zong.firstChild)\n    }\n    return boll.map(item=>{\n        return item.value\n    }).join(',')\n     \n     \n}","html":"<div class=\"main\">\n    <div class=\"balls red\">\n        <span>红球</span>\n        <div class=\"balls-wp\">\n            <b>01</b>\n            <b>02</b>\n            <b>03</b>\n            <b>04</b>\n            <b>05</b>\n            <b>06</b>\n            <b>07</b>\n            <b>08</b>\n            <b>09</b>\n            <b>10</b>\n            <b>11</b>\n            <b>12</b>\n            <b>13</b>\n            <b>14</b>\n            <b>15</b>\n            <b>16</b>\n            <b>17</b>\n            <b>18</b>\n            <b>19</b>\n            <b>20</b>\n            <b>21</b>\n            <b>22</b>\n            <b>23</b>\n            <b>24</b>\n            <b>25</b>\n            <b>26</b>\n            <b>27</b>\n            <b>28</b>\n            <b>29</b>\n            <b>30</b>\n            <b>31</b>\n            <b>32</b>\n            <b>33</b>\n        </div>\n    </div>\n    <div class=\"balls blue\">\n        <span>蓝球</span>\n        <div class=\"balls-wp\">\n            <b>01</b>\n            <b>02</b>\n            <b>03</b>\n            <b>04</b>\n            <b>05</b>\n            <b>06</b>\n            <b>07</b>\n            <b>08</b>\n            <b>09</b>\n            <b>10</b>\n            <b>11</b>\n            <b>12</b>\n            <b>13</b>\n            <b>14</b>\n            <b>15</b>\n            <b>16</b>\n        </div>\n    </div>\n</div>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1463ms, 内存消耗: 88896KB, 提交时间: 2021-07-12

{"css":".main .balls {\n    width: 450px;\n    padding: 30px 10px 10px;\n    margin-bottom: 20px;\n    position: relative;\n    border-radius: 4px;\n}\n\n.main .balls:after {\n    content: '\\20';\n    clear: both;\n    display: block;\n    height: 0;\n    overflow: hidden;\n}\n\n.main .balls span {\n    position: absolute;\n    left: 12px;\n    top: 5px;\n    font-size: 13px;\n}\n\n.main b {\n    float: left;\n    width: 30px;\n    height: 30px;\n    font-size: 15px;\n    background: #FFF;\n    border: 1px solid;\n    border-radius: 50%;\n    line-height: 30px;\n    text-align: center;\n    margin-right: 8px;\n    margin-bottom: 8px;\n    cursor: pointer;\n}\n\n.main .red .active {\n    background: #f56c6c;\n    color: #FFF;\n}\n\n.main .blue .active {\n    background: #3a8ee6;\n    color: #FFF;\n}\n\n.main .red {\n    background: #feeff0;\n}\n\n.main .red b {\n    border-color: #f56c6c;\n}\n\n.main .blue {\n    background: #ecf8ff;\n}\n\n.main .blue b {\n    border-color: #3a8ee6;\n}","js":"randomFn();\n\nfunction randomFn() {\n    var activeRed = [];\n    var num1;\n    while (activeRed.length < 6) {\n        num1 = Math.floor(33 * Math.random() + 1);\n        if (num1 <= 9 && activeRed.indexOf(\"0\" + num1) == -1) {\n            activeRed.push(\"0\" + num1);\n        };\n        if (num1 > 9 && activeRed.indexOf(\"\" + num1) == -1) {\n            activeRed.push(\"\" + num1);\n        };\n    };\n    activeRed.sort();\n\n    var otherRed = [];\n    for (var i = 1; i <= 33; i++) {\n        if (i <= 9 && activeRed.indexOf(\"0\" + i) == -1) {\n            otherRed.push(\"0\" + i);\n        };\n        if (i > 9 && activeRed.indexOf(\"\" + i) == -1) {\n            otherRed.push(\"\" + i);\n        };\n    }\n\n    var num2 = Math.floor(16 * Math.random() + 1);\n    activeBlue = num2 > 9 ? \"\" + num2 : \"0\" + num2;\n    var otherBlue = [];\n    for (var i = 1; i <= 16; i++) {\n        if ((i > 9 ? \"\" + i : \"0\" + i) != activeBlue) {\n            otherBlue.push(i > 9 ? \"\" + i : \"0\" + i);\n        }\n    }\n\n    var red = document.getElementsByClassName(\"balls-wp\")[0].children;\n    var blue = document.getElementsByClassName(\"balls-wp\")[1].children;\n\n    for (var m = 0; m < 33; m++) {\n        if (m < 6) {\n            red[m].innerText = activeRed[m];\n            red[m].classList.add(\"active\");\n        } else {\n            red[m].innerText = otherRed[m - 6];\n        }\n    }\n\n    for (var n = 0; n < 16; n++) {\n        if (n == 0) {\n            blue[0].innerText = activeBlue;\n            blue[0].classList.add(\"active\");\n        } else {\n            blue[n].innerText = otherBlue[n - 1];\n        }\n    }\n\n    return activeRed.join(\",\") + \"|\" + activeBlue;\n}","html":"<div class=\"main\">\n    <div class=\"balls red\">\n        <span>红球</span>\n        <div class=\"balls-wp\">\n            <b>01</b>\n            <b>02</b>\n            <b>03</b>\n            <b>04</b>\n            <b>05</b>\n            <b>06</b>\n            <b>07</b>\n            <b>08</b>\n            <b>09</b>\n            <b>10</b>\n            <b>11</b>\n            <b>12</b>\n            <b>13</b>\n            <b>14</b>\n            <b>15</b>\n            <b>16</b>\n            <b>17</b>\n            <b>18</b>\n            <b>19</b>\n            <b>20</b>\n            <b>21</b>\n            <b>22</b>\n            <b>23</b>\n            <b>24</b>\n            <b>25</b>\n            <b>26</b>\n            <b>27</b>\n            <b>28</b>\n            <b>29</b>\n            <b>30</b>\n            <b>31</b>\n            <b>32</b>\n            <b>33</b>\n        </div>\n    </div>\n    <div class=\"balls blue\">\n        <span>蓝球</span>\n        <div class=\"balls-wp\">\n            <b>01</b>\n            <b>02</b>\n            <b>03</b>\n            <b>04</b>\n            <b>05</b>\n            <b>06</b>\n            <b>07</b>\n            <b>08</b>\n            <b>09</b>\n            <b>10</b>\n            <b>11</b>\n            <b>12</b>\n            <b>13</b>\n            <b>14</b>\n            <b>15</b>\n            <b>16</b>\n        </div>\n    </div>\n</div>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1465ms, 内存消耗: 87728KB, 提交时间: 2021-07-01

{"css":".main .balls {\n    width: 450px;\n    padding: 30px 10px 10px;\n    margin-bottom: 20px;\n    position: relative;\n    border-radius: 4px;\n}\n\n.main .balls:after {\n    content: '\\20';\n    clear: both;\n    display: block;\n    height: 0;\n    overflow: hidden;\n}\n\n.main .balls span {\n    position: absolute;\n    left: 12px;\n    top: 5px;\n    font-size: 13px;\n}\n\n.main b {\n    float: left;\n    width: 30px;\n    height: 30px;\n    font-size: 15px;\n    background: #FFF;\n    border: 1px solid;\n    border-radius: 50%;\n    line-height: 30px;\n    text-align: center;\n    margin-right: 8px;\n    margin-bottom: 8px;\n    cursor: pointer;\n}\n\n.main .red .active {\n    background: #f56c6c;\n    color: #FFF;\n}\n\n.main .blue .active {\n    background: #3a8ee6;\n    color: #FFF;\n}\n\n.main .red {\n    background: #feeff0;\n}\n\n.main .red b {\n    border-color: #f56c6c;\n}\n\n.main .blue {\n    background: #ecf8ff;\n}\n\n.main .blue b {\n    border-color: #3a8ee6;\n}","js":"randomFn();\n\nfunction randomFn() {\n    let red=document.querySelector('.red .balls-wp');\n    let hongqiu=red.getElementsByTagName('b');\n    let blue=document.querySelector('.blue .balls-wp');\n    let lanqiu=blue.getElementsByTagName('b');\n    let a=selectboll(red,hongqiu,6,33);\n    let b=selectboll(blue,lanqiu,1,16);\n    return a+'|'+b\n}\n\nfunction selectboll(zong,qiu,sel,alllength){\n    let boll=[];\n    for(let i=0; i<sel; i++){\n        let index=Math.floor(Math.random()*(alllength-i));\n        boll.push({\n            node:qiu[index],\n            value:qiu[index].innerHTML\n        })\n        zong.removeChild(qiu[index])\n    }\n   boll.sort((a,b)=>{\n       return a.value-b.value\n}).map((item)=>{\n       item.node.classList.add('active')\n   })\n    for(let i=sel-1; i>=0; i--){\n        zong.insertBefore(boll[i].node,zong.firstChild)\n    }\n    return boll.map(item=>{\n        return item.value\n    }).join(',')\n    \n    \n}","html":"<div class=\"main\">\n    <div class=\"balls red\">\n        <span>红球</span>\n        <div class=\"balls-wp\">\n            <b>01</b>\n            <b>02</b>\n            <b>03</b>\n            <b>04</b>\n            <b>05</b>\n            <b>06</b>\n            <b>07</b>\n            <b>08</b>\n            <b>09</b>\n            <b>10</b>\n            <b>11</b>\n            <b>12</b>\n            <b>13</b>\n            <b>14</b>\n            <b>15</b>\n            <b>16</b>\n            <b>17</b>\n            <b>18</b>\n            <b>19</b>\n            <b>20</b>\n            <b>21</b>\n            <b>22</b>\n            <b>23</b>\n            <b>24</b>\n            <b>25</b>\n            <b>26</b>\n            <b>27</b>\n            <b>28</b>\n            <b>29</b>\n            <b>30</b>\n            <b>31</b>\n            <b>32</b>\n            <b>33</b>\n        </div>\n    </div>\n    <div class=\"balls blue\">\n        <span>蓝球</span>\n        <div class=\"balls-wp\">\n            <b>01</b>\n            <b>02</b>\n            <b>03</b>\n            <b>04</b>\n            <b>05</b>\n            <b>06</b>\n            <b>07</b>\n            <b>08</b>\n            <b>09</b>\n            <b>10</b>\n            <b>11</b>\n            <b>12</b>\n            <b>13</b>\n            <b>14</b>\n            <b>15</b>\n            <b>16</b>\n        </div>\n    </div>\n</div>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1466ms, 内存消耗: 87460KB, 提交时间: 2021-06-22

{"css":".main .balls {\n    width: 450px;\n    padding: 30px 10px 10px;\n    margin-bottom: 20px;\n    position: relative;\n    border-radius: 4px;\n}\n\n.main .balls:after {\n    content: '\\20';\n    clear: both;\n    display: block;\n    height: 0;\n    overflow: hidden;\n}\n\n.main .balls span {\n    position: absolute;\n    left: 12px;\n    top: 5px;\n    font-size: 13px;\n}\n\n.main b {\n    float: left;\n    width: 30px;\n    height: 30px;\n    font-size: 15px;\n    background: #FFF;\n    border: 1px solid;\n    border-radius: 50%;\n    line-height: 30px;\n    text-align: center;\n    margin-right: 8px;\n    margin-bottom: 8px;\n    cursor: pointer;\n}\n\n.main .red .active {\n    background: #f56c6c;\n    color: #FFF;\n}\n\n.main .blue .active {\n    background: #3a8ee6;\n    color: #FFF;\n}\n\n.main .red {\n    background: #feeff0;\n}\n\n.main .red b {\n    border-color: #f56c6c;\n}\n\n.main .blue {\n    background: #ecf8ff;\n}\n\n.main .blue b {\n    border-color: #3a8ee6;\n}","js":"randomFn();\n\nfunction randomFn() {\n    var oRedWrap = document.querySelector('.red .balls-wp')\n    var oRedp = oRedWrap.getElementsByTagName('b')\n    var oBlueWrap = document.querySelector('.blue .balls-wp')\n    var oBluep = oBlueWrap.getElementsByTagName('b')\n    var redText = selectBoll(oRedWrap,oRedp,6,33)\n    var blueText = selectBoll(oBlueWrap,oBluep,1,16)\n    console.log(redText+'|'+blueText)\n    return redText+'|'+blueText\n}\n\nfunction selectBoll(oWrap,oP,length,allLength){\n    var boll = []\n    for(var i=0;i<length;i++){\n        var index = Math.floor(Math.random() * (allLength - i))\n        boll.push({\n            node:oP[index],\n            value:oP[index].innerHTML\n        })\n        oWrap.removeChild(oP[index])\n\n    }\n    boll.sort((a,b) => {\n        return a.value - b.value\n    }).map(item => {\n        item.node.classList.add('active')\n    })\n    for(var i = length - 1;i>=0;i--){\n        oWrap.insertBefore(boll[i].node,oWrap.firstChild);\n    }\n    return boll.map(item=>{\n        return item.value\n    }).join(',')\n}","html":"<div class=\"main\">\n    <div class=\"balls red\">\n        <span>红球</span>\n        <div class=\"balls-wp\">\n            <b>01</b>\n            <b>02</b>\n            <b>03</b>\n            <b>04</b>\n            <b>05</b>\n            <b>06</b>\n            <b>07</b>\n            <b>08</b>\n            <b>09</b>\n            <b>10</b>\n            <b>11</b>\n            <b>12</b>\n            <b>13</b>\n            <b>14</b>\n            <b>15</b>\n            <b>16</b>\n            <b>17</b>\n            <b>18</b>\n            <b>19</b>\n            <b>20</b>\n            <b>21</b>\n            <b>22</b>\n            <b>23</b>\n            <b>24</b>\n            <b>25</b>\n            <b>26</b>\n            <b>27</b>\n            <b>28</b>\n            <b>29</b>\n            <b>30</b>\n            <b>31</b>\n            <b>32</b>\n            <b>33</b>\n        </div>\n    </div>\n    <div class=\"balls blue\">\n        <span>蓝球</span>\n        <div class=\"balls-wp\">\n            <b>01</b>\n            <b>02</b>\n            <b>03</b>\n            <b>04</b>\n            <b>05</b>\n            <b>06</b>\n            <b>07</b>\n            <b>08</b>\n            <b>09</b>\n            <b>10</b>\n            <b>11</b>\n            <b>12</b>\n            <b>13</b>\n            <b>14</b>\n            <b>15</b>\n            <b>16</b>\n        </div>\n    </div>\n</div>","libs":[]}