JS 簡易日歷 · JavaScript學習記錄

### JS 簡易日歷 - 程序實現思路 - 類似于選項卡，只是下面只有一個div - innerHTML 的使用 - 數組的使用 - 定義：` arr = [1, 2, 3] ` - 使用：` arr[0] ` - 字符串拼接 - 作用：拼接兩個字符串 - 問題：拼接中的優先級 - 就近相加, 字符串后面數字相加要加括號 - 代碼: ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>簡易日歷</title> <style> body { margin: 0; padding: 0; } td { border: 5px solid rgb(218, 218, 218); width: 59px; height: 59px; text-align: center; background: rgb(83, 83, 83); color: white; } .td { background: rgb(255, 255, 255); color: rgb(0, 0, 0); } /* 日歷數字區 */ #t1 { border: 10px solid rgb(218, 218, 218); margin:0 auto; position: relative; width: 240px; height: 320px; background: rgb(218, 218, 218); } /* 下方文字 */ #d2 { margin:0 auto; width: 240px; height: 100px; background: rgb(218, 218, 218); } #p1 { position: relative; margin: auto; width: 205px; height: 80px; background: rgb(255, 255, 255); } </style> <script> window.onload = function () { // 封裝 getElementById 函數 function get(id) { return document.getElementById(id); } // 封裝 getElementsByTagName function gets(tagName) { return document.getElementsByTagName(tagName) } // 獲取所有 td，注冊 onmouseover 事件，添加索引 // console.log(gets('td')) var tds = gets('td'); var i = 0; for (i = 0; i < tds.length; i++) { tds[i].index = i; tds[i].onmouseover = function () { // 先清空 td className for (a = 0; a < tds.length; a++) { tds[a].className = ''; } // 修改td className 并插入文字 tds[this.index].className = 'td'; // console.log(i); get('p1').innerHTML = (this.index + 1) + arr[this.index]; } } arr = [ '月活動：學編程、英語', '月活動：學編程、英語', '月活動：學編程、日語', '月活動：學編程、畫畫', '月活動：學編程、旅游', '月活動：學編程', '月活動：學編程', '月活動：學編程', '月活動：學編程', '月活動：學編程', '月活動：學編程', '月活動：學編程' ] } </script> </head> <body> <div id="d1"> <table id="t1"> <tr> <td>1 <br>JAN</td> <td>2 <br>FER</td> <td>3 <br>MAR</td> </tr> <tr> <td>4 <br>APR</td> <td>5 <br>MAY</td> <td>6 <br>JUN</td> </tr> <tr> <td>7 <br>JUL</td> <td>8 <br>AUG</td> <td>9 <br>SEP</td> </tr> <tr> <td>10 <br>OCT</td> <td>11 <br>NOV</td> <td>12 <br>DEC</td> </tr> </table> <div id="d2"> <p id="p1"> </p> </div> </div> </body> </html> ```