1.window对象
window对象的常用属性如下
history :用户访问过的统一资源定位符(Uniform Resource Locator,URL)信息。
location:当前的URL信息。
screen:只读属性,包含客户端显示屏幕的信息。
window对象的常用方法如下
- alert(): 显示一个带确定的警示对话框。
alert("这是一个警示对话框!");
- confirm():显示一个带确定和取消按钮的对话框
if (confirm("确定要执行这个操作吗?")) {
console.log("用户点击了确定按钮");
} else {
console.log("用户点击了取消按钮");
}
- promot():显示可提示用户输入的对话框
var name = prompt("请输入您的名字:");
console.log("您输入的名字是:" + name);
- open():打开一个新的浏览器窗口,加载给定URL所指定的文档
window.open("https://www.example.com", "_blank");
- close():关闭浏览器窗口
window.close();//请注意,这个方法只能关闭由 JavaScript 打开的新窗口,而无法关闭当前的窗口
- setInterval():间隔指定的毫秒数不停地执行指定的代码
var intervalId = setInterval(function() {
console.log("每隔一秒执行一次");
}, 1000);
- clearInrerval():用于停止setInterval()方法的执行的函数代码
clearInterval(intervalId);
- setTimeout():在指定的毫秒数后执行指定的代码
setTimeout(function() {
console.log("两秒后执行");
}, 2000);
- clearTimeout(): 用于停止setTimeout()方法的执行的函数代码
var timeoutId = setTimeout(function() {
console.log("这段代码不会被执行");
}, 2000);
clearTimeout(timeoutId);
//timeoutId 是之前使用 setTimeout() 创建的定时任务的 ID。通过调用 clearTimeout() 方法,定时任务将被取消,代码不会在延迟后执行
2.history对象
history常用的属性和方法如下
类别 | 名称 | 作用 | ||||
---|---|---|---|---|---|---|
属性 | length | 返回历史记录列表中的网址数 | ||||
|
|
| ||||
|
| |||||
|
|
- 代码示例
// 后退一页
history.back();
// 前进一页
history.forward();
// 跳转到历史记录中的特定页面
history.go(-2); // 后退两页
3.location对象
location对象常用属性和方法如下
类别 | 名称 | 作用 |
---|---|---|
属性 | host | 返回服务器名称和端口号 |
hostname | 返回不带端口号的服务器名称 | |
href | 返回当前加载页面的完整URL | |
方法 | reload() | 重新加载当前文档 |
replace() | 用新的文档替换当前文档 |
<!-- 示例 -->
<p>属性示例:</p>
<ul>
<li>host: <span id="hostExample"></span></li>
<li>hostname: <span id="hostnameExample"></span></li>
<li>href: <span id="hrefExample"></span></li>
</ul>
<button onclick="getAttributeExamples()">显示属性示例</button>
<p>方法示例:</p>
<button onclick="reloadPage()">点击重新加载当前文档</button>
<button onclick="replaceDocument()">点击用新的文档替换当前文档</button>
<script>
// 属性示例
document.getElementById("hostExample").innerText = window.location.host;
document.getElementById("hostnameExample").innerText = window.location.hostname;
document.getElementById("hrefExample").innerText = window.location.href;
function getAttributeExamples() {
alert(
"host属性示例: " + window.location.host + "\n" +
"hostname属性示例: " + window.location.hostname + "\n" +
"href属性示例: " + window.location.href
);
}
// 方法示例
function reloadPage() {
location.reload();
}
function replaceDocument() {
location.replace("https://www.example.com");
}
</script>
4.document对象
方法 | 作用 |
---|---|
getElementById() | 通过元素的 ID 属性获取元素节点 |
getElementsByTagName() | 通过标签名获取元素节点的集合 |
getElementsByClassName() | 通过类名获取元素节点的集合 |
write() | 向文档写入内容 |
<!DOCTYPE html>
<html>
<head>
<title>DOM操作示例</title>
</head>
<body>
<h2>使用 getElementById 获取元素节点:</h2>
<p id="demo">这是一个示例段落。</p>
<h2>使用 getElementsByTagName 获取元素节点的集合:</h2>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<h2>使用 getElementsByClassName 获取元素节点的集合:</h2>
<p class="fruit">这些都是水果。</p>
<p class="fruit">喜欢吃水果吗?</p>
<script>
// 使用 getElementById 获取元素节点
var demoElement = document.getElementById("demo");
demoElement.style.color = "blue";
// 使用 getElementsByTagName 获取元素节点的集合
var listItems = document.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
listItems[i].style.fontWeight = "bold";
}
// 使用 getElementsByClassName 获取元素节点的集合
var fruitParagraphs = document.getElementsByClassName("fruit");
for (var j = 0; j < fruitParagraphs.length; j++) {
fruitParagraphs[j].style.backgroundColor = "#f9f9f9";
}
document.write("这是使用 document.write 写入的内容。");
</script>
</body>
</html>
5.Array对象
- 创建数组
var fruits = ["apple", "banana", "orange"];
- 为数组元素赋值
//方法一
var myArray = [];
// 使用 push() 方法向数组添加元素
myArray.push("apple");
myArray.push("banana");
myArray.push("orange");
//方法二
// 创建一个空数组
var myArray = [];
// 通过索引为数组元素赋值
myArray[0] = "apple";
myArray[1] = "banana";
myArray[2] = "orange";
- 数组的常用属性和方法
类别 | 名称 | 作用 | ||||
---|---|---|---|---|---|---|
属性 | length | 表示数组的长度,即数组中元素的个数 | ||||
|
|
| ||||
|
| |||||
|
| |||||
|
|
// 属性示例
var myArray = [1, 2, 3, 4, 5];
console.log(myArray.length); // 输出:5
// 方法示例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var joinedFruits = fruits.join(", ");
console.log(joinedFruits); // 输出:Banana, Orange, Apple, Mango
var numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort();
console.log(numbers); // 输出:[1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
var animals = ["cat", "dog"];
animals.push("elephant", "lion");
console.log(animals); // 输出:["cat", "dog", "elephant", "lion"]
var colors = ["red", "green", "blue"];
colors.forEach(function(color) {
console.log(color);
});
// 输出:
// red
// green
// blue
JavaScript定时函数
在 JavaScript 中,你可以使用 setInterval() 函数来创建定时函数。这个函数会每隔一定的时间间隔重复执行指定的代码块。另外,你也可以使用 setTimeout() 函数来创建一个定时器,在指定的时间后执行一次特定的代码。
下面是一个简单的示例,演示如何使用 setInterval() 函数每隔一秒输出一次 “Hello, World!”:
// 使用 setInterval() 函数
setInterval(function() {
console.log("Hello, World!");
}, 1000); // 时间间隔为 1000 毫秒,即 1 秒
如果你想要只执行一次特定的代码,你可以使用 setTimeout() 函数,示例如下:
// 使用 setTimeout() 函数
setTimeout(function() {
console.log("This code will run once after 3 seconds.");
}, 3000); // 时间间隔为 3000 毫秒,即 3 秒
在 JavaScript 中,超时调用和间歇调用是使用定时器函数来实现的。这两种调用方式分别由 setTimeout() 和 setInterval() 函数来实现。
超时调用指的是在指定的时间之后执行一次特定的代码,而间歇调用则是每隔一段时间重复执行特定的代码。
1.调用(setTimeout)示例:
// 使用 setTimeout() 实现超时调用
setTimeout(function() {
console.log("This code will run once after 2 seconds.");
}, 2000); // 2秒后执行
2.间歇调用(setInterval)示例:
// 使用 setInterval() 实现间歇调用
var count = 0;
var intervalId = setInterval(function() {
count++;
console.log("This code will run every 1 second. Count: " + count);
if (count === 5) {
clearInterval(intervalId); // 在执行5次后停止间歇调用
}
}, 1000); // 每隔1秒执行一次
在这个示例中,setInterval() 函数会每隔1秒执行一次指定的代码块,直到执行了5次后通过 clearInterval() 停止间歇调用。
6.Date对象
在 JavaScript 中,Date 对象用于处理日期和时间。你可以使用 Date 对象来获取当前的日期和时间,或者创建特定的日期和时间。
下面是一些 Date 对象的常见用法示例:
1.获取当前日期和时间:
// 创建一个新的 Date 对象,不传递参数即可获取当前日期和时间
var currentDate = new Date();
console.log(currentDate);
2.创建特定日期和时间:
// 创建一个特定的日期和时间,参数依次为年、月(从 0 开始计数)、日、时、分、秒、毫秒
var specificDate = new Date(2024, 3, 15, 12, 30, 0, 0); // 2024年4月15日 12:30:00
console.log(specificDate);
3.获取特定日期和时间的各个部分:
// 获取特定日期和时间的年、月、日、时、分、秒等部分
var year = specificDate.getFullYear(); // 获取年份
var month = specificDate.getMonth(); // 获取月份(从 0 开始)
var day = specificDate.getDate(); // 获取日期
var hours = specificDate.getHours(); // 获取小时
var minutes = specificDate.getMinutes(); // 获取分钟
var seconds = specificDate.getSeconds(); // 获取秒钟
console.log(year, month, day, hours, minutes, seconds);
4.格式化日期输出:
// 格式化日期输出
var formattedDate = specificDate.toDateString(); // 将日期对象转换为字符串
console.log(formattedDate);
Date 对象还提供了许多其他方法和属性,用于处理日期、时间和时区。希望这些示例能帮助你更好地理解 Date 对象的用法。
7.Math对象
在 JavaScript 中,Math 对象提供了一组用于执行数学运算的属性和方法。
下面是一些 Math 对象常见的属性和方法:
- 常见属性:
Math.PI:表示圆周率 π 的近似值(3.14159…)。
Math.E:表示自然对数的底数 e(2.71828…)。 - 常见方法:
Math.abs(x):返回一个数的绝对值。
Math.ceil(x):对一个数进行上舍入操作,返回大于等于该数的最小整数。
Math.floor(x):对一个数进行下舍入操作,返回小于等于该数的最大整数。
Math.round(x):对一个数进行四舍五入操作,返回最接近的整数。
Math.max(x1, x2, …):返回一组数中的最大值。
Math.min(x1, x2, …):返回一组数中的最小值。
Math.pow(x, y):返回 x 的 y 次幂。
Math.sqrt(x):返回一个数的平方根。
Math.random():返回一个介于 0 到 1 之间的随机数。
示例代码:
console.log(Math.PI); // 输出圆周率
console.log(Math.E); // 输出自然对数的底数
console.log(Math.abs(-10)); // 输出绝对值
console.log(Math.ceil(4.3)); // 输出上舍入
console.log(Math.floor(4.8)); // 输出下舍入
console.log(Math.round(4.5)); // 输出四舍五入
console.log(Math.max(1, 2, 3)); // 输出最大值
console.log(Math.min(1, 2, 3)); // 输出最小值
console.log(Math.pow(2, 3)); // 输出幂运算
console.log(Math.sqrt(16)); // 输出平方根
console.log(Math.random()); // 输出随机数
这里只列举了一些常见的属性和方法,Math 对象还提供了其他许多数学相关的函数。希望这些示例能够帮助你更好地理解 Math 对象的使用。
下面使用ceil()方法和random()方法实现随机选择颜色,具体代码下面示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机选择颜色</title>
<style>
.content{
width: 400px;
margin: 50px auto;
font-size: 24px;
}
</style>
</head>
<body>
<div class="content">
本次选择的颜色是:<span id="color"></span>
<input type="button" value="选择颜色" onclick="selColor();">
</div>
</body>
</html>
<script type="text/javascript">
function selColor() {
var color = new Array("红色", "黄色", "蓝色", "绿色", "橙色", "青色", "紫色");
var num = Math.ceil(Math.random() * 7) - 1;
document.getElementById("color").innerHTML = color[num];
}
</script>