第一個 JS 特效：鼠標提示框 · JavaScript學習記錄

### 第一個 JS 特效：鼠標提示框 - 分析效果實現原理 - 樣式：`div` 的 `display / none` - 事件：`onmouseover / onmouseout` - 動手編寫效果 - 特效基礎 - 事件驅動：`onmouseover` - 元素屬性操作：`obj.style.[...]` - 特效實現原理概括：響應式用戶操作，對頁面元素樣式修改 - 兼容性問題 ```js // div2.style.display='block'; // 部分瀏覽器不兼容 document.getElementById('div2').style.display='block'; // 所有瀏覽器兼容 ``` - 函數 - 制作更復雜的效果 - 直接在事件內寫代碼會很亂 - 引入 `function()` 函數的基本形式 - 把 JS 標簽里放入到函數里，類似于 css 里的 `class` - 變量的使用：別名 - 定義和調用 - 函數定義：告訴系統有這個函數，不會執行 - 函數調用：執行函數里面的代碼 - 關系和區別 - 代碼 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一個JS效果</title> <style> #div2 { display: none; background: red; width: 100px; height: 50px; font-size: 16px; } #div1 { display: block; background: red; width: 100px; height: 100px; font-size: 16px; } </style> <script> // 封裝 getElementById 函數 function get(id) { return document.getElementById(id); } // 顯示 div2 function show() { // div2.style.display='block'; // 部分瀏覽器不兼容 get('div2').style.display='block'; } // 隱藏 div2 function hide() { // div2.style.display='none'; // 部分瀏覽器不兼容 get('div2').style.display='none'; } // div1 變綠 function toGreen() { get('div1').style.background='green'; } // div1 變藍 function toblue() { get('div1').style.background='blue'; } // div1 變紅 function toRed() { get('div1').style.background='red'; } // 點擊循環變色 var i = 0; function changeColor() { console.log('i=',i) if (i == 0) { toGreen(); i++; console.log('i=',i) return; } if (i == 1) { toblue(); i++; console.log('i=',i) return; } if (i == 2) { toRed(); i = i - 2; console.log('i=',i) return; } } </script> </head> <body>  <input type="button" onclick="changeColor()" value="按鈕"> <div id="div1"> </div>  <input type="checkbox" onmouseover="div2.style.display='block';" onmouseout="div2.style.display='none';" value="按鈕"> <div id="div2"> <p>文字<br>文字2</p> </div> </body> </html> ```