即使用户刷新页面，如何保持按钮禁用？ Javascript
[英]How to keep button disabled even if user refreshes the page? Javascript
问题描述
I have this little app that generates numbers between 1 and 90 .
我有这个小应用程序，可以生成 1 到 90 之间的数字。 I do it as I'm practicing with my early JS skills.我这样做是因为我正在练习我早期的 JS 技能。
It's written in italian so for better understanding, well the title doesn't matter that much, it just says "wanna try your luck?"它是用意大利语写的，所以为了更好地理解，标题并不那么重要，它只是说“想试试你的运气吗？” bla-bla.布拉布拉。
Then I set a timeout that disables the "Genera Numeri" button for 1 hour after it's clicked ( I set it to 3 seconds for the post ), and a message pops up (" You can use it once every hour ") but if you refresh the page, of course, you can click it again.然后我设置了一个超时，在点击后禁用“Genera Numeri”按钮 1 小时（我将其设置为 3 秒后发布），并弹出一条消息（“您可以每小时使用一次”）但如果您刷新页面，当然可以再次点击。
I was wondering, how can I make it that even if I refresh, the countdown would be still going?我想知道，我怎样才能做到即使我刷新，倒计时也会继续？
I read another similar question where they were talking about Mongo (which I have no clue what it is, I suppose back end (?) ), and they mentioned the use of cookies to do that, which in my inexperienced eyes, could make sense.我读了另一个类似的问题，他们在谈论 Mongo（我不知道它是什么，我想是后端（？）），他们提到使用 cookie 来做到这一点，在我没有经验的眼中，这可能是有道理的.
Anyways, HERE the Javascript无论如何，这里是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 = ''
})
And HERE the snippet和这里的片段
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>2 个解决方案
解决方案1
2 2020-10-01 10:55:16
I didn't read all your code but from the explanation it seems like you have wrong approach in general if you want to restrict the user from clicking the button.我没有阅读你所有的代码，但从解释来看，如果你想限制用户点击按钮，你似乎有错误的方法。 I think you are aware of the client and server side computation.我认为您了解客户端和服务器端计算。
So, first of all.所以，首先。 Surely you can restrict button clicks on client side and even in a consistent way (saving it after refresh) but you should keep in mind that an advanced internet user will be able to hack it easily because you have just some standart options to achieve it.当然，您可以限制客户端上的按钮点击，甚至以一致的方式（刷新后保存），但您应该记住，高级互联网用户将能够轻松破解它，因为您只有一些标准选项来实现它。 One of them is using cookies: When user clicks a button save a cookie with name butttonClicked or smth with value true and a lifetime of 1 hour.其中之一是使用 cookie：当用户单击按钮时，保存一个名为butttonClicked或 smth 的 cookie，值为true ，生命周期为 1 小时。 Its easy googlable how to do it.很容易在谷歌上搜索如何做到这一点。 On page load always check if the cookies is set and attach attribute disabled to button.在页面加载时始终检查是否设置了 cookie 并将disabled属性附加到按钮。 but cookies are visible and user can delete it himself.但 cookie 是可见的，用户可以自己删除它。
To really restrict it you should make some checks on the server side so that even if user was able to send a request somehow, no matter the button was disabled or no on the front end, you should stop performing an action and send back an error message.要真正限制它，您应该在服务器端进行一些检查，以便即使用户能够以某种方式发送请求，无论前端是否禁用按钮，您都应该停止执行操作并发回错误信息。
解决方案2
1 2020-10-01 11:40:46
One way to do this would be using the browser's built-in capability to store data for a particular domain by utilizing the local storage .一种方法是使用浏览器的内置功能通过使用本地存储来存储特定域的数据。 In general it can be used to store any kind of data but in your case it should hold the time your button gets 'reactivated'.一般来说，它可用于存储任何类型的数据，但在您的情况下，它应该保持按钮“重新激活”的时间。
Let me outline what needs to be done:让我概述一下需要做的事情：
at page load, start a timer which continuously checks the time stored in the local storage in a short interval of eg 1 second.
在页面加载时，启动一个计时器，它会在很短的时间间隔（例如 1 秒）内连续检查存储在本地存储中的时间。if there is no time stored yet, store the current time
如果还没有存储时间，则存储当前时间if there is a time stored and it's in the future, disable the button
如果有时间存储并且是在将来，请禁用该按钮if there is a time stored and it's in the past, enable the button
如果有时间存储并且它是过去的，请启用按钮If the user presses the button, update the value in the local storage and disable the button.
如果用户按下按钮，则更新本地存储中的值并禁用按钮。
Here's an example.这是一个例子。 If you click on the button, it will disable it for 3 seconds:如果您单击该按钮，它将禁用它 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>
解决方案3
-2 2020-10-01 10:59:01
I have this little app that generates numbers between 1 and 90 .我有一个小应用程序，它生成1到90之间的数字。 I do it as I'm practicing with my early JS skills.我在练习早期的JS技能时就这么做了。
It's written in italian so for better understanding, well the title doesn't matter that much, it just says "wanna try your luck?"它是用意大利语写的，所以为了更好地理解，标题并不重要，它只是说“想试试运气吗？” bla-bla. bla-bla。
Then I set a timeout that disables the "Genera Numeri" button for 1 hour after it's clicked ( I set it to 3 seconds for the post ), and a message pops up (" You can use it once every hour ") but if you refresh the page, of course, you can click it again.然后，我设置了一个超时，该超时在单击后将禁用“ Geneum Numeri”按钮1小时（我将其设置为3秒），然后弹出一条消息（“您每小时可以使用一次”），但是如果您刷新页面，当然，您可以再次单击它。
I was wondering, how can I make it that even if I refresh, the countdown would be still going?我想知道，即使我刷新了，倒计时仍会继续吗？
I read another similar question where they were talking about Mongo (which I have no clue what it is, I suppose back end (?) ), and they mentioned the use of cookies to do that, which in my inexperienced eyes, could make sense.我在他们谈论Mongo时读了另一个类似的问题（我不知道这是什么后端，我想知道是后端（？）），他们提到使用cookie来做到这一点，在我没有经验的人看来，这可能是有道理的。
Anyways, HERE the Javascript无论如何，请在此处使用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 = ''
})
And HERE the snippet并在此处摘录
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.