運算符 · JavaScript學習記錄

### 運算符 - 算數：` +加、-減、*乘、/ 除、%取模 ` - 實例：隔行變色、秒轉時間 - 賦值：` =、+=、-=、*=、/=、%= ` - ` +=` ： `i += 1 等于 i++ ` - 關系：` <、>、<=、>=、== 、===、!=、!==` - `!==` ：不同類型不比較，且無結果，同類型才比較，對應 `===` - `!=`：若類型不同，會償試轉換類型，對應 `== ` - 邏輯：&&與、||或、!否 - 實例：全選與反選 - 運算符優先級：括號 - 代碼： ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>運算符</title> <style> .blue { width: auto; height: 20px; background: blue; } .yellow { width: auto; height: 20px; background: yellow; } </style> <script> window.onload = function () { // 封裝 getElementById 函數 function get(id) { return document.getElementById(id); } // 封裝 getElementsByTagName function gets(tagName) { return document.getElementsByTagName(tagName) } // 隔行變色 function liCol() { let i = 0; let oLi = gets('li') ; for (i = 0; i < oLi.length; i++) { if (i % 2 === 0) { oLi[i].className = 'blue'; } else { oLi[i].className = 'yellow'; } } } liCol(); // 毫秒轉日期 const date = Date.now(); // 60000ms / 1000ms /60s /60m /24h /365d const millisecond = date % 1000 + '毫秒'; const second = parseInt(date/1000) % 60 + '秒'; const minute = parseInt(date/1000/60) % 60 + '分'; const hour = parseInt(date/1000/60/60) % 24 + 8 + '小時'; const day = parseInt(date/1000/60/60/24/365) % 30 - 9 + '號'; const month = parseInt(date/1000/60/60/24/30) % 12 + 4 + '月'; const year = parseInt(date/1000/60/60/24/265) + 1951 +'年'; const d1 = get('d1'); d1.innerHTML = millisecond+ second+ minute+ hour+ day+ month+ year; } // 賦值 ` =、+=、-=、*=、/=、%= ` let i = 11; i += 2; console.log(i); i -= 3; console.log(i); i *= 2; console.log(i); i /= 2; console.log(i); i %= 3; console.log(i); // 判斷 <、>、<=、>=、== 、===、!=、!== if (i > 0) { console.log('i > 0'); } if (i <= i) { console.log('i <= i'); } if (i == '1') { console.log('i == "1"') } if (i === 1) { console.log('i === 1') } if (i != '1') { console.log('i != 2') } if (i !== 1) { console.log('i !== 1') } // 邏輯 &&與、||或、!否 if (i<2 && i>0) { console.log('i<2 && i>0') } if (i<2 || i<0) { console.log('i<2 || i<0') } </script> </head> <body> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div id="d1"></div> </body> </html> ```