3
votes

Comment masquer un élément si un bouton n'a pas été cliqué pendant un certain temps

J'écris un projet simple Coin Flip pour perfectionner mes compétences JS.

J'ai un

  et je souhaite qu'il soit masqué si je ne clique pas sur le bouton pendant quelques secondes. Comment puis-je réaliser quelque chose comme ça?   J'ai essayé d'utiliser  style.visibility  et  sleep ()  pour le cacher / l'afficher entre les lignes mais il semble donc inefficace et cause beaucoup de problèmes sur d'autres parties. 
  
 

<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>
```
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;
}

javascript html

2 commentaires

Avez-vous essayé document.getElementById ("winMessage"). Style.display = "none"; ?

Pas une réponse mais un pointeur dans la bonne direction: Créez une fonction (qui cache l'élément) et utilisez setTimeout (functionname, 3000) où 3000 est le délai en ms. Attention cependant, ce sont les premiers pas vers un territoire asynchrone et il y a un obstacle mineur pour tous les nouveaux arrivants à saisir les complexités avec des fonctions qui fonctionneront à un moment donné dans le futur. Mais ce n'est pas grave, embrassez-le.

4 Réponses :

4
votes

Utilisez setTimeout () et clearTimeout () code > :

const hide = setTimeout () dans la portée principale, avec votre délai comme deuxième argument
clearTimeout (hide) sur le bouton cliquez
element.style.display = "none" pour masquer l'élément
éventuellement, lorsque vous utilisez Bootstrap, je suppose que vous pouvez utiliser jQuery .hide () à la place

<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>

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)

4 commentaires

Mais il affiche initialement le message "Se cache après ..." puis ne fait rien sur les messages suivants. Ou est-ce que je manque quelque chose?

Oui, c'est juste à titre d'exemple - je vous ai donné les outils, la logique métier est pour vous d'être implémentée :). Basculez ces deux fonctions selon vos besoins.

Oh, pendant un moment, j'ai cru que vous aviez mal compris ma question. Merci pour la réponse, je vais l'essayer maintenant!

Amusez-vous bien, je suis sûr que vous y arriverez :).

1
votes

Vous devriez démarrer une minuterie au début de votre programme. Chaque fois que vous appuyez sur le bouton, la minuterie doit être effacée et une nouvelle minuterie doit démarrer. Voici un exemple utilisant setTimeout et clearTimeout .

<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>

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";
}

Voici à quoi cela ressemblerait sur votre question:

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

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";
}

0 commentaires

0
votes

Quelque chose comme ceci:

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

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

0 commentaires

1
votes

Pour la manière simple, utilisez css. Avec animation css.

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

@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;
}

0 commentaires