javascript技巧汇总

JavaScript是Web开发中不可或缺的一部分，它为网页增添了交互性与动态效果。以下是一些经典的JavaScript技巧，涵盖了事件处理、样式修改、用户交互等多个方面： 1. **文本框焦点问题**：`onBlur` 和 `onFocus` 事件是用于处理输入框焦点变化的。`onBlur` 在元素失去焦点时触发，`onFocus` 在元素获得焦点时触发。例如，一个文本框初始显示预设值，聚焦时清空，失去焦点且为空时恢复预设值： ```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" name="submit"> <input type="text" name="T1" size="20" style="border-style: solid; border-width: 1"> ``` 5. **按钮颜色变化**：根据需要，通过CSS和JavaScript修改输入框的样式： ```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. **平面输入框**：使用CSS定义输入框的样式，使其看起来像平面按钮： ```html <input type="text" name="key" size="12" value="关键字" onFocus="this.select()" onMouseOver="this.focus()" class="line"> ``` 7. **调整窗口大小**：JavaScript 的 `resizeTo` 方法可以改变浏览器窗口的大小： ```javascript window.resizeTo(300,283); ``` 8. **文字上下滚动**：`<marquee>` 标签可以创建滚动文字效果，通过 `direction`, `scrollamount` 和 `scrolldelay` 属性控制滚动方向和速度： ```html <marquee direction=up scrollamount=1 scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()' height=60> <!-- 文字内容 --> </marquee> ``` 9. **状态栏显示**：通过 `onmouseover` 事件在鼠标悬停时改变浏览器状态栏的内容： ```html <base onmouseover="window.status='网站建设 http://www.webmake.cn/';return true"> ``` 10. **点击文字选择radio选项**：使用 `for` 属性将`<label>`与`<input type="radio">`关联，点击文字即可选中对应的选项： ```html <input type="radio" name="regtype" value="A03" id="A03"> <label for="A03"> 情侣 : 一次注册两个帐户</label> ``` 11. **在文字域的font写onclick事件**：可以在`<font>`标签内添加`onclick`事件，实现点击文字触发JavaScript函数。 12. **打印功能**：通过`window.print()`方法实现网页打印： ```html <a href='javascript:window.print ()'>打印网页</a> ``` 13. **线型输入框**：使用 `onFocus` 和 `onMouseOver` 事件实现选中文本： ```html <input type="text" name="key" size="12" value="关键字" onFocus="this.select()" onMouseOver="this.focus()" class="line"> ``` 14. **显示文档最后修改日期**：JavaScript 的 `document.lastModified` 属性可以获取文档的最后修改日期： ```javascript function hi(str){ document.write(document.lastModified) alert("hi" + str + "!") } ``` 15. **鼠标移到文字上触发事件**：在链接的 `onMouseOver` 事件中调用函数： ```html <a href="" onMouseOver="hello()">link</a> ``` 16. **根据选项改变页面颜色**：通过JavaScript根据用户选择的选项动态更改页面背景颜色： ```html <SELECT NAME="colors" onChange="document.bgColor=document.colors.options[document.colors.selectedIndex].value;"> <OPTION VALUE="white">白色</OPTION> <OPTION VALUE="black">黑色</OPTION> </SELECT> ``` 以上技巧展示了JavaScript在网页交互中的强大功能，通过巧妙运用这些技巧，开发者可以创建更加生动、友好的用户体验。同时，随着技术的发展，现代JavaScript库和框架（如React, Vue, Angular等）提供了更高级的交互和动画功能，但了解这些基础技巧仍然对理解前端开发至关重要。