小贝子编程

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();
}

您的代码可以正常工作；它的效率低得离谱。例如，在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函数，该函数将根据你传递给函数的值来执行任务，而不是为你想要使用不同值的每种情况定义一个新函数。

如果你的代码没有那么低效，它实际上是有效的。在我的时代，我教过很多初学者，这对初学者来说是令人印象深刻的。干得好。只要记住，你通常想寻找对计算机工作量最小的解决方案，并经常问自己是否能在不重复的情况下想出如何做某事。这需要练习，但从你的代码中可以清楚地看出，你会在学习的过程中取得很好的进步。我看到了你光明的未来。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium