Java script脚本常用代码

### Java Script脚本常用代码详解 #### 一、概述 JavaScript是一种广泛使用的脚本语言，尤其在网页开发中扮演着重要角色。对于初学者来说，掌握一些基础且常用的JavaScript代码片段是十分必要的。本文将根据提供的部分内容，详细介绍一系列重要的JavaScript功能和用法。 #### 二、点击事件与定时器 ##### 1. `click()` 事件 ```javascript // 模拟点击事件 document.getElementById('myButton').click(); ``` ##### 2. `closed` 属性 此属性表示窗口是否已关闭。 ```javascript if(window.closed) { console.log('窗口已关闭'); } ``` ##### 3. `clearTimeout()` 与 `clearInterval()` - `clearTimeout()` 用于清除由 `setTimeout()` 设置的延时调用。 - `clearInterval()` 用于清除由 `setInterval()` 设置的周期性调用。 ```javascript let timeoutId = setTimeout(() => console.log('延迟执行'), 3000); clearTimeout(timeoutId); let intervalId = setInterval(() => console.log('周期执行'), 1000); clearInterval(intervalId); ``` #### 三、用户交互与页面信息 ##### 1. `confirm()` 函数 用于弹出确认对话框。 ```javascript if(confirm('您确定要删除吗？')) { console.log('用户确认删除'); } else { console.log('用户取消删除'); } ``` ##### 2. `cursor` 属性 设置鼠标光标样式。 ```css /* CSS */ div { cursor: hand; // 更多选项如: crosshair, text, wait, help, default, auto, e-resize, w-resize, n-resize, s-resize } ``` ##### 3. 获取鼠标位置 ```javascript document.addEventListener('click', function(event) { console.log('鼠标点击 X 坐标: ' + event.clientX); console.log('鼠标点击 Y 坐标: ' + event.clientY); }); ``` ##### 4. 获取元素位置 ```javascript const element = document.getElementById('myElement'); console.log('元素相对页面 X 坐标: ' + event.offsetX); console.log('元素相对页面 Y 坐标: ' + event.offsetY); ``` ##### 5. 获取页面最后修改时间 ```javascript console.log('页面最后修改时间: ' + document.lastModified); ``` ##### 6. 监听鼠标事件 ```javascript document.addEventListener('mousedown', function(event) { console.log('鼠标按下'); }); document.addEventListener('mouseup', function(event) { console.log('鼠标释放'); }); document.addEventListener('dblclick', function(event) { console.log('双击'); }); ``` #### 四、滚动条与标题设置 ##### 1. 获取并设置滚动条位置 ```javascript console.log('当前页面垂直滚动位置: ' + document.body.scrollTop); console.log('当前页面水平滚动位置: ' + document.body.scrollLeft); // 设置滚动条位置 document.body.scrollTop = 100; document.body.scrollLeft = 100; ``` ##### 2. 修改页面标题 ```javascript document.title = '新标题'; ``` ##### 3. 修改背景颜色 ```javascript document.body.style.backgroundColor = 'blue'; ``` #### 五、表单操作 ##### 1. 获取表单数量 ```javascript console.log('页面中的表单数量: ' + document.forms.length); ``` ##### 2. 表单提交 ```javascript document.getElementById('myForm').submit(); ``` ##### 3. 表单重置 ```javascript document.getElementById('myForm').reset(); ``` #### 六、字符串操作 ##### 1. 字符串分割 ```javascript const words = "Hello, world!"; const wordArray = words.split(", "); console.log(wordArray); // ["Hello", "world!"] ``` ##### 2. 字符串查询 ```javascript const index = "Hello, world!".indexOf("world"); console.log(index); // 7 ``` ##### 3. 字符串大小写转换 ```javascript const message = "hello, world!"; console.log(message.toUpperCase()); // HELLO, WORLD! console.log(message.toLowerCase()); // hello, world! ``` ##### 4. 字符串截取 ```javascript const message = "Hello, world!"; const subMessage = message.substring(0, 5); console.log(subMessage); // Hello ``` #### 七、定时器与日期操作 ##### 1. 定时器 ```javascript setTimeout(function() { console.log('延迟执行'); }, 3000); setInterval(function() { console.log('周期执行'); }, 1000); ``` ##### 2. 日期格式化 ```javascript const date = new Date(); console.log(date.toLocaleString()); ``` #### 八、浏览器信息获取 ##### 1. 浏览器基本信息 ```javascript console.log('浏览器名称: ' + navigator.appName); console.log('浏览器版本: ' + navigator.appVersion); console.log('浏览器代码名称: ' + navigator.appCodeName); console.log('用户代理: ' + navigator.userAgent); ``` #### 九、其他常用操作 ##### 1. 随机数生成 ```javascript const randomNum = Math.random(); console.log(randomNum); // 输出 0 到 1 之间的随机数（不包括 1） ``` ##### 2. 页面刷新 ```javascript location.reload(); ``` ##### 3. 获取屏幕尺寸 ```javascript console.log('屏幕可用宽度: ' + window.screen.availWidth); console.log('屏幕可用高度: ' + window.screen.availHeight); console.log('屏幕总宽度: ' + window.screen.width); console.log('屏幕总高度: ' + window.screen.height); ``` ##### 4. 修改窗口尺寸 ```javascript window.resizeTo(800, 600); ``` 以上介绍了一些JavaScript中非常实用的功能和用法，这对于初学者来说是非常宝贵的资源。通过理解和运用这些代码片段，可以快速提高JavaScript编程能力，并为更复杂的项目打下坚实的基础。