第一个 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> ```