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/02/05 18:00] – [HTML5 and Javscript] ying | devwiki:javascript [2024/02/03 15:18] (current) – [Timer operation] ying | ||
---|---|---|---|
Line 42: | Line 42: | ||
* button click confetti: | * button click confetti: | ||
* https:// | * https:// | ||
+ | |||
+ | ====== array operation ====== | ||
+ | * array to string <code javascript> | ||
+ | const fruits = [" | ||
+ | let text = fruits.join(';' | ||
+ | </ | ||
+ | * process array <code javascript> | ||
+ | // process like police man in back-door truck, first in last out, last in first out | ||
+ | let truck_queue = [' | ||
+ | deploy_police = main_queue.pop(); | ||
+ | // add new police | ||
+ | cats.push(' | ||
+ | |||
+ | // process like coffee shop, first in first out, last in last out | ||
+ | let coffee_queue = [' | ||
+ | cur_customer = coffee_queue.shift(); | ||
+ | |||
+ | // also can cut queue to like this | ||
+ | coffee_queue.unshift(' | ||
+ | |||
+ | // also add new to coffee queue normall | ||
+ | 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, | ||
+ | } | ||
+ | </ | ||
====== HTML5 and Javscript ====== | ====== HTML5 and Javscript ====== | ||
Line 56: | Line 131: | ||
localStorage.clear() | localStorage.clear() | ||
+ | // cookie is simple, all in 1 line text, that is for all keys and datas | ||
document.cookie = " | document.cookie = " | ||
utc_date = new Date(" | utc_date = new Date(" | ||
console.log(utc_date) | console.log(utc_date) | ||
- | document.cookie = " | + | document.cookie = " |
+ | document.cookie = " | ||
+ | |||
+ | // read cookie | ||
+ | function getCookie(name) { | ||
+ | const value = `; ${document.cookie}`; | ||
+ | const parts = value.split(`; | ||
+ | if (parts.length === 2) return parts.pop().split(';' | ||
+ | } | ||
+ | console.log(document.cookie) | ||
+ | console.log(getCookie(' | ||
+ | |||
+ | //to remove cookie, just set expire to early date | ||
</ | </ | ||
* note on SameSite attribute needed nowadays to secure cookie been sent to 3rd site: | * note on SameSite attribute needed nowadays to secure cookie been sent to 3rd site: | ||
+ | * option: (SameSite=lax) for normal, (SameSite=strict) for same url, (SameSite=None; | ||
* https:// | * https:// | ||
* https:// | * https:// | ||