Voici ce que je veux dire:

J'ai écrit un minuteur simple qui compte à rebours à partir de 5 minutes. Au bout de 5 minutes, j'aimerais afficher un bouton sur lequel mon utilisateur doit appuyer. Vous pouvez voir mon code à la fin de cet article.

Je ne veux pas que l'utilisateur puisse appuyer sur voir le bouton avant que la minuterie ne soit écoulée. Je ne veux pas que l'utilisateur puisse accéder à la console JS et appeler "document.getElementById (" button "). Style.display = 'block';" et avoir accès au bouton.

Comment puis-je faire cela, de préférence entièrement du côté client? Existe-t-il un moyen de le faire entièrement du côté client?

Mon backend est Ruby on Rails - s'il existe une solution simple utilisant RoR, je serais également curieux de le savoir. Mais franchement, j'aimerais savoir s'il existe un moyen entièrement côté client de le faire!

<html>
<script>
function startTimer(duration, display) {
  var start = Date.now(),
      diff,
      minutes,
      seconds;

  function timer(timerIntervalId) {
    diff = duration - (((Date.now() - start) / 1000) | 0);

    minutes = (diff / 60) | 0;
    seconds = (diff % 60) | 0;

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds; 

    if (minutes == "00" && seconds == "00" && timerIntervalId != undefined) {
      clearInterval(timerIntervalId);
      document.getElementById("button").style.display = 'block';
    }

    if (diff <= 0) {
      start = Date.now() + 1000;
    }
  };

  timer();
  var timerIntervalId = setInterval(function() { timer(timerIntervalId) }, 1000);
}

window.onload = function () {
  var timerLength = 60 * .15,
    display = document.querySelector('#time');
  startTimer(timerLength, display);
};

</script>
<body>
  <div>Registration closes in <span id="time"></span> minutes!</div>
  <div id = "button" style = "display: none;">BUTTON</div>
</body>
</html>
1
Ringo Blancke 17 juil. 2015 à 19:36

2 réponses

Meilleure réponse

Je déteste le dire, mais il n'y a pas de sécurité en javascript. Un utilisateur avec un peu de connaissances pourra faire tout ce qu'il veut sur votre code. Mais pour essayer de faire des suggestions

if (minutes == "00" && seconds == "00" && timerIntervalId != undefined) {
      clearInterval(timerIntervalId);
      ///document.getElementById("button").style.display = 'block';
      $("<div>").attr('id', 'button').appendTo($("#placeholder")).text("button")
}

<body>
  <div>Registration closes in <span id="time"></span> minutes!</div>
  <div id="placeholder">

   </div>

</body>
</html>

De cette façon, le bouton n'existe pas tant que vous ne l'avez pas créé à la fin du minuteur

https://jsfiddle.net/u3bae0uj/

0
QBM5 17 juil. 2015 à 16:52

Il n'existe pas de solution entièrement côté client. Parce que si vous implémentez cela entièrement en utilisant le côté client, l'utilisateur peut d'une manière ou d'une autre changer la minuterie (comme vous l'avez dit, afficher le bouton).

Pour être sûr que 5 minutes s'écouleront, vous devrez communiquer avec le serveur, mais vous pouvez l'implémenter en utilisant ajax.

Au démarrage de la minuterie, vous pouvez appeler une action sur le serveur et démarrer la minuterie côté serveur, en utilisant la variable sessions, lorsque 5 minutes se sont écoulées, vous exécutez un appel ajax sur une autre action et vérifiez si 5 minutes se sont écoulées (de cette façon, vous obtenez 5 minutes , et l'utilisateur ne peut pas le changer sur le client).

Si 5 minutes se sont écoulées, vous renvoyez le html à l'utilisateur, à l'intérieur du html, vous retournez le bouton que vous souhaitez afficher, de sorte que l'utilisateur ne peut pas inspecter le html et le rendre visible, car le serveur renvoie le bouton après 5 minutes, puis l'utilisateur peut cliquer dessus .

0
Nermin 17 juil. 2015 à 16:43