JavaScript,简称JS,是Web开发中的重要脚本语言,用于实现客户端的交互和动态效果。以下是一些基于提供的文件内容的JavaScript技巧:
1. **事件处理**:`onBlur`, `onFocus`, `onChange`, `onSelect` 是常见的HTML事件。`onBlur` 在元素失去焦点时触发,`onFocus` 在元素获得焦点时触发,`onChange` 在表单元素的值改变时触发,`onSelect` 在用户选择文本时触发。例如,在输入框中设置默认值,当焦点离开后恢复默认值:
```html
<input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onblur="if (value=='') {value='郭强'}">
```
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">
<input type="text" name="T1" size="20" style="border-style: solid; border-width: 1">
```
5. **颜色变化**:可以利用CSS改变元素的背景颜色和文本颜色,以响应用户的交互行为:
```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. **选中输入框**:使用`onFocus` 事件,可以使输入框在获取焦点时自动选中其内容,方便用户编辑:
```html
<input type="text" name="key" size="12" value="关 键 字 " onFocus="this.select()" onMouseOver="this.focus()" class="line">
```
7. **调整窗口大小**:通过JavaScript的`window.resizeTo()` 方法可以调整浏览器窗口的大小:
```javascript
<script>
window.resizeTo(300,283);
</script>
```
8. **滚动文字**:使用`<marquee>` 标签可以实现文字的滚动效果,通过`direction`、`scrollamount` 和 `scrolldelay` 属性控制滚动方向和速度:
```html
<marquee direction="up" scrollamount="1" scrolldelay="100" onmouseover='this.stop()'onmouseout='this.start()' height=60>
<!-- 文字内容 -->
</marquee>
```
9. **状态栏显示**:通过`<base>` 标签的 `onmouseover` 事件,可以在鼠标悬停时改变浏览器状态栏的内容:
```html
<base onmouseover="window.status='网站建设 http://www.webmake.cn/';return true">
```
10. **关联Radio按钮和文字**:使用`<label>` 标签可以与`<input type="radio">` 配合,实现点击文字即可选择Radio选项:
```html
<input type="radio" name="regtype" value="A03" id="A03">
<label for="A03">情侣 : 一次注册两个帐户</label>
```
11. **在文本域中使用`onclick`**:文本域(`<textarea>`)也可以响应`onclick`事件,用于执行某些JavaScript函数或操作。
12. **打印功能**:在链接上设置`onclick` 事件,调用`window.print()` 可以实现网页打印功能:
```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获取`document.lastModified` 属性,可以显示文档的最后修改日期:
```javascript
<script>
function hi(str) {
document.write(document.lastModified);
alert("hi" + str + "!");
}
</script>
```
15. **鼠标悬停触发事件**:使用`onMouseOver` 事件,可以在鼠标移到文字上时触发提醒或其他动作:
```html
<a href="" onMouseOver="hello()">link</a>
```
16. **根据选项改变页面颜色**:可以使用JavaScript监听用户的选择,并根据选择的内容更改页面的背景颜色或其它样式。
以上仅是部分JavaScript技巧的示例,实际应用中还有更多高级和复杂的功能可以通过JavaScript实现,如动画效果、表单验证、AJAX异步请求、DOM操作、事件委托等。不断学习和实践JavaScript,将能提高Web开发的效率和用户体验。