gpt4 book ai didi

javascript - 在重新加载页面之前显示图像

转载 作者:行者123 更新时间:2023-11-30 15:55:47 25 4
gpt4 key购买 nike

我正在尝试使用 jquery 创建井字游戏。

这是我的代码:

var i, j, m, k;
$(document).ready(function() {
i = 0;
m = new Array(3);
for (var l = 0; l < 3; l++) {
m[l] = new Array(3);
for (k = 0; k < 3; k++)
m[l][k] = null;
}
});
$(".game").click(function() {

var img;
var col = $(this).index();
var row = $(this).closest('tr').index();
if (i % 2 == 0) {
img = '<img src="file:///c:/NNK/TicTacToe/TicTacToeV1/WebContent/WEB-INF/tictactoeO.jpe"/>';
m[row][col] = 'O';
} else {
img = '<img src="file:///c:/NNK/TicTacToe/TicTacToeV1/WebContent/WEB-INF/tictactoeX.jpe"/>';
m[row][col] = 'X';
}
$(this).prepend(img);
$(this).off();
i++;
var col = $(this).index();
var row = $(this).closest('tr').index();
if (i <= 8) {
if (winhor(row, col)) {
alert(m[row][col] + " Won!");
location.reload();
}
if (winver(row, col)) {
alert(m[row][col] + " Won!");
location.reload();
}
if (windiag(row, col)) {
alert(m[row][col] + " Won!Diag");
location.reload();
}
} else {
alert("Draw");
location.reload();
}
});

function winhor(row, col) {
var sym = m[row][col];
var val;
var check = true;
for (val = 0; val < 3; val++) {
if (sym != m[row][val]) {
check = false;
break;
}
}
return check;
}

function winver(row, col) {
var sym = m[row][col];
var val;
var check = true;
for (val = 0; val < 3; val++) {
if (sym != m[val][col]) {
check = false;
break;
}
}
return check;
}

function windiag(row, col) {
var sym = m[row][col];
var valr, valc;
var check = true;
if ((row != col) && (row + col != 2)) {
//alert("not 0 or 3 or 2");
return false;
} else if (row == col) {
for (valr = 0, valc = 0; valr < 3; valr++) {
if (sym != m[valr][valc]) {
//alert("not equal at "+valr+" "+valc);
check = false;
break;
}
valc++;
}
}
if (row + col == 2) {
check = true;
for (valr = 0, valc = 2; valr < 3; valr++) {
if (sym != m[valr][valc]) {
//alert("not equal at "+valr+" "+valc);
check = false;
break;
}
valc--;
}
}
return check;
}
td {
height: 100px;
width: 50px;
font-size=30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table border="1">
<tr>
<td class="game"></td>
<td class="game"></td>
<td class="game"></td>
</tr>
<tr>
<td class="game"></td>
<td class="game"></td>
<td class="game"></td>
</tr>
<tr>
<td class="game"></td>
<td class="game"></td>
<td class="game"></td>
</tr>
</table>

当玩家获胜时,在将图像放入单元格之前首先显示 alert 消息。我希望图像在显示 alert 消息之前出现。我应该怎么做?

最佳答案

你只需要等待一段时间,然后显示 alert() 框,你可以使用 setTimeout() by 100ms 例如,检查下面的例子:

setTimeout(function(){
if (winhor(row, col)) {
alert(m[row][col] + " Won!");
location.reload();
}
if (winver(row, col)) {
alert(m[row][col] + " Won!");
location.reload();
}
if (windiag(row, col)) {
alert(m[row][col] + " Won!Diag");
location.reload();
}
},100)

希望这对您有所帮助。

var i, j, m, k;
$(document).ready(function() {
i = 0;
m = new Array(3);
for (var l = 0; l < 3; l++) {
m[l] = new Array(3);
for (k = 0; k < 3; k++)
m[l][k] = null;
}
});
$(".game").click(function() {

var img;
var col = $(this).index();
var row = $(this).closest('tr').index();
if (i % 2 == 0) {
img = '<img src="http://hhscp.org/programming/static/exemplars/tictactoe/X.png"/>';
m[row][col] = 'O';
} else {
img = '<img src="http://www.dreamincode.net/forums/uploads/post-97990-1260678636.png"/>';
m[row][col] = 'X';
}
$(this).prepend(img);
$(this).off();
i++;
var col = $(this).index();
var row = $(this).closest('tr').index();

if (i <= 8) {
setTimeout(function(){
if (winhor(row, col)) {
alert(m[row][col] + " Won!");
location.reload();
}
if (winver(row, col)) {
alert(m[row][col] + " Won!");
location.reload();
}
if (windiag(row, col)) {
alert(m[row][col] + " Won!Diag");
location.reload();
}
},100);
} else {
alert("Draw");
location.reload();
}
});

function winhor(row, col) {
var sym = m[row][col];
var val;
var check = true;
for (val = 0; val < 3; val++) {
if (sym != m[row][val]) {
check = false;
break;
}
}
return check;
}

function winver(row, col) {
var sym = m[row][col];
var val;
var check = true;
for (val = 0; val < 3; val++) {
if (sym != m[val][col]) {
check = false;
break;
}
}
return check;
}

function windiag(row, col) {
var sym = m[row][col];
var valr, valc;
var check = true;
if ((row != col) && (row + col != 2)) {
//alert("not 0 or 3 or 2");
return false;
} else if (row == col) {
for (valr = 0, valc = 0; valr < 3; valr++) {
if (sym != m[valr][valc]) {
//alert("not equal at "+valr+" "+valc);
check = false;
break;
}
valc++;
}
}
if (row + col == 2) {
check = true;
for (valr = 0, valc = 2; valr < 3; valr++) {
if (sym != m[valr][valc]) {
//alert("not equal at "+valr+" "+valc);
check = false;
break;
}
valc--;
}
}
return check;
}
td {
height: 50px;
width: 50px;
font-size=30px;
}

img{
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table border="1">
<tr>
<td class="game"></td>
<td class="game"></td>
<td class="game"></td>
</tr>
<tr>
<td class="game"></td>
<td class="game"></td>
<td class="game"></td>
</tr>
<tr>
<td class="game"></td>
<td class="game"></td>
<td class="game"></td>
</tr>
</table>

关于javascript - 在重新加载页面之前显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38571003/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com