javascript技巧收集(200多个)
根据给定的信息,我们可以整理出一系列与JavaScript相关的实用技巧,涉及事件处理、样式调整、页面控制等多个方面。接下来,我们将详细解析这些技巧及其应用场景。 ### 1. JavaScript 事件处理 - **`onBlur`**: 当元素失去焦点时触发。例如,一个文本框在用户点击其他地方或按下Tab键时会触发此事件。 示例代码: ```html <input type="text" value="示例文本" onblur="if (this.value == '') { this.value = '示例文本' }"> ``` - **`onFocus`**: 当元素获得焦点时触发。通常用于输入框的提示信息处理。 示例代码: ```html <input type="text" value="示例文本" onfocus="if (this.value == '示例文本') { this.value = '' }"> ``` - **`onChange`**: 当元素的状态发生变化时触发,比如选中了一个新的选项或改变了输入框的内容。 示例代码: ```html <input type="text" value="示例文本" onchange="console.log('值已改变')"> ``` - **`onSelect`**: 当文本被选中时触发。 示例代码: ```html <input type="text" value="示例文本" onselect="console.log('文本被选中')"> ``` ### 2. 修改元素样式 - **通过内联样式修改按钮背景色**: 示例代码: ```html <input type="button" name="Submit1" value="示例按钮" size="10" class="s02" style="background-color: rgb(235, 207, 22)"> ``` - **鼠标移入移出时改变文字颜色**: 示例代码: ```html <input type="submit" value="示例按钮" name="B1" onMouseOut="this.style.color='blue'" onMouseOver="this.style.color='red'" class="button"> ``` - **设置输入框样式**: 示例代码: ```html <input type="text" name="nick" style="border: 1px solid #666666; font-size: 9pt; height: 17px; BACKGROUND-COLOR: #F4F4FF; color: #ff6600" size="15" maxlength="16"> ``` ### 3. 页面操作 - **调整窗口大小**:通过JavaScript脚本直接设置浏览器窗口的大小。 示例代码: ```javascript window.resizeTo(300, 283); ``` - **滚动文字**:利用`<marquee>`标签实现自动滚动的文字效果。 示例代码: ```html <marquee direction="up" scrollamount="1" scrolldelay="100" onmouseover="this.stop()" onmouseout="this.start()" height="60"> <!-- 内容 --> </marquee> ``` ### 4. 其他技巧 - **状态栏提示**:当鼠标悬停在元素上时,在浏览器的状态栏显示提示信息。 示例代码: ```html <base onMouseover="window.status='访问 http://www.webmake.cn/'; return true"> ``` - **单选按钮选择**:通过HTML结构实现单选按钮的选择和显示。 示例代码: ```html <input type="radio" name="regtype" value="A03" id="A03"> <label for="A03">选择示例</label> ``` - **字体大小调整**:虽然例子中的代码片段不完整,但可以理解为通过事件触发来调整字体大小。 - **打印当前页面**:通过JavaScript调用`window.print()`方法来实现打印功能。 示例代码: ```html <a href='javascript:window.print()'>打印页面</a> ``` - **获取最后修改时间**:通过JavaScript函数获取当前页面的最后修改时间,并弹窗显示。 示例代码: ```javascript function hi(str) { document.write(document.lastModified); alert("hi" + str + "!"); } ``` - **鼠标悬浮时执行函数**:当鼠标悬浮在特定元素上时,调用预先定义好的JavaScript函数。 示例代码: ```html <a href="" onMouseOver="hello()">链接</a> <script language="LiveScript"> function hello() { alert("!"); } </script> ``` - **背景色选择器**:允许用户选择页面的背景颜色。 示例代码: ```html <script> function bgChange(selObj) { var newColor = selObj.options[selObj.selectedIndex].text; document.bgColor = newColor; selObj.selectedIndex = -1; } </script> <select size="8" onchange="bgChange(this)"> <!-- 选项列表 --> </select> ``` 以上是基于给定的文件信息整理出的JavaScript技巧汇总。这些技巧涵盖了从简单的事件处理到复杂的页面控制等多方面的应用,可以帮助开发者更好地理解和掌握JavaScript编程技术。
- 粉丝: 0
- 资源: 4
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助