输出javascript包含六个不同javascript知识点的网页案例
时间: 2023-08-14 22:08:35 浏览: 68
好的,以下是一个使用 JavaScript 编写的网页案例,其中包含了六个不同的 JavaScript 知识点:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Web Page Example</title>
</head>
<body>
<h1>JavaScript Web Page Example</h1>
<p id="message">Hello, JavaScript!</p>
<button onclick="changeMessage()">Change Message</button>
<script>
// 1. DOM 操作
let messageElement = document.getElementById("message");
// 2. 事件监听
function changeMessage() {
let newMessage = prompt("Enter a new message:");
messageElement.textContent = newMessage;
}
// 3. 定时器
setInterval(function() {
let date = new Date();
let timeElement = document.getElementById("time");
timeElement.textContent = date.toLocaleTimeString();
}, 1000);
// 4. AJAX 请求
let request = new XMLHttpRequest();
request.open("GET", "https://jsonplaceholder.typicode.com/todos/1");
request.onload = function() {
if (request.status === 200) {
let todo = JSON.parse(request.responseText);
let todoElement = document.getElementById("todo");
todoElement.textContent = todo.title;
} else {
console.log("Error loading todo.");
}
};
request.send();
// 5. 定义类
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
let person = new Person("John", 30);
person.sayHello();
// 6. 使用第三方库
let numbers = [1, 2, 3, 4, 5];
let sum = _.sum(numbers);
console.log(`The sum of the numbers is ${sum}.`);
</script>
<p>The current time is <span id="time"></span>.</p>
<p>Todo: <span id="todo"></span></p>
</body>
</html>
```
这个网页案例包含了以下六个 JavaScript 知识点:
1. DOM 操作
2. 事件监听
3. 定时器
4. AJAX 请求
5. 定义类
6. 使用第三方库(这里使用了 Lodash 库来计算数组的和)