Question

我正在开发一个应用程序，我想要的是当用户点击任何按钮时，此按钮将被隐藏并且仅在24小时后显示。这是我到目前为止所做的。

<div class="buttons">
    <p><button onclick="hide();" type="button" name="button" id="button-he">Validar</button></p>
    <p><button onclick="hide();" type="button" name="button" id="button-hse">Validar</button></p>
    <p><button onclick="hide();" type="button" name="button" id="button-hre">Validar</button></p>
  </div>

  <script>
      function intervalo(){
        var but = document.getElementByTagName("button");
        but.style.visibility='hidden';
      }
  </script>

Answer 1

您可以使用setTimeout( YOUR_FUNCTION, TIME_TO_WAIT )

WindowOrWorkerGlobalScope mixin的setTimeout（）方法（和   window.setTimeout的后继者设置一个执行函数的计时器   或者在计时器到期后指定一段代码。

计时器应该以毫秒（千分之一秒）为单位的时间   在执行指定的函数或代码之前等待。如果这   省略参数，使用值0，表示执行   ＆＃34;立即＆＃34;

该方法需要花费时间（以毫秒为单位），因此您需要将时间转换为毫秒。

对于24hr，您需要将24*60*60*1000作为参数传递。

<强>段

＆＃13;

function hide(but) {
  but.style.visibility = 'hidden';
  setTimeout(function(btn) {
    but.style.visibility = 'visible';
  }.bind(this, but), 1000); // Show after 1 second.
  // change 1000 to time you want 24*60*60*1000
}

＆＃13;

<div class="buttons">
  <p><button onclick="hide(this);" type="button" name="button" id="button-he">Validar</button></p>
  <p><button onclick="hide(this);" type="button" name="button" id="button-hse">Validar</button></p>
  <p><button onclick="hide(this);" type="button" name="button" id="button-hre">Validar</button></p>
</div>

＆＃13;

如果用户刷新页面，该方法将忘记计时器。

如果您希望它具有持久性，那么当用户点击按钮timestamp时，您可以存储localstorage，并检查该页面加载时间是否超过24小时。

检查Implementation

的小提琴

buttons = ["button-he", "button-hse", "button-hre"];
timer = 24 * 60 * 60 * 10000;
function init () {
  buttons.forEach(function(val) {
    var start = localStorage.getItem(val + '-timer');
    var end = new Date().getTime();
    var but = document.getElementById(val);
    if (start && (end - start < timer)) {
        but.style.visibility = 'hidden';
        setTimeout(function(btn) {
        but.style.visibility = 'visible';
      }.bind(this, but), end-start);
    }
  })
}

init();

window.hide = function(but) {
  localStorage.setItem(but.id + '-timer', new Date().getTime());
  but.style.visibility = 'hidden';
  setTimeout(function(btn) {
    but.style.visibility = 'visible';
  }.bind(this, but), 24 * 60 * 60 * 10000); // Show after 1 second.
  // change 1000 to time you want 24*60*60*1000
}

虽然，我建议在服务器端检查这个逻辑。

为此，当用户点击服务器上的按钮并存储它并检查时间间隔时，只需传递时间戳。

Answer 2

执行此操作的一种方法是在按钮单击上创建一个cookie，该cookie将持续24小时，然后检查该按钮是否应该是可点击的。这种方法的局限性在于，如果用户清除了cookie，则该按钮将再次变为可点击。

看看这个w3schools的例子： https://www.w3schools.com/js/tryit.asp?filename=tryjs_cookie_username

如果您想确保用户无法在24小时内再次点击该按钮，您需要保存此点击事件服务器端。

根据时间的JavaScript按钮操作

2 个答案: