JavaScript交互设计：焦点、颜色与样式变换示例

"JS精彩两百例" JavaScript（简称JS）是一种轻量级的脚本语言，广泛应用于网页和网络应用开发，实现客户端的交互效果。以下是一些基础的JS知识点，基于提供的示例进行详细解释： 1. 文本框焦点问题： 在HTML中，`onBlur`、`onFocus`、`onChange`和`onSelect`是与表单元素交互相关的事件。`onBlur`在元素失去焦点时触发，`onFocus`则在元素获取焦点时触发。`onChange`在用户修改了文本框内容并失去焦点后触发，`onSelect`则在用户选中文本时触发。示例代码展示了如何利用这些事件实现一个输入框，当点击时显示为空，失去焦点时恢复默认值。 2. 网页按钮的特殊颜色： HTML中的`<input type="button">`用于创建按钮，通过CSS的`style`属性可以设置按钮的背景颜色。例如，`style="background-color:rgb(235,207,22)"`将按钮背景色设为特定的RGB值。 3. 鼠标移入移出时颜色变化： 使用`onMouseOver`和`onMouseOut`事件可以改变元素的样式。当鼠标移到元素上，`onMouseOver`事件触发，改变元素颜色；当鼠标离开，`onMouseOut`事件触发，恢复原颜色。 4. 平面按钮： 创建具有特定样式的按钮，通过设置`border`、`height`、`width`、`font-size`、`BACKGROUND-COLOR`和`color`等CSS属性，可以自定义按钮的外观。 5. 按钮颜色变化： 类似于平面按钮，通过`style`属性动态改变文本框的颜色，如设置`border`、`font-size`、`height`、`BACKGROUND-COLOR`和`color`。 6. 平面输入框： 创建带有边框的输入框，通过`border-style`、`border-width`来设定边框样式和宽度。 7. 使窗口变成指定的大小： 使用JavaScript的`window.resizeTo(width, height)`方法可以动态调整浏览器窗口的尺寸，例如`window.resizeTo(300,283)`将窗口宽高分别设置为300像素和283像素。 8. 使文字上下滚动： `<marquee>`标签用于创建滚动文本，`direction`属性定义滚动方向，`scrollamount`设置滚动速度，`scrolldelay`定义每次移动前的延迟时间，`onmouseover`事件可暂停滚动。 以上例子展示了JS在网页交互中的基本应用，包括事件处理、样式控制以及页面动态效果的实现。通过学习和实践这些例子，开发者可以更好地理解和掌握JS在实际项目中的运用。