Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
devwiki:javascript [2022/03/27 14:06] – [array operation] ying | devwiki:javascript [2024/02/03 15:18] (current) – [Timer operation] ying | ||
---|---|---|---|
Line 64: | Line 64: | ||
// also add new to coffee queue normall | // also add new to coffee queue normall | ||
coffee_queue.push(' | coffee_queue.push(' | ||
+ | </ | ||
+ | |||
+ | ====== UI interaction operation ====== | ||
+ | |||
+ | * scroll to top for scrollable element <code javascript> | ||
+ | document.getElementById(" | ||
+ | |||
+ | #css part | ||
+ | .coinbox_content{ | ||
+ | float: left; | ||
+ | width: 430px; | ||
+ | height: 100%; | ||
+ | overflow: auto; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ====== Timer operation ====== | ||
+ | |||
+ | * If the timer is intended to run indefinitely and you want a continuous countdown, the setInterval method is a simple and suitable choice. To stop, you need to explicitly clear it using clearInterval. | ||
+ | * If you want more control over the execution, especially if there are additional conditions for stopping or restarting the timer, the setTimeout recursive approach might be preferred. | ||
+ | |||
+ | <code javascript> | ||
+ | let timer = 5 * 60; // Convert minutes to seconds | ||
+ | const timerIndicator = document.getElementById(' | ||
+ | |||
+ | // method a: Display count down, bad: will still run after time=0 | ||
+ | setInterval(function() { | ||
+ | timer--; | ||
+ | timerIndicator.textContent = formatTimer(timer); | ||
+ | if (timer <= 0) { | ||
+ | alert(' | ||
+ | } | ||
+ | }, 1000); | ||
+ | |||
+ | // method b: will not run after time=0 | ||
+ | function updateTimer() { | ||
+ | timer--; | ||
+ | timerIndicator.textContent = formatTimer(timer); | ||
+ | if (timer <= 0) { | ||
+ | alert(' | ||
+ | } else { | ||
+ | setTimeout(updateTimer, | ||
+ | } | ||
+ | } | ||
+ | updateTimer(); | ||
+ | // end of method b | ||
+ | |||
+ | function formatTimer(seconds) { | ||
+ | const minutes = Math.floor(seconds / 60); | ||
+ | const remainingSeconds = seconds % 60; | ||
+ | return `${String(minutes).padStart(2, | ||
+ | } | ||
</ | </ | ||