Question

我在card flipping game中有一个html, css, and js，最后一步是在用户猜对了对之后将我的卡隐藏起来。目前，在匹配卡片之后，用户仍然可以看到它们。看了w3schools之后，我发现了一个名为hidden的CSS样式，但是我想在我的js中实现它。我对此有麻烦，将不胜感激。下面是代码段。

function myclick() {
  var myLink = document.getElementById("mylink");
  myLink.onclick = function() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "script.js";
    document.getElementsByTagName("head")[0].appendChild(script);
    return false;
  };
  document.getElementById("mylink").click();
}




function clock() {
  var h1 = document.getElementById("clock"),
    seconds = 0,
    minutes = 0,
    hours = 0,
    t;

  function add() {
    seconds++;
    if (seconds >= 60) {
      seconds = 0;
      minutes++;
      if (minutes >= 60) {
        minutes = 0;
        hours++;
      }
    }

    h1.textContent =
      "Timer:" +
      (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") +
      ":" +
      (seconds > 9 ? seconds : "0" + seconds);

    timer();
  }

  function timer() {
    t = setTimeout(add, 1000);
  }

  timer();
}

var options = document.getElementById("options");
var userInput = options.options[options.selectedIndex].value;

var cover = [
  "bg.png",
  "bg.png",
  "bg.png",
  "bg.png",
  "bg.png",
  "bg.png",
  "bg.png",
  "bg.png"
];
var dragon_ball = [
  //   "ultra_instinct_golu.png",
  //   "ultra_instinct_golu.png",
  //   "vegeta.jpg",
  //   "vegeta.jpg",
  "picolo.jpg",
  "picolo.jpg",
  "krillin.png",
  "krillin.png",
  "gohan.jpg",
  "gohan.jpg",
  "cell.gif",
  "cell.gif"
];
var dragonball_cell = [];
var dragonball_ids = [];
var dragonball_ret = [];
var flipped = 0;
shuffle(dragon_ball);

function startGame() {
  //Start the clock timer
  clock();

  var out = "<table>";
  out += "<tr>";
  var i;

  //Create a table based on number of cards
  for (i = 0; i < cover.length; i++) {
    out +=
      '<td><div id="tile' +
      i +
      '" onclick="memory(this,\'' +
      dragon_ball[i] +
      "')\">";
    out += "<img src=" + dragon_ball[i] + ">";
    out += "</div></td>";
    if ((i + 1) % 4 === 0) {
      out += "</tr>";
    }
  }
  out += "</table>";
  document.getElementById("board").innerHTML = out;

  function hide() {
    var str;
    var x;
    for (x = 0; x < cover.length; x++) {
      str = "tile" + x;
      document.getElementById(str).innerHTML = "<img src=" + cover[x] + ">";
    }
  }

  // setTimeout based on the seconds chosen
  if (userInput === "3") {
    //Timer before it hides the card
    setTimeout(hide, 3000);
  } else if (userInput === "5") {
    setTimeout(hide, 5000);
  } else if (userInput === "8") {
    setTimeout(hide, 8000);
  }
}

//Shuffle the deck
function shuffle(a) {
  var j, x, i;
  for (i = a.length; i; i--) {
    j = Math.floor(Math.random() * i);
    x = a[i - 1];
    a[i - 1] = a[j];
    a[j] = x;
  }
}

function memory(tile, val) {
  if (dragonball_cell.length < 2) {
    dragonball_ret.push(tile.innerHTML);
    tile.innerHTML = "<img src=" + val + ">";
    if (dragonball_cell.length === 0) {
      dragonball_cell.push(val);
      dragonball_ids.push(tile.id);
    } else if (dragonball_cell.length === 1) {
      dragonball_cell.push(val);
      dragonball_ids.push(tile.id);
      if (dragonball_cell[0] === dragonball_cell[1]) {
        flipped += 2;
        dragonball_cell = [];
        dragonball_ids = [];
        dragonball_ret = [];
        if (flipped === dragon_ball.length) {
          alert("Congrats!!! You Win!!!");
          location.reload();
        }
      } else {
        function turnOver() {
          document.getElementById(dragonball_ids[0]).innerHTML =
            dragonball_ret[0];
          document.getElementById(dragonball_ids[1]).innerHTML =
            dragonball_ret[1];
          dragonball_cell = [];
          dragonball_ids = [];
          dragonball_ret = [];
        }

        setTimeout(turnOver, 700);
      }
    }
  }
}

startGame();

//Inner timer to count till lose
setInterval(myTimer, 1000);
var count = 0;

function myTimer() {
  count += 1;
  //Give them 2 minutes
  if (count === 120) {
    alert("LOSE!!! 2 Minutes has passed. Reloading game");
    location.reload();
  }
}

#board {
  margin: auto;
  width: 65%;
}

.difficulty {
  margin: auto;
  text-align: center;
  padding-bottom: 12px;
}

html {
  background-color: mediumaquamarine;
}

h1 {
  text-align: center;
}

table {
  background-color: gray;
  border: 2px black solid;
  padding: 10px;
}

img {
  width: 200px;
  height: 200px;
}

<h1>Part C</h1>

<!-- Container for clock -->
<h1 id="clock"><time>Timer:00:00</time></h1>

<div class="difficulty">
  <h2>You have 2 minutes</h2>
  <h2>How many seconds:</h2>

  <form>
    <select id="options" title="values">
      <!-- <option selected disabled>How many seconds</option> -->
      <option value="3">3</option>
      <option value="5">5</option>
      <option value="8">8</option>
    </select>
  </form>

  <!-- A Button that loads the js file -->
  <button type="button" value="Submit" onclick="myclick()">
            Submit
            <div id="mylink"></div>
          </button>
  <script type="text/javascript">
  </script>
</div>

<div id="cou"></div>
<div id="board"></div>

Answer 1

您可以执行以下操作：

function hideThatDiv() {
   document.getElementById("hideThis").style.display = "none";
}

<div id="hideThis">I will be hidden</div>
<input type="button" onclick="hideThatDiv()" value="Click me to hide it">

或者，您可以使用jQuery：

function hideThatDiv() {
  $('#hideThis').hide()
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hideThis">I will be hidden</div>
<input type="button" onclick="hideThatDiv()" value="Click me to hide it">

纸牌翻转游戏JavaScript上的隐藏样式可见性

1 个答案: