Differences

This shows you the differences between two versions of the page.

--- devwiki:javascript [2022/03/27 14:05] – [array operation] ying
+++ devwiki:javascript [2024/02/03 15:18] (current) – [Timer operation] ying
@@ Line 61: / Line 61: @@
 // also can cut queue to like this
 coffee_queue.unshift('Puff', 'George'); // ['Puff', 'George', 'Willy', 'Bob']
+// also add new to coffee queue normall
+coffee_queue.push('Sam'); // ['Puff', 'George', 'Willy', 'Bob', 'Sam']
+</code>
+====== UI interaction operation ======
+  * scroll to top for scrollable element <code javascript>
+document.getElementById("coinbox_content").scrollTop = 0
+#css part
+.coinbox_content{
+    float: left;
+    width: 430px;
+    height: 100%;
+    overflow: auto;
+}
+</code>
+====== 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('timerIndicator');
+// method a: Display count down, bad: will still run after time=0
+setInterval(function() {
+    timer--;
+    timerIndicator.textContent = formatTimer(timer);
+    if (timer <= 0) {
+        alert('Form submit');
+    }
+}, 1000);
+// method b: will not run after time=0
+function updateTimer() {
+    timer--;
+    timerIndicator.textContent = formatTimer(timer);
+    if (timer <= 0) {
+        alert('Form submit');
+    } else {
+        setTimeout(updateTimer, 1000);
+    }
+}
+updateTimer(); // Start the timer.
+// end of method b
+function formatTimer(seconds) {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
+}
 </code>