JavaScript 实用技巧：焦点事件、按钮样式与窗口操作

"JavaScript 使用技巧" 在Web开发中，JavaScript是一种不可或缺的脚本语言，它提供了丰富的交互性功能。以下是一些实用的JavaScript使用技巧，主要用于增强用户界面和交互体验。 1. 文本框焦点问题 JavaScript提供了多种事件处理函数来处理用户与表单元素的交互。`onBlur`事件在文本框失去焦点后触发，`onFocus`事件在文本框获得焦点时触发，`onChange`事件在用户更改文本框内容并失去焦点后触发，`onSelect`事件则在用户选中文本时触发。例如，下面的代码演示了如何在文本框获得和失去焦点时改变其显示内容： ```html <input type="text" value="郭强" onfocus="if(value=='郭强'){value=''}" onblur="if(value==''){value='郭强'}"> ``` 这个例子中，文本框默认显示“郭强”，当用户点击文本框时内容清空，失去焦点时如果内容为空，则再次显示“郭强”。 2. 网页按钮的特殊颜色 可以通过设置`style`属性或使用CSS类来改变按钮的背景颜色。例如： ```html <input type="button" name="Submit1" value="郭强" size=10 class="s02" style="background-color:rgb(235,207,22)"> ``` 这里，按钮的背景颜色被设置为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. 平面按钮 创建一个具有特定边框、高度、宽度、字体大小和背景颜色的平面按钮，可以这样做： ```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. 按钮颜色变化 可以使用`style`属性动态改变输入框的样式，如背景颜色和字体颜色： ```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. 平面输入框 创建无边框的输入框，只需设置`border-style`为`solid`和`border-width`： ```html <input type="text" name="T1" size="20" style="border-style:solid; border-width:1"> ``` 7. 使窗口变成指定的大小 通过JavaScript的`window.resizeTo()`方法，可以调整浏览器窗口的大小。例如： ```javascript <script> window.resizeTo(300,283); </script> ``` 这将把当前窗口的宽度调整为300像素，高度调整为283像素。 8. 使文字上下滚动 `<marquee>`标签可以实现文字的滚动效果。例如，让文字向上滚动： ```html <marquee direction="up" scrollamount=1 scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()'> 文字滚动内容 </marquee> ``` 这段代码创建了一个向上滚动的文字，当鼠标悬停在marquee上时，滚动会暂停，鼠标离开时继续滚动。 以上技巧展示了JavaScript在网页交互中的应用，这些小技巧可以极大地提升用户体验，并且是JavaScript开发者应该掌握的基本技能。在实际项目中，结合CSS和JavaScript可以创建更复杂、更富表现力的用户界面。