我正在嘗試創建一個 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 ☺';
}
</script>
uj5u.com熱心網友回復：
將點擊的識別符號存盤到從第一個按鈕點擊后 24 小時后過期的 cookie（使用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;
}
看演示
uj5u.com熱心網友回復：
因此，您存盤最后一次點擊時間localStorage并在加載頁面時恢復它。我用秒計算差異。請注意：localStorage不適用于此沙盒。但它應該適合你。
function save() {
var now = Math.round(new Date().getTime() / 1000);
localStorage.setItem("last_save", now)
// ...
}
window.addEventListener('load', function() {
var now = Math.round(new Date().getTime() / 1000);
var then = localStorage.getItem("last_save") || 0;
var diff_seconds = now - then
if (diff_seconds > 24 * 60 * 60) {
document.querySelector("button").disabled = false;
}
})<button disabled>save</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/510083.html