Question

这就是我的意思：

我写了一个简单的计时器，从5分钟开始倒计时。在5分钟结束时，我想显示一个按钮供我的用户按。您可以在本文末尾看到我的代码。

我不希望用户能够在计时器用完之前按下按钮。我不希望用户能够进入JS控制台并调用“document.getElementById（”button“）。style.display ='block';”并且可以访问该按钮。

有什么方法可以做到这一点，最好是完全在客户端？有没有办法在客户端完全做到这一点？

我的后端是Ruby on Rails - 如果有一个使用RoR的简单解决方案，我也会对此感到好奇。但坦率地说，我很想知道是否有完全客户端的方式来做到这一点！

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

Answer 1

没有完全客户端解决方案。因为如果你使用客户端完全实现这一点，用户可以通过某种方式更改计时器（如你所说，显示按钮）。

为确保通过5分钟，您必须与服务器通信，但可以使用ajax实现此目的。

在计时器启动时，你可以在服务器上调用一些动作并在服务器端启动计时器，使用sessions变量，当你通过其他动作执行ajax调用5分钟时检查是否已经过了5分钟（这样你得到5分钟，用户无法在客户端上更改它。

如果5分钟过去了，你将html返回给用户，在html中你返回你想要显示的按钮，这样用户就无法检查html，并将其设置为可见，因为服务器在5分钟后返回按钮，然后用户可以点击它。

Answer 2

我讨厌说它萌芽，但javascript中没有安全的东西。具有一点知识的用户将能够对您的代码执行任何他们想要的操作。但试图提出建议

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>

这样按钮就不存在，直到你在计时器结束时创建它

https://jsfiddle.net/u3bae0uj/

如何构建基于安全计时器的按钮？

2 个答案: