Posts

Timer

Javascript timer function can make some code be excueted repeatedly over time. Syntax: // open setInterval(function,interaval-time) // close let t = setInterval(function,interaval-time) clearInterval(t) t: variable interaval-time unit: ms Example: <body> <button class="btn" disabled>aggree(5)</button> <script> const btn = document.querySelector('.btn') let i = 5 let timer = setInterval(function(){ i-- btn.innerHTML = `aggree(${i})` if (i === 0){ clearInterval(timer) btn.disabled = false btn.innerHTML = 'aggree' } },1000) </script> </body>

Control CSS using classList

ClassList can help reduce the redundancy of .style method and resolve the ClassName overwrite risk. Sytax: // add a class element.classList.add('className') // delete a class element.classList.remove('className') // switch a class element.classList.toggle('className') Example: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 200px; height: 200px; color: #333; } .active { color: red; background-color: pink; } </style> </head> <body> <div class="box">text</div> <script> //get element const box = document.querySelector('.box') //change stylew by adding class box.classList.add('active') // delete class box.classList.remove('active') //switch class box.classList.toggle('active') </script> </body> </html> keep in mind that the running logic of toggle is run the detect if the class existed in the element, if yes, delete, if no, add up ...

DOM -- Document Object Model

DOM query Slect first match element document.querySelector('css selector') Slect all match element document.querySelectorAll('css selector') return is fake array which no work with push and pop method Modification using DOM modify text content <body> <div class="box">content</div> <script> const box = document.querySelector('.box') box.innerText = 'content changed' box.innerHTML = '<strong>content changed</strong>' </script> </body> innerText method will not parse tags, exp: <strong>hello</strong> will return <strong>hello</strong> rather hello

Git classic workflow and merge conflict solution

Mearge conflict resolution: Edit the confilct file manually and then commit to branch

How to enter QNAP NAS Mega CMD

Mega CMD is an software that provide similar function of QNAP HBS, but I don’t know why they can’t just integrated their function into HBS. And it is a command line system, though I’m not afraid of command but it truly increase the inconvenience for those who just want to make a backup. Most seriously, the way to enter the cmd window won’t show up on their readme.md but only in the introduction of the app store, with an very blurry picture. That’s ridiculous. I hope they can make the doc clearer in the future.