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 
} 

雖然，我建議還要檢查服務器端爲這個邏輯。

因爲這只是通過時間戳，當用戶點擊按鈕到服務器並存儲它，並檢查時間流逝。