簡單 javascript 條件

Question

我想要實現的是，如果 d1 和 d2 之間的時間范圍與我們的系統時間相匹配，那么在單擊將觸發“myFunction”的“試用”按鈕后應該顯示“#timer”。 在所有其他情況下，“#timer”不應在頁面加載時可見。 現在，即使在單擊試用按鈕之前，“#timer”也是可見的。 現在時間與系統時間不匹配，仍然顯示。 我不知道我錯在哪里。 會感謝那些可以幫助我的人。

 function myFunction() { var currentdate = new Date(); var d1 = new Date("2021-05-18 03:32:00"); var d2 = new Date("2021-05-18 03:33:00"); if ((currentdate >= d1) && (currentdate <= d2)) { document.getElementById("timer").style.display = "block"; } else { document.getElementById("timer").style.display = "none"; } };

 #timer{ width:100px; height:100px; background:#ff934f; }

 <button onclick="myFunction()">Try it</button> <div id="timer"></div>

Answer 1

用 setInterval 看時鍾

您需要一個大部分時間都禁用的按鈕，但在很短的 window 時間內啟用。

首先，一個警告：不要依賴這個來保證安全； 黑客要打敗這一點將是微不足道的。 但是，對於玩具應用程序，或者如果您的所有用戶都可以被信任遵守規則，這很好。

您只需要 javascript。 HTML 和 CSS 無關緊要，除了確定要禁用/啟用哪個元素。

let MY_BUTTON = document.getElementById('timer')
let START_DATE = new Date( /* TBD */ )
let END_DATE = new Date( /* TBD */ )

/*
    Watch the clock / like a hawk
*/
setInterval(
    () => timelockElement(MY_BUTTON, START_DATE, END_DATE),
    250 // see note
)

/*
    Keep an element disabled unless the current time is between two dates
*/
function timelockElement( element, activateAt, deactivateAt ) {
    // check enablement window
    let now = new Date()
    let elementShouldBeEnabled = dateIsBetween(now, activateAt, deactivateAt)
    
    // apply current verdict to page
    element.setAttribute('disabled', !elementShouldBeEnabled)
}

/*
    Does date A fall between dates B & C?
*/
function dateIsBetween( myDate, d1, d2 ) {
    // put all three dates in order
    let ordered = [ myDate, d1, d2 ].sort()
    
    // myDate falls between them IFF it's the one in the middle
    return ordered[1] === myDate
}

希望這並不難理解：

• 每秒幾次，將當前時間戳與固定的開始和結束時間戳進行比較
• 更新#timer上的enabled屬性以反映該比較的結果

我做了幾個值得注意的選擇：

• 250每秒將檢查時鍾約 4 次。 對您而言，最佳價值取決於您希望更新的實時性，哪個決定本身對 window 長度以及您的用戶自己觀看時鍾的可能性很敏感。 例如：網上購票的人希望您使用原子鍾並以普朗克時間更新； 等待戳他們的 tamagochi 的人可能每三秒檢查兩次。
• 這種檢查日期的技術會自動更正您的開始和結束時間。 我認為這是合理的，但是如果您需要構建一個盲目地尊重錯誤配置的應用程序，您將不得不更改dateIsBetween的實現。 它也不包括 window 端點，這只有在某個用戶的計時器在開始或結束時間的精確毫秒觸發時才有意義。
• 我使用setInterval而不是setTimeout 。 很多時候，即使行為必須無限重復， setTimeout也是時間重復行為的最佳工具，因為當心跳 function 長時間運行時， setTimeout對尾遞歸的依賴可以幫助您避免重疊心跳。 這是非常重要的。 在這種情況下我沒有打擾，因為工作量微不足道。

而且，正如其他人所指出的，您可能錯誤地配置了您的測試日期（除非您真的在格林威治標准時間凌晨 3 點進行此工作）。