如何在点击后24小时内禁用html按钮

Question

我正在尝试创建一个html表单按钮，该按钮在单击后禁用，并将在24小时后启用。该按钮应适用于每个用户。我该怎么解决？

<p>
<input type='submit' value='Submit' id='btClickMe' 
onclick='save(); this.disabled = true;' />
</p>
<p id="msg"></p>
<script>
function save() {
var msg = document.getElementById('msg');
       msg.innerHTML = 'Data submitted and the button disabled in 24hrs  &#9786;';
}
</script>

Answer 1

将点击后的标识符存储到cookie中，该标识符在点击第一个按钮后24小时后过期(使用document.cookie(

<input
type="submit"
value="Submit"
id="btClickMe"
/>
<div id="msg">Message Here</div>

const btn = document.getElementById("btClickMe");
let get = getCookie("clicked"); // check cookie after page loaded
if (get) {
btn.disabled = true; // disable the button after page loaded
}
btn.addEventListener("click", function (_event) {
get = getCookie("clicked"); // check cookie exist
if (!get) setCookie("clicked", "true", 1); // set cookie after clicked
btn.disabled = true; // disable the button after button clicked
var msg = document.getElementById("msg");
msg.innerHTML = "Data submitted and the button disabled in 24hrs  ☺";
});
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}

参见演示