Java_script脚本常用代码(全)

### JavaScript 常用代码详解 #### 一、概述 JavaScript 是一种广泛使用的脚本语言，主要用于网页开发，能够使网页具有动态交互功能。本文将详细介绍一些常用的 JavaScript 方法及其应用场景，帮助开发者更好地理解和掌握这些技术。 #### 二、常用方法详解 ##### 1. **事件处理** - **click()**：模拟点击事件。 - 示例：`element.click();` - **closed**：检测窗口是否关闭。 - 示例：`if (window.closed) { alert('窗口已关闭'); }` - **clearTimeout()** 和 **clearInterval()**： - `clearTimeout()`：取消由 `setTimeout()` 设置的延时调用。 - 示例：`clearTimeout(timeoutId);` - `clearInterval()`：取消由 `setInterval()` 设置的定时调用。 - 示例：`clearInterval(intervalId);` ##### 2. **用户确认与提示** - **confirm()**：显示一个带有提示消息和确定/取消按钮的对话框。 - 示例：`if (confirm("您确定要删除吗？")) { /* 执行删除操作 */ }` - **prompt()**：显示一个输入框让用户输入信息。 - 示例：`var name = prompt("请输入您的名字");` ##### 3. **鼠标与键盘事件** - **event.clientX** 和 **event.clientY**：获取鼠标相对于视口的位置。 - 示例：`console.log(event.clientX + ", " + event.clientY);` - **event.offsetX** 和 **event.offsetY**：获取鼠标相对于触发事件元素的位置。 - 示例：`console.log(event.offsetX + ", " + event.offsetY);` ##### 4. **页面信息** - **document.write()**：向文档写入文本或HTML。 - 示例：`document.write("当前页面最后修改时间：" + document.lastModified);` - **document.ondblclick** 和 **document.onmousedown**：监听双击和鼠标按下事件。 - 示例：`document.ondblclick = function() { alert("双击了！"); };` ##### 5. **滚动位置** - **document.body.scrollTop** 和 **document.body.scrollLeft**：获取或设置垂直和水平滚动条的位置。 - 示例：`document.body.scrollTop = 100;` ##### 6. **文档属性更改** - **document.title**：更改文档标题。 - 示例：`document.title = "新标题";` - **document.bgcolor**、**document.fgcolor**、**document.linkcolor**、**document.alinkcolor** 和 **document.vlinkcolor**：更改背景色、前景色、链接颜色等。 - 示例：`document.bgcolor = "#FF0000";` ##### 7. **表单操作** - **document.forms.length**：获取页面中的表单数量。 - 示例：`console.log("表单数量：" + document.forms.length);` - **document.anchors.length** 和 **document.links.length**：获取页面中的锚点和链接数量。 - 示例：`console.log("链接数量：" + document.links.length);` ##### 8. **事件绑定** - **document.onmousedown** 和 **document.ondblclick**：绑定鼠标事件。 - 示例：`document.onmousedown = function(e) { console.log("鼠标按下"); };` ##### 9. **状态栏** - **window.status**：设置或获取浏览器状态栏的文本。 - 示例：`window.status = "欢迎使用本应用";` ##### 10. **函数定义** - 示例：`function xx() { /* 函数体 */ }` ##### 11. **数值判断** - **isNumeric()**：检查字符串是否为数字。 - 示例：`if (isNumeric(input)) { /* 输入是数字 */ }` ##### 12. **DOM 操作** - **innerHTML** 和 **innerText**：获取或设置元素的内容。 - 示例：`element.innerHTML = "<p>新的内容</p>";` - **location.reload()**：刷新页面。 - 示例：`location.reload();` ##### 13. **数学运算** - **Math.random()**：生成随机数。 - 示例：`var rand = Math.random() * 10;` - **Math.floor()**：向下取整。 - 示例：`Math.floor(3.7); // 结果为 3` - **Math.min()** 和 **Math.max()**：获取最小值和最大值。 - 示例：`Math.min(1, 2, 3); // 结果为 1` ##### 14. **浏览器信息** - **navigator.appName**、**navigator.appVersion**、**navigator.appCodeName** 和 **navigator.userAgent**：获取浏览器信息。 - 示例：`console.log(navigator.appName);` ##### 15. **表单提交与重置** - **onsubmit**：在表单提交前执行函数。 - 示例：`<form onsubmit="return validateForm()">` - **form.reset()**：重置表单。 - 示例：`document.getElementById('myForm').reset();` ##### 16. **字符串操作** - **String.charAt()**、**lastIndexOf()** 和 **indexOf()**：字符串查找和定位。 - 示例：`var str = "Hello World"; console.log(str.charAt(0));` - **toLowerCase()** 和 **toUpperCase()**：转换字符串大小写。 - 示例：`var str = "Hello World"; console.log(str.toUpperCase());` - **substring()**：获取子字符串。 - 示例：`var str = "Hello World"; console.log(str.substring(0, 5));` ##### 17. **定时器** - **setTimeout()** 和 **setInterval()**：设置延时和周期性调用。 - 示例：`setTimeout(function() { console.log("延时结束"); }, 3000);` ##### 18. **日期和时间** - **toLocaleString()**：格式化日期和时间。 - 示例：`new Date().toLocaleString();` ##### 19. **鼠标按键** - **window.event.button**：检测鼠标按钮。 - 示例：`if (window.event.button == 1) { console.log("左键被按下"); }` ##### 20. **屏幕尺寸** - **screen.availWidth** 和 **screen.availHeight**：获取可用屏幕尺寸（考虑任务栏）。 - 示例：`console.log(screen.availWidth + " x " + screen.availHeight);` - **screen.width** 和 **screen.height**：获取屏幕分辨率。 - 示例：`console.log(screen.width + " x " + screen.height);` ##### 21. **页面尺寸** - **document.body.offsetHeight** 和 **document.body.offsetWidth**：获取页面高度和宽度。 - 示例：`console.log(document.body.offsetHeight + " x " + document.body.offsetWidth);` ##### 22. **窗口调整大小** - **window.resizeTo()**：调整窗口大小。 - 示例：`window.resizeTo(800, 600);` #### 三、总结 以上介绍的方法涵盖了JavaScript在网页开发中的常见应用场景。通过学习和实践这些方法，可以有效提高开发效率并增强网页的用户体验。此外，熟悉这些基本概念和技术也是进一步深入学习Web前端技术的基础。希望本文能对正在学习或使用JavaScript的开发者们有所帮助。