### JavaScript技巧收集
#### 描述
本文档收集了200多个JavaScript开发技巧，适合初学者学习使用。这些技巧覆盖了HTML元素事件处理、样式控制、页面操作等多个方面，旨在帮助开发者更好地理解和运用JavaScript。
#### 知识点详解
##### 1. HTML元素事件处理
**事件简介：**
- **`onBlur`**: 当元素失去焦点时触发。
- **`onFocus`**: 当元素获得焦点时触发。
- **`onChange`**: 当元素值发生变化时触发。
- **`onSelect`**: 当用户选中元素中的文本时触发。
**示例代码：**
```html
<input type="text" value="默认文本" onfocus="if (this.value == '默认文本') { this.value = ''; }" onblur="if (this.value == '') { this.value = '默认文本'; }">
```
**解析：**
这段代码展示了如何通过`onFocus`和`onBlur`事件来控制文本框中的默认显示文本。当文本框获得焦点且内容为默认文本时，清空文本框；当文本框失去焦点且为空时，恢复默认文本。
##### 2. HTML按钮颜色设置
**示例代码：**
```html
<input type="button" name="Submit1" value="按钮" size="10" class="s02" style="background-color: rgb(235, 207, 22);">
```
**解析：**
这里演示了如何通过内联样式设置按钮的背景色。可以使用RGB或十六进制颜色值。
##### 3. 鼠标悬停时颜色变化
**示例代码：**
```html
<input type="submit" value="按钮" name="B1" onMouseOut="this.style.color='blue'" onMouseOver="this.style.color='red'" class="button">
```
**解析：**
利用`onMouseOut`和`onMouseOver`事件动态改变按钮文字的颜色。鼠标移出时文字变为蓝色，鼠标移入时文字变为红色。
##### 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">
```
**解析：**
该示例展示了如何通过CSS属性设置按钮的样式，包括边框、高度、宽度等，以实现平面风格的设计效果。
##### 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">
```
**解析：**
此段代码展示了如何通过内联样式设置输入框的样式，包括边框、字体大小、高度、背景色及字体颜色等属性。
##### 6. 设置输入框边框
**示例代码：**
```html
<input type="text" name="T1" size="20" style="border-style: solid; border-width: 1;">
```
**解析：**
这里演示了如何仅设置输入框的边框样式。
##### 7. 调整浏览器窗口大小
**示例代码：**
```javascript
window.resizeTo(300, 283);
```
**解析：**
通过JavaScript函数`resizeTo()`调整浏览器窗口的宽度和高度。这对于特定场景下的布局调整非常有用。
##### 8. 使用滚动字幕
**示例代码：**
```html
<marquee direction="up" scrollamount="1" scrolldelay="100" onmouseover="this.stop()" onmouseout="this.start()" height="60">
<!-- 内容 -->
</marquee>
```
**解析：**
使用`<marquee>`标签创建滚动字幕，通过设置方向、滚动速度、延迟时间等属性实现不同效果。同时，可以通过鼠标事件控制字幕的播放和暂停。
##### 9. 修改状态栏提示文本
**示例代码：**
```html
<base onmouseover="window.status='http://www.webmake.cn/'; return true;">
```
**解析：**
当鼠标悬停在页面上时，状态栏将显示指定的URL。这可用于提供额外的信息或者链接。
##### 10. 改进单选按钮的选择体验
**示例代码：**
```html
<input type="radio" name="regtype" value="A03" id="A03">
<label for="A03">会员类型：普通会员</label>
```
**解析：**
通过将`for`属性与`id`属性关联起来，用户点击标签文字即可选择对应的单选按钮，提高了用户体验。
##### 11. 使用`onMouseOver`和`onClick`事件
**示例代码：**
```html
<font onclick="alert('点击事件')" onmouseover="alert('鼠标悬停事件')">示例文本</font>
```
**解析：**
结合`onMouseOver`和`onClick`事件，分别处理鼠标悬停和点击时的动作。
##### 12. 打印当前页面
**示例代码：**
```html
<a href="javascript:window.print()">打印页面</a>
```
**解析：**
点击链接后，会调用浏览器的打印功能，打印当前页面的内容。
##### 13. 自动选中输入框中的文本
**示例代码：**
```html
<input type="text" name="key" size="12" value="搜索关键词" onFocus="this.select()" onMouseOver="this.focus()" class="line">
```
**解析：**
当输入框获得焦点或鼠标悬停在其上方时，自动选中其中的文本，方便用户快速替换或编辑。
##### 14. 显示文档最后修改时间
**示例代码：**
```javascript
function hi(str) {
document.write(document.lastModified);
alert("hi" + str + "!");
}
```
**解析：**
定义了一个名为`hi`的函数，用于显示文档的最后修改时间，并弹出一个带有参数的警告框。
##### 15. 使用隐藏脚本块
**示例代码：**
```html
<script language="LiveScript">
<!--Hiding
function hello(){
alert("!");
}
</script>
<body>
<a href="" onMouseOver="hello()">链接</a>
</body>
```
**解析：**
使用注释隐藏JavaScript代码，防止某些浏览器解析器误将其作为HTML内容。点击链接时会弹出一个简单的警告框。
##### 16. 用户选择背景颜色
**示例代码：**
```html
<select onchange="bgChange(this)">
<option value="#FFFFFF">白色</option>
<option value="#000000">黑色</option>
<option value="#FF0000">红色</option>
<option value="#00FF00">绿色</option>
<option value="#0000FF">蓝色</option>
</select>
<script>
function bgChange(selObj) {
var newColor = selObj.options[selObj.selectedIndex].value;
document.body.bgColor = newColor;
selObj.selectedIndex = -1;
}
</script>
```
**解析：**
通过下拉菜单选择不同的颜色，然后使用`onChange`事件触发`bgChange`函数来改变页面背景色。选择新的颜色后，下拉菜单会自动重置到初始状态。
以上技巧展示了JavaScript在网页交互设计中的广泛应用，涵盖了从基本的事件处理到复杂的功能实现等多个方面。这些技巧不仅有助于初学者快速上手JavaScript编程，还能帮助开发者在实际项目中提高效率和用户体验。
