JavaScript按钮操作根据时间

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

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

看看这个W3Schools的例子： 如果你想确保用户斜面再次点击24小时内的按钮https://www.w3schools.com/js/tryit.asp?filename=tryjs_cookie_username

，你neeed保存此单击事件服务器端。

Answer 2

可以使用setTimeout(YOUR_FUNCTION, TIME_TO_WAIT)

的WindowOrWorkerGlobalScope的setTimeout（）方法MIXIN（和 后继window.setTimeout）将其执行的功能 或之后指定一次一段代码计时器定时器到期。

以毫秒（千分之一秒）为单位的时间，计时器应在执行指定函数或代码之前等待 。如果省略该参数 ，值为0时，这意味着执行 “立即”

的方法需要一定的时间以毫秒为单位的话，你需要转换的时间为毫秒。

对于24hr您需要通过24*60*60*1000作为参数。

代码片段

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 
 
}

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

如果用户刷新页面的方法会忘记计时器。

如果你希望它是持久的，那么当用户点击按钮到localstorage时，你可以存储timestamp，并检查页面加载时是否超过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 
} 

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

因为这只是通过时间戳，当用户点击按钮到服务器并存储它，并检查时间流逝。