Differences

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

--- devwiki:javascript [2022/02/05 18:05] – [HTML5 and Javscript] ying
+++ devwiki:javascript [2024/02/03 15:17] – [UI interaction operation] ying
@@ Line 42: / Line 42: @@
   * button click confetti:
     * https://codemyui.com/confetti-pop-out-on-button-click/
+====== array operation ======
+  * array to string <code javascript>
+const fruits = ["Banana", "Orange", "Apple", "Mango"];
+let text = fruits.join(';');
+</code>
+  * process array <code javascript>
+// process like police man in back-door truck, first in last out, last in first out
+let truck_queue = ['Bob', 'Willy', 'Mini'];
+deploy_police = main_queue.pop(); // left ['Bob', 'Willy'] output 'Mini'
+// add new police
+cats.push('Puff', 'George'); // left ['Bob', 'Willy', 'Puff', 'George']
+// process like coffee shop, first in first out, last in last out
+let coffee_queue = ['Bob', 'Willy', 'Mini'];
+cur_customer = coffee_queue.shift(); // left ['Willy', 'Mini'], output 'Bob'
+// 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.
+  * 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>
 ====== HTML5 and Javscript ======
@@ Line 62: / Line 137: @@
 console.log(utc_date)
 document.cookie = "user=lucy;expires="+utc_date+";SameSite=lax" // cookie with expire date in UTC standard format
+document.cookie = "score=121;expires="+utc_date+";SameSite=lax";
+// read cookie
+function getCookie(name) {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop().split(';').shift();
+}
+console.log(document.cookie)
+console.log(getCookie('user'))
+//to remove cookie, just set expire to early date
 </code>
   * note on SameSite attribute needed nowadays to secure cookie been sent to 3rd site: