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

これを行う1つの方法は、ボタンのクリックでクッキーを作成し、それを24時間持続させ、ボタンをクリック可能にするかどうかを確認することです。この方法の限界は、ユーザーがクッキーをクリアすると、ボタンが再びクリック可能になることです。

が、このW3Schoolsの例を見てみましょう： https://www.w3schools.com/js/tryit.asp?filename=tryjs_cookie_username

ユーザーが24時間以内に再度ボタンをクリックしてください傾けることを確認する場合は、あなたがこのクリックイベントサーバ側を保存するためにneeed。

Answer 2

あなたのsetTimeout（）WindowOrWorkerGlobalScopeのミックスインの方法（及びwindow.setTimeoutはへ 後継）が一旦コードの関数 または指定された部分を実行するタイマをセットsetTimeout(YOUR_FUNCTION, TIME_TO_WAIT)

を使用することができタイマは終了する。

時間（ミリ秒単位）は、指定された機能またはコードが実行される前にタイマー が待機する必要があります。この パラメータを省略すると、0の値は、メソッドがそうミリ秒単位で時間がかかる 「すぐに」

を実行する意味、使用されている、あなたはあなたの時間をミリ秒に変換する必要があります。

24hrについては、24*60*60*1000をパラメータとして渡す必要があります。

SNIPPET

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 
} 

ため、このフィドルは、私はまた、このロジックのためのサーバ側でチェックすることをお勧め。

これは、ユーザーがボタンをクリックしてサーバーに保存して保存し、時間の経過をチェックする場合にのみ、タイムスタンプを渡すためです。