200多个js技巧代码

### 200多个JS技巧代码中的精选知识点 #### 1. 文本框焦点问题处理 在Web开发中，文本框焦点的管理非常重要，能够提升用户体验。通过使用`onBlur`、`onFocus`等事件，可以实现文本框提示信息的自动隐藏与显示功能。 - **`onBlur`:** 当文本框失去焦点时触发此事件。 - **`onFocus`:** 当文本框获得焦点时触发此事件。 - **`onChange`:** 当文本框内容发生改变时触发此事件。 - **`onSelect`:** 当文本框中的文字被选中时触发此事件。 示例代码： ```html <input type="text" value="mm" onfocus="if(value=='mm'){value=''}" onblur="if(value==''){value='mm'}"> ``` 此段代码实现了文本框默认提示信息“mm”的动态展示。当用户点击文本框时，提示信息消失；当用户离开文本框（即文本框失去焦点）且未输入任何内容时，提示信息再次出现。 #### 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" name="submit"> ``` 这段代码展示了如何设置一个具有特定尺寸、颜色和平面风格的提交按钮。 #### 5. 按钮颜色动态变化 除了静态颜色设置外，还可以根据用户操作动态调整按钮颜色： ```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"> ``` 此代码定义了一个带有橙色文字的输入框，可以通过CSS进一步定制。 #### 6. 平面输入框样式 创建一致的平面设计风格，可以使网站看起来更加专业。例如，设置输入框的边框样式： ```html <input type="text" name="T1" size="20" style="border-style:solid;border-width:1"> ``` 这使得输入框拥有细实线边框，符合平面设计的要求。 #### 7. 调整浏览器窗口大小 使用JavaScript可以实现对浏览器窗口大小的控制，如： ```javascript window.resizeTo(300, 283); ``` 这行代码将浏览器窗口调整为宽300像素、高283像素的大小。 #### 8. 文字滚动效果 通过`<marquee>`标签可以创建文字滚动效果，增加页面动态性： ```html <marquee direction=up scrollamount=1 scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()' height=60> <!--head_scrolltext--> <tr> <td> 共和国 </table> <!--endhead_scrolltext--> </marquee> ``` 此代码创建了一个向上滚动的文字区域，当鼠标悬停时停止滚动，鼠标离开时继续滚动。 #### 9. 状态栏显示自定义信息 为了提高用户体验，可以设置鼠标悬停时状态栏显示的信息： ```html <base onmouseover="window.status='网站建设http://www.webmake.cn/'; return true"> ``` 这会在鼠标悬停时显示指定的网站信息。 #### 10. 文字点击绑定事件 通过HTML `<label>` 和 `<input>` 的结合使用，可以实现文字点击时触发相关事件： ```html <label for="A03">情侣: 一次注册两个帐户</label> <input type="radio" name="regtype" value="A03" id="A03"> ``` 点击标签内的文字会选中对应的单选按钮。 #### 11. 文字域中的事件绑定 虽然没有具体示例代码，但可以想象这是指在`<textarea>`或`<input>`元素的`onBlur`、`onFocus`等事件中绑定JavaScript函数。 #### 12. 打印页面 提供一个简单的打印链接，用户点击即可打印当前页面： ```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获取并显示文档的最后修改时间： ```javascript function hi(str) { document.write(document.lastModified); alert("hi" + str + "!"); } ``` 调用此函数可以显示文档的最后修改日期。 #### 15. 鼠标悬停触发事件 通过`onMouseOver`事件可以实现更复杂的交互： ```html <a href="" onMouseOver="hello()">link</a> ``` 当鼠标悬停在链接上时，会弹出对话框显示“哈罗!”。 #### 16. 根据选项改变页面颜色 可以根据用户选择改变整个页面的背景颜色： ```html <SCRIPT> <!-- function bgChange(selObj){ // 更改背景颜色的逻辑 } // --> </SCRIPT> ``` 虽然代码片段不完整，但可以推断出是通过用户的某种选择来改变页面背景颜色的方法。 以上内容总结了部分常见的JS技巧及其应用场景，对于Web开发者来说非常实用。这些技巧可以帮助开发者快速实现一些基础功能，并提升用户体验。