Question

我正在编写一个简单的Coin Flip项目，以磨练我的JS技能。

我有一个<div id="winMessage">，并且如果我几秒钟不单击按钮，希望将其隐藏。我该如何实现这样的目标？

我尝试使用style.visibility和sleep()在行之间隐藏/显示它，但效率似乎低下，并在其他部分引起很多问题。

let heads = 0, tails = 0;

let coinFlip = () => {
    let flip = () => {
        return Math.floor((Math.random() * 2) + 1);
    }

    let result = flip();

    if (result === 1){
        heads++;
        document.getElementById("winMessage").innerHTML = "Heads!"
    }

    else if (result === 2) {
        tails++;
        document.getElementById("winMessage").innerHTML = "Tails!"
    }

    document.getElementById("heads").innerText = heads;
    document.getElementById("tails").innerHTML = tails;
}

<head>

    <title>Coin Flipper</title>
    <link rel="stylesheet" href="style.css" class="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
</head>

<body class="bg-dark text-warning" style="margin: auto;">
    <header>
        <h1>Coin Flip</h1>
    </header>

    <form>
        <div>
            <button type="button" class="btn btn-warning" onclick="coinFlip()" style="width: 100%;">Flip It!</button>
        </div>
    </form>

    <div id="winMessage" style="float: center; text-align: center; font-size: 100px; padding-bottom: 10px;"></div>

    <div style="float: center; text-align: center;">
        <div>Heads Count: <div id="heads" style=></div></div>
        <div>Tails Count: <div id="tails"></div></div>
    </div>

</body>
```

Answer 1

使用setTimeout()和clearTimeout()：

const hide = setTimeout()在主要范围内，您的延迟是第二个论点
clearTimeout(hide)在按钮上单击
element.style.display = "none"隐藏元素
可选地，当您使用Bootstrap时，我想您可以改用jQuery .hide()

let heads = 0, tails = 0;

let coinFlip = () => {
    clearTimeout(hide);
    let flip = () => {
        return Math.floor((Math.random() * 2) + 1);
    }

    let result = flip();

    if (result === 1){
        heads++;
        document.getElementById("winMessage").innerHTML = "Heads!"
    }

    else if (result === 2) {
        tails++;
        document.getElementById("winMessage").innerHTML = "Tails!"
    }

    document.getElementById("heads").innerText = heads;
    document.getElementById("tails").innerHTML = tails;
}


const hide = setTimeout(() => {
  document.getElementById('winMessage').style.display = 'none'
}, 3000)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">
<header>
    <h1>Coin Flip</h1>
</header>

<form>
    <div>
        <button type="button" class="btn btn-warning" onclick="coinFlip()" style="width: 100%;">Flip It!</button>
    </div>
</form>

<div id="winMessage" style="float: center; text-align: center; font-size: 100px; padding-bottom: 10px;">Hides after 3000ms</div>

<div style="float: center; text-align: center;">
    <div>Heads Count: <div id="heads" style=></div></div>
    <div>Tails Count: <div id="tails"></div></div>
</div>

Answer 2

您应在程序启动时启动计时器。每次按下按钮时，应清除计时器并启动新的计时器。这是使用setTimeout和clearTimeout的示例。

var time = 5000;
var timeoutID = setTimeout(hideElement, time);

document.querySelector("#button").addEventListener("click", delay);

function delay() {
  clearTimeout(timeoutID);
  timeoutID = setTimeout(hideElement, time);
}

function hideElement() {
  document.querySelector("#hide").style.display = "none";
}

<div id="hide">Hiding</div>
<button id="button">Delay</button>

这是您的问题的样子：

let heads = 0,
  tails = 0;

const time = 5000;
let timeoutID = setTimeout(hideMessage, time);

let coinFlip = () => {
  let flip = () => {
    return Math.floor((Math.random() * 2) + 1);
  }

  let result = flip();

  if (result === 1) {
    heads++;
    document.getElementById("winMessage").innerHTML = "Heads!"
  } else if (result === 2) {
    tails++;
    document.getElementById("winMessage").innerHTML = "Tails!"
  }

  document.getElementById("heads").innerText = heads;
  document.getElementById("tails").innerHTML = tails;
  clearTimeout(timeoutID);
  timeoutID = setTimeout(hideMessage, time);
  // If you do not want it to reappear, remove this line
  document.querySelector("#winMessage").style.display = null;
};

function hideMessage() {
  document.querySelector("#winMessage").style.display = "none";
}

<head>

  <title>Coin Flipper</title>
  <link rel="stylesheet" href="style.css" class="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>

<body class="bg-dark text-warning" style="margin: auto;">
  <header>
    <h1>Coin Flip</h1>
  </header>

  <form>
    <div>
      <button type="button" class="btn btn-warning" onclick="coinFlip()" style="width: 100%;">Flip It!</button>
    </div>
  </form>

  <div id="winMessage" style="float: center; text-align: center; font-size: 100px; padding-bottom: 10px;"></div>

  <div style="float: center; text-align: center;">
    <div>Heads Count:
      <div id="heads" style=></div>
    </div>
    <div>Tails Count:
      <div id="tails"></div>
    </div>
  </div>

</body>

Answer 3

以简单的方式使用CSS。使用CSS动画。

@keyframes showHide {
   0% { opacity: 0; }
   10% { opacity: 0.2 }
   20% { opacity: 0.35 }
   50% { opacity: 1 }
   60% { opacity: 0.75 }
   100 % { opacity: 0; }
 }
 
#winMessage {
  height: 100px;
  opacity: 0;
  width: 100px;
  background: red;
  animation-name: showHide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate; 
  animation-delay: 1s;
}

<div id="winMessage" style="float: center; text-align: center; font-size: 100px; padding-bottom: 10px;"></div>

Answer 4

类似这样的东西：

setTimeout(() => {  
    document.getElementById("winMessage").style.display = 'none'; 
}, 3000); // 3 seconds

<div id="winMessage">winMessage</div>

如果在一定时间内未单击按钮，如何隐藏元素

4 个答案: