JS(javaScript)常用200个技巧
JavaScript,简称JS,是Web开发中的重要脚本语言,用于实现客户端的交互和动态效果。以下是一些基于提供的文件内容的JavaScript技巧: 1. **事件处理**:`onBlur`, `onFocus`, `onChange`, `onSelect` 是常见的HTML事件。`onBlur` 在元素失去焦点时触发,`onFocus` 在元素获得焦点时触发,`onChange` 在表单元素的值改变时触发,`onSelect` 在用户选择文本时触发。例如,在输入框中设置默认值,当焦点离开后恢复默认值: ```html <input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onblur="if (value=='') {value='郭强'}"> ``` 2. **自定义样式**:可以通过CSS为按钮添加特殊颜色,如背景色、边框等,以实现视觉效果: ```html <input type=button name="Submit1" value="郭强" size=10 class=s02 style="background-color:rgb(235,207,22)"> ``` 3. **鼠标悬停效果**:使用`onMouseOver` 和 `onMouseOut` 事件可以改变元素的颜色,增强用户交互体验: ```html <input type="submit" value="找吧" name="B1" onMouseOut="this.style.color='blue'" onMouseOver="this.style.color='red'" class="button"> ``` 4. **平面按钮和输入框**:通过CSS设置边框、高度、宽度、字体大小和颜色,可以创建具有不同外观的按钮和输入框: ```html <input type=submit value=订阅 style="border:1px solid #666666; height:17px; width:25pt; font-size:9pt; BACKGROUND-COLOR: #E8E8FF; color:#666666"> <input type="text" name="T1" size="20" style="border-style: solid; border-width: 1"> ``` 5. **颜色变化**:可以利用CSS改变元素的背景颜色和文本颜色,以响应用户的交互行为: ```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"> ``` 6. **选中输入框**:使用`onFocus` 事件,可以使输入框在获取焦点时自动选中其内容,方便用户编辑: ```html <input type="text" name="key" size="12" value="关 键 字 " onFocus="this.select()" onMouseOver="this.focus()" class="line"> ``` 7. **调整窗口大小**:通过JavaScript的`window.resizeTo()` 方法可以调整浏览器窗口的大小: ```javascript <script> window.resizeTo(300,283); </script> ``` 8. **滚动文字**:使用`<marquee>` 标签可以实现文字的滚动效果,通过`direction`、`scrollamount` 和 `scrolldelay` 属性控制滚动方向和速度: ```html <marquee direction="up" scrollamount="1" scrolldelay="100" onmouseover='this.stop()'onmouseout='this.start()' height=60> <!-- 文字内容 --> </marquee> ``` 9. **状态栏显示**:通过`<base>` 标签的 `onmouseover` 事件,可以在鼠标悬停时改变浏览器状态栏的内容: ```html <base onmouseover="window.status='网站建设 http://www.webmake.cn/';return true"> ``` 10. **关联Radio按钮和文字**:使用`<label>` 标签可以与`<input type="radio">` 配合,实现点击文字即可选择Radio选项: ```html <input type="radio" name="regtype" value="A03" id="A03"> <label for="A03">情侣 : 一次注册两个帐户</label> ``` 11. **在文本域中使用`onclick`**:文本域(`<textarea>`)也可以响应`onclick`事件,用于执行某些JavaScript函数或操作。 12. **打印功能**:在链接上设置`onclick` 事件,调用`window.print()` 可以实现网页打印功能: ```html <a href='javascript:window.print ()'>打印网页</a> ``` 13. **线型输入框**:通过CSS实现输入框的线型效果,增加用户体验: ```html <input type="text" name="key" size="12" value="关 键 字 " onFocus="this.select()" onMouseOver="this.focus()" class="line"> ``` 14. **显示文档最后修改日期**:通过JavaScript获取`document.lastModified` 属性,可以显示文档的最后修改日期: ```javascript <script> function hi(str) { document.write(document.lastModified); alert("hi" + str + "!"); } </script> ``` 15. **鼠标悬停触发事件**:使用`onMouseOver` 事件,可以在鼠标移到文字上时触发提醒或其他动作: ```html <a href="" onMouseOver="hello()">link</a> ``` 16. **根据选项改变页面颜色**:可以使用JavaScript监听用户的选择,并根据选择的内容更改页面的背景颜色或其它样式。 以上仅是部分JavaScript技巧的示例,实际应用中还有更多高级和复杂的功能可以通过JavaScript实现,如动画效果、表单验证、AJAX异步请求、DOM操作、事件委托等。不断学习和实践JavaScript,将能提高Web开发的效率和用户体验。
- 粉丝: 1
- 资源: 2
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助