即使用戶刷新頁面，如何保持按鈕禁用？ Javascript

Question

我有這個小應用程序，可以生成 1 到 90 之間的數字。 我這樣做是因為我正在練習我早期的 JS 技能。

它是用意大利語寫的，所以為了更好地理解，標題並不那么重要，它只是說“想試試你的運氣嗎？” 布拉布拉。

然后我設置了一個超時，在點擊后禁用“Genera Numeri”按鈕 1 小時（我將其設置為 3 秒后發布），並彈出一條消息（“您可以每小時使用一次”）但如果您刷新頁面，當然可以再次點擊。

我想知道，我怎樣才能做到即使我刷新，倒計時也會繼續？

我讀了另一個類似的問題，他們在談論 Mongo（我不知道它是什么，我想是后端（？）），他們提到使用 cookie 來做到這一點，在我沒有經驗的眼中，這可能是有道理的.

無論如何，這里是Javascript

let button = document.querySelector('.button')
let clear = document.querySelector('.clear')
let message = document.querySelector('.message')
let first = document.querySelector('.first')
let second = document.querySelector('.second')
let third = document.querySelector('.third')
let fourth = document.querySelector('.fourth')
let fifth = document.querySelector('.fifth')
let sixth = document.querySelector('.sixth')

button.addEventListener('click', ()=> {
  first.innerText = Math.floor(Math.random() * (90 - 1) + 1)
  second.innerText = Math.floor(Math.random() * (90 - 1) + 1)
  third.innerText = Math.floor(Math.random() * (90 - 1) + 1)
  fourth.innerText = Math.floor(Math.random() * (90 - 1) + 1)
  fifth.innerText = Math.floor(Math.random() * (90 - 1) + 1)
  sixth.innerText = Math.floor(Math.random() * (90 - 1) + 1)

  message.classList.add('show')

  button.disabled = true

  setTimeout(function(){
    button.disabled = false
    message.classList.remove('show')
  }, 1000 * 3) 

})


clear.addEventListener('click', ()=> {
  first.innerText = ''
  second.innerText = ''
  third.innerText = ''
  fourth.innerText = ''
  fifth.innerText = ''
  sixth.innerText = ''
})

和這里的片段

 let button = document.querySelector('.button') let clear = document.querySelector('.clear') let message = document.querySelector('.message') let first = document.querySelector('.first') let second = document.querySelector('.second') let third = document.querySelector('.third') let fourth = document.querySelector('.fourth') let fifth = document.querySelector('.fifth') let sixth = document.querySelector('.sixth') button.addEventListener('click', ()=> { first.innerText = Math.floor(Math.random() * (90 - 1) + 1) second.innerText = Math.floor(Math.random() * (90 - 1) + 1) third.innerText = Math.floor(Math.random() * (90 - 1) + 1) fourth.innerText = Math.floor(Math.random() * (90 - 1) + 1) fifth.innerText = Math.floor(Math.random() * (90 - 1) + 1) sixth.innerText = Math.floor(Math.random() * (90 - 1) + 1) message.classList.add('show') button.disabled = true setTimeout(function(){ button.disabled = false message.classList.remove('show') }, 1000 * 3) }) clear.addEventListener('click', ()=> { first.innerText = '' second.innerText = '' third.innerText = '' fourth.innerText = '' fifth.innerText = '' sixth.innerText = '' })

 * { margin: 0; padding: 0; box-sizing: border-box; } body { background-image: url('conf.jpg'); background-size: cover; background-repeat: no-repeat; height: 100vh; background-position-x: right; } .overlay { width: 100vw; height: 100vh; background: rgba(0,0,0,.3); } .container { width: 95vw; height: 420px; margin: auto; display: flex; flex-direction: column; border: 1px solid black; justify-content: space-around; align-items: center; text-align: center; font-family: helvetica; position: absolute; top: 40vh; left: 50vw; transform: translate(-50%, -50%); background: rgba(0,0,0,.75); color: white; border-radius: 15px; box-shadow: 0 0 15px black; padding-bottom: 1em; } .title { height: 50%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; text-align: center; letter-spacing: .5px; } h1 { font-family: verdana; border-bottom: 1px solid white; } .tenta { font-size: 1.25em; } .numbers { display: flex; width: 100%; justify-content: space-around; } .number { width: 50px; height: 50px; border-radius: 50%; border: 1px solid white; text-align: center; vertical-align: center; display: flex; justify-content: center; align-items: center; color: white; font-family: tahoma; font-size: 1.2em; background: black; } .button { padding: .5em 1.5em; font-size: 1.1em; border: none; background: white; border-radius: 5px; box-shadow: 0 0 10px black; transition: .2s linear; outline: none; background: rgb(0,255,117) } .button:active { transform: scale(.95); } .clear { padding: .2em .5em; position: absolute; bottom: 20px; right: 20px; border: none; background: white; border-radius: 5px; box-shadow: 0 0 10px black; transition: .2s linear; outline: none; } .clear:active { transform: scale(.95); } p { color: white; text-align: center; position: relative; top: calc(450px + 20vw); font-family: helvetica; font-size: 1.1em; margin: auto; background: rgba(0,0,0,.45); padding: .5em 1em; display: none; } p.show { display: block; }

 <div class="overlay"> <div class="container"> <div class="title"> <h1>Number Generator</h1> <h3 class="nonsai">Non sai quali numeri giocare?</h3> <h3 class="tenta">Tenta la fortuna con l'algoritmo di<br> Number Generator!</h3> </div> <div class="numbers"> <div class="first number"></div> <div class="second number"></div> <div class="third number"></div> <div class="fourth number"></div> <div class="fifth number"></div> <div class="sixth number"></div> </div> <button class="button">Genera Numeri</button> <button class="clear">Refresh</button> </div> <p class="message">Puoi usare Number Generator una volta ogni ora</p> </div> <script src="main.js"></script>

Answer 1

我沒有閱讀你所有的代碼，但從解釋來看，如果你想限制用戶點擊按鈕，你似乎有錯誤的方法。 我認為您了解客戶端和服務器端計算。

所以，首先。 當然，您可以限制客戶端上的按鈕點擊，甚至以一致的方式（刷新后保存），但您應該記住，高級互聯網用戶將能夠輕松破解它，因為您只有一些標准選項來實現它。 其中之一是使用 cookie：當用戶單擊按鈕時，保存一個名為butttonClicked或 smth 的 cookie，值為true ，生命周期為 1 小時。 很容易在谷歌上搜索如何做到這一點。 在頁面加載時始終檢查是否設置了 cookie 並將disabled屬性附加到按鈕。 但 cookie 是可見的，用戶可以自己刪除它。

要真正限制它，您應該在服務器端進行一些檢查，以便即使用戶能夠以某種方式發送請求，無論前端是否禁用按鈕，您都應該停止執行操作並發回錯誤信息。

Answer 2

一種方法是使用瀏覽器的內置功能通過使用本地存儲來存儲特定域的數據。 一般來說，它可用於存儲任何類型的數據，但在您的情況下，它應該保持按鈕“重新激活”的時間。

讓我概述一下需要做的事情：

• 在頁面加載時，啟動一個計時器，它會在很短的時間間隔（例如 1 秒）內連續檢查存儲在本地存儲中的時間。

• 如果還沒有存儲時間，則存儲當前時間

• 如果有時間存儲並且是在將來，請禁用該按鈕

• 如果有時間存儲並且它是過去的，請啟用按鈕

• 如果用戶按下按鈕，則更新本地存儲中的值並禁用按鈕。

這是一個例子。 如果您單擊該按鈕，它將禁用它 3 秒鍾：

<html>
    <head>  
    </head>
    <body>
        <button id="button">click me</button>
    </body>
    <script type="text/javascript">
        var myButton=document.getElementById("button");
        function storeTime(theTime)
        {
            localStorage.setItem("time", theTime);
        }
        
        function check()
        {
            var now=new Date().getTime();
            if(!localStorage.getItem("time"))
            {
                storeTime(now);
            }
            var storedTime=parseInt(localStorage.getItem("time"));
            
            if(storedTime>now)
            {
                myButton.disabled=true;
            }
            else
            {
                myButton.disabled=false;
            }
        }
        
        function buttonClicked()
        {
            var now=new Date().getTime() + 3000;
            storeTime(now);
            myButton.disabled=true;
        }
        
        setInterval(check, 1000);
        check();
        myButton.addEventListener("click", buttonClicked);
    </script>
</html>

Answer 3

我有一個小應用程序，它生成1到90之間的數字。 我在練習早期的JS技能時就這么做了。

它是用意大利語寫的，所以為了更好地理解，標題並不重要，它只是說“想試試運氣嗎？” bla-bla。

然后，我設置了一個超時，該超時在單擊后將禁用“ Geneum Numeri”按鈕1小時（我將其設置為3秒），然后彈出一條消息（“您每小時可以使用一次”），但是如果您刷新頁面，當然，您可以再次單擊它。

我想知道，即使我刷新了，倒計時仍會繼續嗎？

我在他們談論Mongo時讀了另一個類似的問題（我不知道這是什么后端，我想知道是后端（？）），他們提到使用cookie來做到這一點，在我沒有經驗的人看來，這可能是有道理的。

無論如何，請在此處使用Javascript

let button = document.querySelector('.button')
let clear = document.querySelector('.clear')
let message = document.querySelector('.message')
let first = document.querySelector('.first')
let second = document.querySelector('.second')
let third = document.querySelector('.third')
let fourth = document.querySelector('.fourth')
let fifth = document.querySelector('.fifth')
let sixth = document.querySelector('.sixth')

button.addEventListener('click', ()=> {
  first.innerText = Math.floor(Math.random() * (90 - 1) + 1)
  second.innerText = Math.floor(Math.random() * (90 - 1) + 1)
  third.innerText = Math.floor(Math.random() * (90 - 1) + 1)
  fourth.innerText = Math.floor(Math.random() * (90 - 1) + 1)
  fifth.innerText = Math.floor(Math.random() * (90 - 1) + 1)
  sixth.innerText = Math.floor(Math.random() * (90 - 1) + 1)

  message.classList.add('show')

  button.disabled = true

  setTimeout(function(){
    button.disabled = false
    message.classList.remove('show')
  }, 1000 * 3) 

})


clear.addEventListener('click', ()=> {
  first.innerText = ''
  second.innerText = ''
  third.innerText = ''
  fourth.innerText = ''
  fifth.innerText = ''
  sixth.innerText = ''
})

並在此處摘錄

 let button = document.querySelector('.button') let clear = document.querySelector('.clear') let message = document.querySelector('.message') let first = document.querySelector('.first') let second = document.querySelector('.second') let third = document.querySelector('.third') let fourth = document.querySelector('.fourth') let fifth = document.querySelector('.fifth') let sixth = document.querySelector('.sixth') button.addEventListener('click', ()=> { first.innerText = Math.floor(Math.random() * (90 - 1) + 1) second.innerText = Math.floor(Math.random() * (90 - 1) + 1) third.innerText = Math.floor(Math.random() * (90 - 1) + 1) fourth.innerText = Math.floor(Math.random() * (90 - 1) + 1) fifth.innerText = Math.floor(Math.random() * (90 - 1) + 1) sixth.innerText = Math.floor(Math.random() * (90 - 1) + 1) message.classList.add('show') button.disabled = true setTimeout(function(){ button.disabled = false message.classList.remove('show') }, 1000 * 3) }) clear.addEventListener('click', ()=> { first.innerText = '' second.innerText = '' third.innerText = '' fourth.innerText = '' fifth.innerText = '' sixth.innerText = '' })

 * { margin: 0; padding: 0; box-sizing: border-box; } body { background-image: url('conf.jpg'); background-size: cover; background-repeat: no-repeat; height: 100vh; background-position-x: right; } .overlay { width: 100vw; height: 100vh; background: rgba(0,0,0,.3); } .container { width: 95vw; height: 420px; margin: auto; display: flex; flex-direction: column; border: 1px solid black; justify-content: space-around; align-items: center; text-align: center; font-family: helvetica; position: absolute; top: 40vh; left: 50vw; transform: translate(-50%, -50%); background: rgba(0,0,0,.75); color: white; border-radius: 15px; box-shadow: 0 0 15px black; padding-bottom: 1em; } .title { height: 50%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; text-align: center; letter-spacing: .5px; } h1 { font-family: verdana; border-bottom: 1px solid white; } .tenta { font-size: 1.25em; } .numbers { display: flex; width: 100%; justify-content: space-around; } .number { width: 50px; height: 50px; border-radius: 50%; border: 1px solid white; text-align: center; vertical-align: center; display: flex; justify-content: center; align-items: center; color: white; font-family: tahoma; font-size: 1.2em; background: black; } .button { padding: .5em 1.5em; font-size: 1.1em; border: none; background: white; border-radius: 5px; box-shadow: 0 0 10px black; transition: .2s linear; outline: none; background: rgb(0,255,117) } .button:active { transform: scale(.95); } .clear { padding: .2em .5em; position: absolute; bottom: 20px; right: 20px; border: none; background: white; border-radius: 5px; box-shadow: 0 0 10px black; transition: .2s linear; outline: none; } .clear:active { transform: scale(.95); } p { color: white; text-align: center; position: relative; top: calc(450px + 20vw); font-family: helvetica; font-size: 1.1em; margin: auto; background: rgba(0,0,0,.45); padding: .5em 1em; display: none; } p.show { display: block; }

 <div class="overlay"> <div class="container"> <div class="title"> <h1>Number Generator</h1> <h3 class="nonsai">Non sai quali numeri giocare?</h3> <h3 class="tenta">Tenta la fortuna con l'algoritmo di<br> Number Generator!</h3> </div> <div class="numbers"> <div class="first number"></div> <div class="second number"></div> <div class="third number"></div> <div class="fourth number"></div> <div class="fifth number"></div> <div class="sixth number"></div> </div> <button class="button">Genera Numeri</button> <button class="clear">Refresh</button> </div> <p class="message">Puoi usare Number Generator una volta ogni ora</p> </div> <script src="main.js"></script>