JS 精彩两百例

在JavaScript（JS）编程中，有很多实用的技巧和方法可以增强网页交互性。以下是一些例子，涵盖了事件处理、样式调整、动态效果以及用户交互等多个方面： 1. **焦点与失焦事件**：`onBlur` 和 `onFocus` 是处理输入框焦点变化的事件。`onBlur` 在元素失去焦点时触发，而 `onFocus` 当元素获得焦点时执行。例如，一个文本框可以设置为默认显示“郭强”，用户点击时清空，离开时恢复原样。 2. **自定义按钮样式**：使用CSS类可以为按钮添加特殊的背景颜色、大小等样式。例如，通过设置`style="background-color:rgb(235,207,22)"`，可以创建一个特定颜色的按钮。 3. **鼠标移入移出效果**：通过 `onMouseOver` 和 `onMouseOut` 事件，可以改变元素的色彩，例如改变按钮颜色。 4. **平面按钮样式**：利用CSS样式，可以创建具有边框、颜色、大小等属性的平面按钮。 5. **颜色变化的输入框**：通过CSS控制输入框的背景色和文字颜色，如`BACKGROUND-COLOR: #E8E8FF; color:#666666`，并可以使用JavaScript添加更多的交互效果。 6. **无边框输入框**：通过设置`border-style: solid; border-width: 1` 创建一个有边框的输入框，使其看起来更简洁。 7. **窗口大小调整**：使用`window.resizeTo()` 方法，可以强制浏览器窗口调整到指定的宽度和高度。 8. **文字滚动**：`<marquee>` 标签用于创建上下或左右滚动的文字，通过`direction`、`scrollamount` 和 `scrolldelay` 属性控制滚动方向和速度。同时，`onmouseover` 和 `onmouseout` 可以暂停或启动滚动。 9. **状态栏信息显示**：通过在`<base>` 标签上添加`onmouseover` 事件，可以更改浏览器状态栏显示的信息。 10. **文字与Radio按钮关联**：通过 `for` 属性将`<label>`与`<input type="radio">`关联，用户点击文字即可选中对应的单选按钮。 11. **在文字域添加onclick事件**：在`<textarea>` 的 `font` 标签内，可以添加`onclick` 事件，提高用户交互体验。 12. **打印功能**：使用`window.print()` 可以调用浏览器的打印功能，让用户直接打印网页。 13. **全选输入框**：`onFocus` 事件结合 `this.select()` 可以在文本框获得焦点时自动选择全部内容，方便用户复制或输入。 14. **显示文档最后修改日期**：通过`document.lastModified` 获取文档的最后修改日期，并通过`document.write()` 或 `alert()` 显示。 15. **鼠标悬停触发事件**：使用`onMouseOver` 事件，可以在鼠标悬停在特定文字上时执行函数，如弹出警告框。 16. **根据选项改变页面颜色**：通过JavaScript响应用户的选择，动态改变网页背景颜色。未给出完整代码，但通常会有一个函数来根据选择的选项设置页面背景色。 这些示例展示了JavaScript如何增强网页的用户体验，提供了丰富的交互性和个性化设计。通过熟练掌握这些技术，开发者可以创建更加生动和用户友好的网页应用。