首页 > 解决方案 > Javascript按钮功能卡住

问题描述

我正在编写一个小宾果游戏,它一直运行良好,直到现在,我已经运行了一个调试器并且没有错误,但是有一半的时间页面没有加载,并且按下重置按钮后 1-2次,页面冻结。(我的代码可能不是最干净的,这仍在进行中)

HTML:

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" text="text/javascript"></script>
        <script src="js/game.js"></script>
        <title>YEET</title>
        <link rel="stylesheet" href="css/game.css" type="text/css">
    </head>
    <body onload="reset()">
        <h1 id="title">BINGO</h1>
        <table id="tblA">
            <tr>
                <th>B</th>
                <th>I</th>
                <th>N</th>
                <th>G</th>
                <th>O</th>
            </tr>
            <tr>
                <td id="B1"></td>
                <td id="I1"></td>
                <td id="N1"></td>
                <td id="G1"></td>
                <td id="O1"></td>
            </tr>
            <tr>
                <td id="B2"></td>
                <td id="I2"></td>
                <td id="N2"></td>
                <td id="G2"></td>
                <td id="O2"></td>
            </tr>
            <tr>
                <td id="B3"></td>
                <td id="I3"></td>
                <td id="N3"></td>
                <td id="G3"></td>
                <td id="O3"></td>
            </tr>
            <tr>
                <td id="B4"></td>
                <td id="I4"></td>
                <td id="N4"></td>
                <td id="G4"></td>
                <td id="O4"></td>
            </tr>
            <tr>
                <td id="B5"></td>
                <td id="I5"></td>
                <td id="N5"></td>
                <td id="G5"></td>
                <td id="O5"></td>
            </tr>
        </table>
        <div class="vl"></div>
        <table id="tblB">
            <tr>
                <th>B</th>
                <th>I</th>
                <th>N</th>
                <th>G</th>
                <th>O</th>
            </tr>
            <tr>
                <td id="B1x"></td>
                <td id="B2x"></td>
                <td id="B3x"></td>
                <td id="B4x"></td>
                <td id="B5x"></td>
            </tr>
            <tr>
                <td id="I1x"></td>
                <td id="I2x"></td>
                <td id="I3x"></td>
                <td id="I4x"></td>
                <td id="I5x"></td>
            </tr>
            <tr>
                <td id="N1x"></td>
                <td id="N2x"></td>
                <td id="N3x"></td>
                <td id="N4x"></td>
                <td id="N5x"></td>
            </tr>
            <tr>
                <td id="G1x"></td>
                <td id="G2x"></td>
                <td id="G3x"></td>
                <td id="G4x"></td>
                <td id="G5x"></td>
            </tr>
            <tr>
                <td id="O1x"></td>
                <td id="O2x"></td>
                <td id="O3x"></td>
                <td id="O4x"></td>
                <td id="O5x"></td>
            </tr>
        </table>
        <button class="button" id="nextNum">NEXT NUMBER</button>
        <button class="button" id="reset" onclick="reset()">RESET</button>
    </body>
</html>

CSS:

@font-face {
    font-family: "Bauhaus 93";
    src: url("fonts/Bauhaus 93.ttf");
}

html {
    background-color: black;
    font-family: "Bauhaus 93";
}
#title {
    color: lime;
    font-family: "Bauhaus 93";
    text-align: center;
    font-size: 100px;
}

table tr td {
    table-layout: fixed;
    border: 3px solid lime;
    color: orange;
}

th {
    border: 3px solid aqua;
    color: crimson;
    font-size: 75px;
}

#tblA {
    table-layout: fixed;
    width: 45%;
    float: left;
}
#tblB {
    table-layout: fixed;
    width: 45%;
    float: right;
}
td {
    width: 10%;
    font-size: 75px;
}
.vl {
    border-left: 6px solid crimson;
    height: 100%;
    width: 0px;
    position: fixed;
    float: center;
    margin-left: 49%;
}

.button {
    position: fixed;
    width: 100px;
    height: 50px;
    font-family: "Bauhaus 93";
    font-size: 30px;
    border-radius: 5%;
    text-shadow: 3px 3px black;
    color: yellow;
    background-color: darkslategrey;
    border-color: red;
    border-width: 2px;
    top: 5%;
    opacity: 0.75;
}

.button:hover {
    opacity: 1.0;
}

#reset {
    right: 20%;
}
#nextNum {
    left: 20%;
}

JS:

//Variables
var a;
var b;
var c;
var d;
var e;
var f;
var g;
var h;
var i;
var j;
var k;
var l;
var m;
var n;
var o;
var p;
var q;
var r;
var s;
var t;
var u;
var v;
var w;
var x;
var y;
var aX;
var bX;
var cX;
var dX;
var eX;
var fX;
var gX;
var hX;
var iX;
var jX;
var kX;
var lX;
var mX;
var nX;
var oX;
var pX;
var qX;
var rX;
var sX;
var tX;
var uX;
var vX;
var wX;
var xX;
var yX;

function pickNumsB() {
    a = Math.floor(Math.random() * 16);
    while (a == 0) {
        a = Math.floor(Math.random() * 16);
    }
    b = Math.floor(Math.random() * 16);
    while (b == 0 || b == a) {
        b = Math.floor(Math.random() * 16);
    }
    c = Math.floor(Math.random() * 16);
    while (c == 0 || c == a || c == b) {
        c = Math.floor(Math.random() * 16);
    }
    d = Math.floor(Math.random() * 16);
    while (d == 0 || d == a || d == b || d == c) {
        d = Math.floor(Math.random() * 16);
    }
    e = Math.floor(Math.random() * 16);
    while (e == 0 || e == a || e == b || e == c || e == d) {
        e = Math.floor(Math.random() * 16);
    }
    document.getElementById("B1").innerHTML = a;
    document.getElementById("B2").innerHTML = b;
    document.getElementById("B3").innerHTML = c;
    document.getElementById("B4").innerHTML = d;
    document.getElementById("B5").innerHTML = e;
}
function pickNumsI() {
    f = Math.floor(Math.random() * 31);
    while (f == 0 || f < 16) {
        f = Math.floor(Math.random() * 31);
    }
    g = Math.floor(Math.random() * 31);
    while (g == 0 || g == f || g < 16) {
        g = Math.floor(Math.random() * 31);
    }
    h = Math.floor(Math.random() * 31);
    while (h == 0 || h == f || h == g || h < 16) {
        h = Math.floor(Math.random() * 31);
    }
    i = Math.floor(Math.random() * 31);
    while (i == 0 || i == f || i == g || i == h || i < 16) {
        i = Math.floor(Math.random() * 31);
    }
    j = Math.floor(Math.random() * 31);
    while (j == 0 || j == f || j == g || j == h || j == i || j < 16) {
        j = Math.floor(Math.random() * 31);
    }
    document.getElementById("I1").innerHTML = f;
    document.getElementById("I2").innerHTML = g;
    document.getElementById("I3").innerHTML = h;
    document.getElementById("I4").innerHTML = i;
    document.getElementById("I5").innerHTML = j;
}
function pickNumsN() {
    k = Math.floor(Math.random() * 46);
    while (k == 0 || k < 31) {
        k = Math.floor(Math.random() * 46);
    }
    l = Math.floor(Math.random() * 46);
    while (l == 0 || l == k || l < 31) {
        l = Math.floor(Math.random() * 46);
    }
    m = Math.floor(Math.random() * 46);
    while (m == 0 || m == k || m == l || m < 31) {
        m = Math.floor(Math.random() * 46);
    }
    n = Math.floor(Math.random() * 46);
    while (m == 0 || m == k || m == l || n == m || n < 31) {
        n = Math.floor(Math.random() * 46);
    }
    o = Math.floor(Math.random() * 46);
    while (o == 0 || o == k || o == l || o == m || o == n || o < 31) {
        o = Math.floor(Math.random() * 46);
    }
    document.getElementById("N1").innerHTML = k;
    document.getElementById("N2").innerHTML = l;
    document.getElementById("N3").innerHTML = m;
    document.getElementById("N4").innerHTML = n;
    document.getElementById("N5").innerHTML = o;
    
}

function pickNumsG() {
    p = Math.floor(Math.random() * 61);
    while (p == 0 || p < 46) {
        p = Math.floor(Math.random() * 61);
    }
    q = Math.floor(Math.random() * 61);
    while (q == 0 || q == p || q < 46) {
        q = Math.floor(Math.random() * 61);
    }
    r = Math.floor(Math.random() * 61);
    while (r == 0 || r == p || r == q || r < 46) {
        r = Math.floor(Math.random() * 61);
    }
    s = Math.floor(Math.random() * 61);
    while (s == 0 || s == p || s == q || s == r || s < 46) {
        s = Math.floor(Math.random() * 61);
    }
    t = Math.floor(Math.random() * 61);
    while (t == 0 || t == p || t == q || t == r || t == s || t < 46) {
        t = Math.floor(Math.random() * 61);
    }
    document.getElementById("G1").innerHTML = p;
    document.getElementById("G2").innerHTML = q;
    document.getElementById("G3").innerHTML = r;
    document.getElementById("G4").innerHTML = s;
    document.getElementById("G5").innerHTML = t;
    
}

function pickNumsO() {
    u = Math.floor(Math.random() * 76);
    while (u == 0 || u < 61) {
        u = Math.floor(Math.random() * 76);
    }
    v = Math.floor(Math.random() * 76);
    while (v == 0 || v == u || v < 61) {
        v = Math.floor(Math.random() * 76);
    }
    w = Math.floor(Math.random() * 76);
    while (w == 0 || w == u || w == v || w < 61) {
        w = Math.floor(Math.random() * 76);
    }
    x = Math.floor(Math.random() * 76);
    while (x == 0 || x == u || x == v || x == w || x < 61) {
        x = Math.floor(Math.random() * 76);
    }
    y = Math.floor(Math.random() * 76);
    while (y == 0 || y == u || y == v || y == w || y == x || y < 61) {
        y = Math.floor(Math.random() * 76);
    }
    document.getElementById("O1").innerHTML = u;
    document.getElementById("O2").innerHTML = v;
    document.getElementById("O3").innerHTML = w;
    document.getElementById("O4").innerHTML = x;
    document.getElementById("O5").innerHTML = y;
    
}


function pickNumsBX() {
    aX = Math.floor(Math.random() * 16);
    while (aX == 0) {
        aX = Math.floor(Math.random() * 16);
    }
    bX = Math.floor(Math.random() * 16);
    while (bX == 0 || bX == aX) {
        bX = Math.floor(Math.random() * 16);
    }
    cX = Math.floor(Math.random() * 16);
    while (cX == 0 || cX == aX || cX == bX) {
        cX = Math.floor(Math.random() * 16);
    }
    dX = Math.floor(Math.random() * 16);
    while (dX == 0 || dX == aX || dX == bX || dX == cX) {
        dX = Math.floor(Math.random() * 16);
    }
    eX = Math.floor(Math.random() * 16);
    while (eX == 0 || eX == aX || eX == bX || eX == cX || eX == dX) {
        eX = Math.floor(Math.random() * 16);
    }
    document.getElementById("B1x").innerHTML = aX;
    document.getElementById("B2x").innerHTML = bX;
    document.getElementById("B3x").innerHTML = cX;
    document.getElementById("B4x").innerHTML = dX;
    document.getElementById("B5x").innerHTML = eX;
}
function pickNumsIX() {
    fX = Math.floor(Math.random() * 31);
    while (fX == 0 || fX < 16) {
        fX = Math.floor(Math.random() * 31);
    }
    gX = Math.floor(Math.random() * 31);
    while (gX == 0 || gX == fX || gX < 16) {
        gX = Math.floor(Math.random() * 31);
    }
    hX = Math.floor(Math.random() * 31);
    while (hX == 0 || hX == fX || hX == gX || hX < 16) {
        hX = Math.floor(Math.random() * 31);
    }
    iX = Math.floor(Math.random() * 31);
    while (iX == 0 || iX == fX || iX == gX || iX == hX || iX < 16) {
        iX = Math.floor(Math.random() * 31);
    }
    jX = Math.floor(Math.random() * 31);
    while (jX == 0 || jX == fX || jX == gX || jX == hX || jX == iX || jX < 16) {
        jX = Math.floor(Math.random() * 31);
    }
    document.getElementById("I1x").innerHTML = fX;
    document.getElementById("I2x").innerHTML = gX;
    document.getElementById("I3x").innerHTML = hX;
    document.getElementById("I4x").innerHTML = iX;
    document.getElementById("I5x").innerHTML = jX;
}
function pickNumsNX() {
    kX = Math.floor(Math.random() * 46);
    while (kX == 0 || kX < 31) {
        kX = Math.floor(Math.random() * 46);
    }
    lX = Math.floor(Math.random() * 46);
    while (lX == 0 || lX == kX || lX < 31) {
        l = Math.floor(Math.random() * 46);
    }
    mX = Math.floor(Math.random() * 46);
    while (mX == 0 || mX == kX || mX == lX || mX < 31) {
        mX = Math.floor(Math.random() * 46);
    }
    nX = Math.floor(Math.random() * 46);
    while (mX == 0 || mX == kX || mX == lX || nX == mX || nX < 31) {
        nX = Math.floor(Math.random() * 46);
    }
    oX = Math.floor(Math.random() * 46);
    while (oX == 0 || oX == kX || oX == lX || oX == mX || oX == nX || oX < 31) {
        oX = Math.floor(Math.random() * 46);
    }
    document.getElementById("N1x").innerHTML = kX;
    document.getElementById("N2x").innerHTML = lX;
    document.getElementById("N3x").innerHTML = mX;
    document.getElementById("N4x").innerHTML = nX;
    document.getElementById("N5x").innerHTML = oX;
    
}

function pickNumsGX() {
    pX = Math.floor(Math.random() * 61);
    while (pX == 0 || pX < 46) {
        pX = Math.floor(Math.random() * 61);
    }
    qX = Math.floor(Math.random() * 61);
    while (qX == 0 || qX == pX || qX < 46) {
        qX = Math.floor(Math.random() * 61);
    }
    rX = Math.floor(Math.random() * 61);
    while (rX == 0 || rX == pX || rX == qX || rX < 46) {
        rX = Math.floor(Math.random() * 61);
    }
    sX = Math.floor(Math.random() * 61);
    while (sX == 0 || sX == pX || sX == qX || sX == rX || sX < 46) {
        sX = Math.floor(Math.random() * 61);
    }
    tX = Math.floor(Math.random() * 61);
    while (tX == 0 || tX == pX || tX == qX || tX == rX || tX == sX || tX < 46) {
        tX = Math.floor(Math.random() * 61);
    }
    document.getElementById("G1x").innerHTML = pX;
    document.getElementById("G2x").innerHTML = qX;
    document.getElementById("G3x").innerHTML = rX;
    document.getElementById("G4x").innerHTML = sX;
    document.getElementById("G5x").innerHTML = tX;
    
}

function pickNumsOX() {
    uX = Math.floor(Math.random() * 76);
    while (uX == 0 || uX < 61) {
        uX = Math.floor(Math.random() * 76);
    }
    vX = Math.floor(Math.random() * 76);
    while (vX == 0 || vX == uX || vX < 61) {
        vX = Math.floor(Math.random() * 76);
    }
    wX = Math.floor(Math.random() * 76);
    while (wX == 0 || wX == uX || wX == vX || wX < 61) {
        wX = Math.floor(Math.random() * 76);
    }
    xX = Math.floor(Math.random() * 76);
    while (xX == 0 || xX == uX || xX == vX || xX == wX || xX < 61) {
        xX = Math.floor(Math.random() * 76);
    }
    yX = Math.floor(Math.random() * 76);
    while (yX == 0 || yX == uX || yX == vX || yX == wX || yX == xX || yX < 61) {
        yX = Math.floor(Math.random() * 76);
    }
    document.getElementById("O1x").innerHTML = uX;
    document.getElementById("O2x").innerHTML = vX;
    document.getElementById("O3x").innerHTML = wX;
    document.getElementById("O4x").innerHTML = xX;
    document.getElementById("O5x").innerHTML = yX;
}

function board1() {
    pickNumsB();
    pickNumsI();
    pickNumsN();
    pickNumsG();
    pickNumsO();
}

function board2() {
    pickNumsBX();
    pickNumsIX();
    pickNumsNX();
    pickNumsGX();
    pickNumsOX();
}

function reset() {
    board1();
    board2();
}

标签: javascripthtmlbutton

解决方案


您的代码有效;它只是非常低效。例如,在 中pickNumsO(),您一遍又一遍地从 0-75 中选择一个数字,直到它落在 61-75 的范围内。然后,您再次执行此操作,添加与第一个选择不匹配的条件。然后一次又一次,每次都减少可接受的选择数量。这必须运行一段时间才能使一切正常,这只是代码中的一个函数。

获得 61-75 范围内的非重复整数的更好方法是创建该范围内的整数数组并对其进行洗牌。然后,将索引 0 处的值用作第一个非重复值,将索引 1 处的值用作第二个非重复值,依此类推。您可以使用此处提供的随机播放算法并在 JavaScript 中手动执行此操作,如下所示:

//create array
var picks = [];

//fill array
for (var i = 61; i <= 75; i++) {
  picks[picks.length] = i;
}

//shuffle array
var j, x, i;
for (i = picks.length - 1; i > 0; i--) {
  j = Math.floor(Math.random() * (i + 1));
  x = picks[i];
  picks[i] = picks[j];
  picks[j] = x;
}

//log the shuffled array
console.log(picks);

但我更喜欢用rando.js 来做,像这样:

var picks = randoSequence(61, 75);
console.log(picks);
<script src="https://randojs.com/2.0.0.js"></script>

如果你将这种技术应用到你的 JavaScript 中,你会得到更高效的东西:

function pickNumsB() {
  var picks = randoSequence(1, 15);
  document.getElementById("B1").innerHTML = picks[0];
  document.getElementById("B2").innerHTML = picks[1];
  document.getElementById("B3").innerHTML = picks[2];
  document.getElementById("B4").innerHTML = picks[3];
  document.getElementById("B5").innerHTML = picks[4];
}

function pickNumsI() {
  var picks = randoSequence(16, 30);
  document.getElementById("I1").innerHTML = picks[0];
  document.getElementById("I2").innerHTML = picks[1];
  document.getElementById("I3").innerHTML = picks[2];
  document.getElementById("I4").innerHTML = picks[3];
  document.getElementById("I5").innerHTML = picks[4];
}

function pickNumsN() {
  var picks = randoSequence(31, 45);
  document.getElementById("N1").innerHTML = picks[0];
  document.getElementById("N2").innerHTML = picks[1];
  document.getElementById("N3").innerHTML = picks[2];
  document.getElementById("N4").innerHTML = picks[3];
  document.getElementById("N5").innerHTML = picks[4];

}

function pickNumsG() {
  var picks = randoSequence(46, 60);
  document.getElementById("G1").innerHTML = picks[0];
  document.getElementById("G2").innerHTML = picks[1];
  document.getElementById("G3").innerHTML = picks[2];
  document.getElementById("G4").innerHTML = picks[3];
  document.getElementById("G5").innerHTML = picks[4];

}

function pickNumsO() {
  var picks = randoSequence(61, 75);
  document.getElementById("O1").innerHTML = picks[0];
  document.getElementById("O2").innerHTML = picks[1];
  document.getElementById("O3").innerHTML = picks[2];
  document.getElementById("O4").innerHTML = picks[3];
  document.getElementById("O5").innerHTML = picks[4];

}


function pickNumsBX() {
  var picks = randoSequence(1, 15);
  document.getElementById("B1x").innerHTML = picks[0];
  document.getElementById("B2x").innerHTML = picks[1];
  document.getElementById("B3x").innerHTML = picks[2];
  document.getElementById("B4x").innerHTML = picks[3];
  document.getElementById("B5x").innerHTML = picks[4];
}

function pickNumsIX() {
  var picks = randoSequence(16, 30);
  document.getElementById("I1x").innerHTML = picks[0];
  document.getElementById("I2x").innerHTML = picks[1];
  document.getElementById("I3x").innerHTML = picks[2];
  document.getElementById("I4x").innerHTML = picks[3];
  document.getElementById("I5x").innerHTML = picks[4];
}

function pickNumsNX() {
  var picks = randoSequence(31, 45);
  document.getElementById("N1x").innerHTML = picks[0];
  document.getElementById("N2x").innerHTML = picks[1];
  document.getElementById("N3x").innerHTML = picks[2];
  document.getElementById("N4x").innerHTML = picks[3];
  document.getElementById("N5x").innerHTML = picks[4];

}

function pickNumsGX() {
  var picks = randoSequence(46, 60);
  document.getElementById("G1x").innerHTML = picks[0];
  document.getElementById("G2x").innerHTML = picks[1];
  document.getElementById("G3x").innerHTML = picks[2];
  document.getElementById("G4x").innerHTML = picks[3];
  document.getElementById("G5x").innerHTML = picks[4];

}

function pickNumsOX() {
  var picks = randoSequence(61, 75);
  document.getElementById("O1x").innerHTML = picks[0];
  document.getElementById("O2x").innerHTML = picks[1];
  document.getElementById("O3x").innerHTML = picks[2];
  document.getElementById("O4x").innerHTML = picks[3];
  document.getElementById("O5x").innerHTML = picks[4];

}

function board1() {
  pickNumsB();
  pickNumsI();
  pickNumsN();
  pickNumsG();
  pickNumsO();
}

function board2() {
  pickNumsBX();
  pickNumsIX();
  pickNumsNX();
  pickNumsGX();
  pickNumsOX();
}

function reset() {
  board1();
  board2();
}
@font-face {
  font-family: "Bauhaus 93";
  src: url("fonts/Bauhaus 93.ttf");
}

html {
  background-color: black;
  font-family: "Bauhaus 93";
}

#title {
  color: lime;
  font-family: "Bauhaus 93";
  text-align: center;
  font-size: 100px;
}

table tr td {
  table-layout: fixed;
  border: 3px solid lime;
  color: orange;
}

th {
  border: 3px solid aqua;
  color: crimson;
  font-size: 75px;
}

#tblA {
  table-layout: fixed;
  width: 45%;
  float: left;
}

#tblB {
  table-layout: fixed;
  width: 45%;
  float: right;
}

td {
  width: 10%;
  font-size: 75px;
}

.vl {
  border-left: 6px solid crimson;
  height: 100%;
  width: 0px;
  position: fixed;
  float: center;
  margin-left: 49%;
}

.button {
  position: fixed;
  width: 100px;
  height: 50px;
  font-family: "Bauhaus 93";
  font-size: 30px;
  border-radius: 5%;
  text-shadow: 3px 3px black;
  color: yellow;
  background-color: darkslategrey;
  border-color: red;
  border-width: 2px;
  top: 5%;
  opacity: 0.75;
}

.button:hover {
  opacity: 1.0;
}

#reset {
  right: 20%;
}

#nextNum {
  left: 20%;
}
<script src="https://randojs.com/2.0.0.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<body onload="reset()">
  <h1 id="title">BINGO</h1>
  <table id="tblA">
    <tr>
      <th>B</th>
      <th>I</th>
      <th>N</th>
      <th>G</th>
      <th>O</th>
    </tr>
    <tr>
      <td id="B1"></td>
      <td id="I1"></td>
      <td id="N1"></td>
      <td id="G1"></td>
      <td id="O1"></td>
    </tr>
    <tr>
      <td id="B2"></td>
      <td id="I2"></td>
      <td id="N2"></td>
      <td id="G2"></td>
      <td id="O2"></td>
    </tr>
    <tr>
      <td id="B3"></td>
      <td id="I3"></td>
      <td id="N3"></td>
      <td id="G3"></td>
      <td id="O3"></td>
    </tr>
    <tr>
      <td id="B4"></td>
      <td id="I4"></td>
      <td id="N4"></td>
      <td id="G4"></td>
      <td id="O4"></td>
    </tr>
    <tr>
      <td id="B5"></td>
      <td id="I5"></td>
      <td id="N5"></td>
      <td id="G5"></td>
      <td id="O5"></td>
    </tr>
  </table>
  <div class="vl"></div>
  <table id="tblB">
    <tr>
      <th>B</th>
      <th>I</th>
      <th>N</th>
      <th>G</th>
      <th>O</th>
    </tr>
    <tr>
      <td id="B1x"></td>
      <td id="B2x"></td>
      <td id="B3x"></td>
      <td id="B4x"></td>
      <td id="B5x"></td>
    </tr>
    <tr>
      <td id="I1x"></td>
      <td id="I2x"></td>
      <td id="I3x"></td>
      <td id="I4x"></td>
      <td id="I5x"></td>
    </tr>
    <tr>
      <td id="N1x"></td>
      <td id="N2x"></td>
      <td id="N3x"></td>
      <td id="N4x"></td>
      <td id="N5x"></td>
    </tr>
    <tr>
      <td id="G1x"></td>
      <td id="G2x"></td>
      <td id="G3x"></td>
      <td id="G4x"></td>
      <td id="G5x"></td>
    </tr>
    <tr>
      <td id="O1x"></td>
      <td id="O2x"></td>
      <td id="O3x"></td>
      <td id="O4x"></td>
      <td id="O5x"></td>
    </tr>
  </table>
  <button class="button" id="nextNum">NEXT NUMBER</button>
  <button class="button" id="reset" onclick="reset()">RESET</button>
</body>

它仍然有点罗嗦,但现在效率更高,并且肯定会完成工作。如果您想让 JavaScript 不那么冗长,请研究参数并使用它们创建一个pickNums函数,该函数将根据您传递给函数的值执行操作,而不是为您想要使用不同值的每种情况定义一个新函数。

如果您的代码不是那么低效,它实际上会起作用。我在这一天教过很多初学者,这对初学者来说令人印象深刻。不错的作品。请记住,您通常希望寻找对计算机工作量最少的解决方案,并且总是问自己是否可以在不重复自己的情况下弄清楚如何做某事。这需要练习,但从您的代码中可以清楚地看出,随着您的学习,您会进步得很好。我看到你未来的美好日子。


推荐阅读