Question

我意识到SweetAlert2对我不起作用，我试图通过在HTML和JS中调用ID这样的基本对话框窗口div来集成jQuery以覆盖Alert（），它似乎不起作用 -

HTML

height: calc(100vh - 75px);

CSS

^(.*\<li\>\<a href\=).*(cherry|credits)(\.jpg)

的Javascript

<html>
<script src="action.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<body>
<div id="board-outer" class="center">
    <table id="board">
        <tr class="row">
            <td><a href="javascript:yourChoice('A')"><img src="blank-sq.gif" border="0" height="246" width="246" name="A" alt="Top-Left"></a></td>
            <td><a href="javascript:yourChoice('B')"><img src="blank-sq.gif" border="0" height="246" width="246" name="B" alt="Top-Center"></a></td>
            <td><a href="javascript:yourChoice('C')"><img src="blank-sq.gif" border="0" height="246" width="246" name="C" alt="Top-Right"></a></td>
        </tr>
        <tr class="row">
            <td><a href="javascript:yourChoice('D')"><img src="blank-sq.gif" border="0" height="246" width="246" name="D" alt="Middle-Left"></a></td>
            <td><a href="javascript:yourChoice('E')"><img src="blank-sq.gif" border="0" height="246" width="246" name="E" alt="Middle-Center"></a></td>
            <td><a href="javascript:yourChoice('F')"><img src="blank-sq.gif" border="0" height="246" width="246" name="F" alt="Middle-Right"></a></td>
        </tr>
        <tr class="row">
            <td><a href="javascript:yourChoice('G')"><img src="blank-sq.gif" border="0" height="246" width="246" name="G" alt="Bottom-Left"></a></td>
            <td><a href="javascript:yourChoice('H')"><img src="blank-sq.gif" border="0" height="246" width="246" name="H" alt="Bottom-Center"></a></td>
            <td><a href="javascript:yourChoice('I')"><img src="blank-sq.gif" border="0" height="246" width="246" name="I" alt="Bottom-Right"></a></td>
        </tr>
    </table>
</div>
<br>
   <div class="center button">
    <button onClick="playAgain();"><img src="restart.gif" width="111" height="98" border="0"></button>
</div>

<div id="dialog1" title="Basic dialog"> <-----------------
    <p>You won!</p>
</div>
<div id="dialog2" title="Basic dialog"> <-----------------
    <p>Computer wins!</p>
</div>
<div id="dialog3" title="Basic dialog"> <-----------------
    <p>Tied!</p>
</div>
</body>

Answer 1

函数taken不存在，在这种情况下，代码在遇到process之前就会出错。（我在下面的例子中添加了一个。）
all始终为0，因此$(...).dialog()永远不会在process中触发。（有些东西与你的逻辑有关。）

我已经为dialog0做了示例all始终显示为var x = "x.gif"; var o = "o.gif"; var blank = "blank-sq.gif"; var pause = 0; var all = 0; var a = 0; var b = 0; var c = 0; var d = 0; var e = 0; var f = 0; var g = 0; var h = 0; var i = 0; var temp = ""; var ok = 0; var cf = 0; var choice = 9; var aRandomNumber = 0; var comp = 0; var t = 0; var wn = 0; var ls = 0; var ts = 0; function logicOne() { if ((a == 1) && (b == 1) && (c == 1)) all = 1; if ((a == 1) && (d == 1) && (g == 1)) all = 1; if ((a == 1) && (e == 1) && (i == 1)) all = 1; if ((b == 1) && (e == 1) && (h == 1)) all = 1; if ((d == 1) && (e == 1) && (f == 1)) all = 1; if ((g == 1) && (h == 1) && (i == 1)) all = 1; if ((c == 1) && (f == 1) && (i == 1)) all = 1; if ((g == 1) && (e == 1) && (c == 1)) all = 1; if ((a == 2) && (b == 2) && (c == 2)) all = 2; if ((a == 2) && (d == 2) && (g == 2)) all = 2; if ((a == 2) && (e == 2) && (i == 2)) all = 2; if ((b == 2) && (e == 2) && (h == 2)) all = 2; if ((d == 2) && (e == 2) && (f == 2)) all = 2; if ((g == 2) && (h == 2) && (i == 2)) all = 2; if ((c == 2) && (f == 2) && (i == 2)) all = 2; if ((g == 2) && (e == 2) && (c == 2)) all = 2; if ((a != 0) && (b != 0) && (c != 0) && (d != 0) && (e != 0) && (f != 0) && (g != 0) && (h != 0) && (i != 0) && (all == 0)) all = 3; } function logicTwo() { if ((a == 2) && (b == 2) && (c == 0) && (temp == "")) temp = "C"; if ((a == 2) && (b == 0) && (c == 2) && (temp == "")) temp = "B"; if ((a == 0) && (b == 2) && (c == 2) && (temp == "")) temp = "A"; if ((a == 2) && (d == 2) && (g == 0) && (temp == "")) temp = "G"; if ((a == 2) && (d == 0) && (g == 2) && (temp == "")) temp = "D"; if ((a == 0) && (d == 2) && (g == 2) && (temp == "")) temp = "A"; if ((a == 2) && (e == 2) && (i == 0) && (temp == "")) temp = "I"; if ((a == 2) && (e == 0) && (i == 2) && (temp == "")) temp = "E"; if ((a == 0) && (e == 2) && (i == 2) && (temp == "")) temp = "A"; if ((b == 2) && (e == 2) && (h == 0) && (temp == "")) temp = "H"; if ((b == 2) && (e == 0) && (h == 2) && (temp == "")) temp = "E"; if ((b == 0) && (e == 2) && (h == 2) && (temp == "")) temp = "B"; if ((d == 2) && (e == 2) && (f == 0) && (temp == "")) temp = "F"; if ((d == 2) && (e == 0) && (f == 2) && (temp == "")) temp = "E"; if ((d == 0) && (e == 2) && (f == 2) && (temp == "")) temp = "D"; if ((g == 2) && (h == 2) && (i == 0) && (temp == "")) temp = "I"; if ((g == 2) && (h == 0) && (i == 2) && (temp == "")) temp = "H"; if ((g == 0) && (h == 2) && (i == 2) && (temp == "")) temp = "G"; if ((c == 2) && (f == 2) && (i == 0) && (temp == "")) temp = "I"; if ((c == 2) && (f == 0) && (i == 2) && (temp == "")) temp = "F"; if ((c == 0) && (f == 2) && (i == 2) && (temp == "")) temp = "C"; if ((g == 2) && (e == 2) && (c == 0) && (temp == "")) temp = "C"; if ((g == 2) && (e == 0) && (c == 2) && (temp == "")) temp = "E"; if ((g == 0) && (e == 2) && (c == 2) && (temp == "")) temp = "G"; } function logicThree() { if ((a == 1) && (b == 1) && (c == 0) && (temp == "")) temp = "C"; if ((a == 1) && (b == 0) && (c == 1) && (temp == "")) temp = "B"; if ((a == 0) && (b == 1) && (c == 1) && (temp == "")) temp = "A"; if ((a == 1) && (d == 1) && (g == 0) && (temp == "")) temp = "G"; if ((a == 1) && (d == 0) && (g == 1) && (temp == "")) temp = "D"; if ((a == 0) && (d == 1) && (g == 1) && (temp == "")) temp = "A"; if ((a == 1) && (e == 1) && (i == 0) && (temp == "")) temp = "I"; if ((a == 1) && (e == 0) && (i == 1) && (temp == "")) temp = "E"; if ((a == 0) && (e == 1) && (i == 1) && (temp == "")) temp = "A"; if ((b == 1) && (e == 1) && (h == 0) && (temp == "")) temp = "H"; if ((b == 1) && (e == 0) && (h == 1) && (temp == "")) temp = "E"; if ((b == 0) && (e == 1) && (h == 1) && (temp == "")) temp = "B"; if ((d == 1) && (e == 1) && (f == 0) && (temp == "")) temp = "F"; if ((d == 1) && (e == 0) && (f == 1) && (temp == "")) temp = "E"; if ((d == 0) && (e == 1) && (f == 1) && (temp == "")) temp = "D"; if ((g == 1) && (h == 1) && (i == 0) && (temp == "")) temp = "I"; if ((g == 1) && (h == 0) && (i == 1) && (temp == "")) temp = "H"; if ((g == 0) && (h == 1) && (i == 1) && (temp == "")) temp = "G"; if ((c == 1) && (f == 1) && (i == 0) && (temp == "")) temp = "I"; if ((c == 1) && (f == 0) && (i == 1) && (temp == "")) temp = "F"; if ((c == 0) && (f == 1) && (i == 1) && (temp == "")) temp = "C"; if ((g == 1) && (e == 1) && (c == 0) && (temp == "")) temp = "C"; if ((g == 1) && (e == 0) && (c == 1) && (temp == "")) temp = "E"; if ((g == 0) && (e == 1) && (c == 1) && (temp == "")) temp = "G"; } function clearOut() { document.game.you.value = "0"; document.game.computer.value = "0"; document.game.ties.value = "0"; } function checkSpace() { if ((temp == "A") && (a == 0)) { ok = 1; if (cf == 0) a = 1; if (cf == 1) a = 2; } if ((temp == "B") && (b == 0)) { ok = 1; if (cf == 0) b = 1; if (cf == 1) b = 2; } if ((temp == "C") && (c == 0)) { ok = 1; if (cf == 0) c = 1; if (cf == 1) c = 2; } if ((temp == "D") && (d == 0)) { ok = 1; if (cf == 0) d = 1; if (cf == 1) d = 2; } if ((temp == "E") && (e == 0)) { ok = 1; if (cf == 0) e = 1; if (cf == 1) e = 2; } if ((temp == "F") && (f == 0)) { ok = 1 if (cf == 0) f = 1; if (cf == 1) f = 2; } if ((temp == "G") && (g == 0)) { ok = 1 if (cf == 0) g = 1; if (cf == 1) g = 2; } if ((temp == "H") && (h == 0)) { ok = 1; if (cf == 0) h = 1; if (cf == 1) h = 2; } if ((temp == "I") && (i == 0)) { ok = 1; if (cf == 0) i = 1; if (cf == 1) i = 2; } } function yourChoice(chName) { pause = 0; if (all != 0) ended(); if (all == 0) { cf = 0; ok = 0; temp = chName; checkSpace(); if (ok == 1) { document.images[chName].src = x; } if (ok == 0) taken(); // <--- this function does not exist process(); if ((all == 0) && (pause == 0)) myChoice(); } } function taken() { } // <--- inserted this here just for testing function myChoice() { temp = ""; ok = 0; cf = 1; logicTwo(); logicThree(); checkSpace(); while (ok == 0) { aRandomNumber = Math.random() comp = Math.round((choice - 1) * aRandomNumber) + 1; if (comp == 1) temp = "A"; if (comp == 2) temp = "B"; if (comp == 3) temp = "C"; if (comp == 4) temp = "D"; if (comp == 5) temp = "E"; if (comp == 6) temp = "F"; if (comp == 7) temp = "G"; if (comp == 8) temp = "H"; if (comp == 9) temp = "I"; checkSpace(); } document.images[temp].src = o; process(); } function process() { logicOne(); if (all === 0) { // <----- all is always 0. $("#dialog0").dialog(); } else if (all == 1) { $("#dialog1").dialog(); //<----------------- } else if (all == 2) { $("#dialog2").dialog(); //<----------------- } else if (all == 3) { $("#dialog3").dialog(); //<----------------- } } function playAgain() { if (all == 0) { reset(); } if (all > 0) reset(); } function reset() { all = 0; a = 0; b = 0; c = 0; d = 0; e = 0; f = 0; g = 0; h = 0; i = 0; temp = ""; ok = 0; cf = 0; choice = 9; aRandomNumber = 0; comp = 0; document.images.A.src = blank; document.images.B.src = blank; document.images.C.src = blank; document.images.D.src = blank; document.images.E.src = blank; document.images.F.src = blank; document.images.G.src = blank; document.images.H.src = blank; document.images.I.src = blank; if (t == 0) { t = 2; myChoice(); } t--; }。请参阅下面的代码段。

＆＃13;

.center {
  margin: auto;
}
body {
  background-color: #000000;
}
.button {
  margin: auto;
  width: 102px;
  height: 95px;
}
.center button {
  background-color: #000000;
  border: none;
}
#board-outer {
  background-color: none;
  overflow: hidden;
}
#board {
  width: 750px;
  height: 750px;
  background-color: none;
  border-spacing: 0;
  margin: auto;
}
td {
  height: 246px;
  width: 246px;
  text-align: center;
  border-collapse: collapse;
  border: 7px solid #000000;
  background-color: #333333;
}
a,
.title {
  color: #b24926;
}
#content a:hover {
  color: #333;
}
#banner-secondary p.intro {
  padding: 0;
  float: left;
  width: 50%;
}
#banner-secondary .download-box {
  border: 1px solid #aaa;
  background: #333;
  background: -webkit-linear-gradient(left, #333 0%, #444 100%);
  background: linear-gradient(to right, #333 0%, #444 100%);
  float: right;
  width: 40%;
  text-align: center;
  font-size: 20px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}
#banner-secondary .download-box h2 {
  color: #71d1ff;
  font-size: 26px;
}
#banner-secondary .download-box .button {
  float: none;
  display: block;
  margin-top: 15px;
}
#banner-secondary .download-box p {
  margin: 15px 0 5px;
}
#banner-secondary .download-option {
  width: 45%;
  float: left;
  font-size: 16px;
}
#banner-secondary .download-legacy {
  float: right;
}
#banner-secondary .download-option span {
  display: block;
  font-size: 14px;
  color: #71d1ff;
}
#content .dev-links {
  float: right;
  width: 30%;
  margin: -15px -25px .5em 1em;
  padding: 1em;
  border: 1px solid #666;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 5px;
  box-shadow: -2px 2px 10px -2px #666;
}
#content .dev-links ul {
  margin: 0;
}
#content .dev-links li {
  padding: 0;
  margin: .25em 0 .25em 1em;
  background-image: none;
}
.demo-list {
  float: right;
  width: 25%;
}
.demo-list h2 {
  font-weight: normal;
  margin-bottom: 0;
}
#content .demo-list ul {
  width: 100%;
  border-top: 1px solid #ccc;
  margin: 0;
}
#content .demo-list li {
  border-bottom: 1px solid #ccc;
  margin: 0;
  padding: 0;
  background: #eee;
}
#content .demo-list .active {
  background: #fff;
}
#content .demo-list a {
  text-decoration: none;
  display: block;
  font-weight: bold;
  font-size: 13px;
  color: #3f3f3f;
  text-shadow: 1px 1px #fff;
  padding: 2% 4%;
}
.demo-frame {
  width: 70%;
  height: 350px;
}
.view-source a {
  cursor: pointer;
}
.view-source > div {
  overflow: hidden;
  display: none;
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


<div id="board-outer" class="center">
  <table id="board">
    <tr class="row">
      <td>
        <a href="javascript:yourChoice('A')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="A" alt="Top-Left">
        </a>
      </td>
      <td>
        <a href="javascript:yourChoice('B')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="B" alt="Top-Center">
        </a>
      </td>
      <td>
        <a href="javascript:yourChoice('C')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="C" alt="Top-Right">
        </a>
      </td>
    </tr>
    <tr class="row">
      <td>
        <a href="javascript:yourChoice('D')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="D" alt="Middle-Left">
        </a>
      </td>
      <td>
        <a href="javascript:yourChoice('E')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="E" alt="Middle-Center">
        </a>
      </td>
      <td>
        <a href="javascript:yourChoice('F')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="F" alt="Middle-Right">
        </a>
      </td>
    </tr>
    <tr class="row">
      <td>
        <a href="javascript:yourChoice('G')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="G" alt="Bottom-Left">
        </a>
      </td>
      <td>
        <a href="javascript:yourChoice('H')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="H" alt="Bottom-Center">
        </a>
      </td>
      <td>
        <a href="javascript:yourChoice('I')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="I" alt="Bottom-Right">
        </a>
      </td>
    </tr>
  </table>
</div>
<br>
<div class="center button">
  <button onClick="playAgain();">
    <img src="restart.gif" width="111" height="98" border="0">
  </button>
</div>

<div id="dialog0" title="Basic dialog">
  <p>All is 0.</p>
</div>
<div id="dialog1" title="Basic dialog">
  <p>You won!</p>
</div>
<div id="dialog2" title="Basic dialog">
  <p>Computer wins!</p>
</div>
<div id="dialog3" title="Basic dialog">
  <p>Tied!</p>
</div>

＆＃13;

new Date(v)

＆＃13;

使用Modal UI覆盖JS Alert（）消息

1 个答案: