36、web前端开发之JavaScript(五)
十五. 实际应用案例
在前面的章节中，我们学习了JavaScript的高级概念，现在让我们将这些知识应用到实际项目中。通过实际案例的练习，我们可以更好地理解JavaScript在真实场景中的应用，并学会如何解决实际问题。
1、 操作列表
目标：
实现一个简单的列表操作功能，包括添加列表项、删除列表项、以及列表项的其他操作。
实现功能：
- 点击按钮添加随机编号的列表项。
- 允许删除单个列表项。
- 添加样式美化。
完整代码：
<!DOCTYPE html>
<html>
<head>
<title>列表操作</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
button {
padding: 8px 16px;
margin: 5px;
cursor: pointer;
}
#list {
list-style: none;
padding: 0;
}
.list-item {
padding: 10px;
margin: 5px 0;
background-color: #f0f0f0;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
</head>
<body>
<button onclick="addListItem()">添加列表项</button>
<button onclick="clearList()">清空列表</button>
<ul id="list"></ul>
<script>
let counter = 0;
function addListItem() {
const list = document.getElementById('list');
const li = document.createElement('li');
li.className = 'list-item';
li.innerHTML = `
<span>新项 ${Math.random().toFixed(3)}</span>
<button onclick="this.parentElement.remove()">删除</button>
`;
list.appendChild(li);
counter++;
}
function clearList() {
const list = document.getElementById('list');
list.innerHTML = '';
counter = 0;
}
// 使用闭包保存counter的值
function getCounter() {
return counter;
}
</script>
</body>
</html>
代码解释：
- HTML结构：
- 添加了一个按钮用于触发
addListItem()函数。 <ul>元素用于容纳列表项。- 使用
id属性快速获取DOM元素。
- 添加了一个按钮用于触发
- CSS样式：
- 为列表项添加了背景颜色、边距、内边距等样式，使界面更美观。
- 使用Flexbox布局实现列表项内部的布局（空间分布和对齐）。
- JavaScript功能：
- 添加列表项：
addListItem()函数创建一个新的<li>元素，并为其添加内容和删除按钮。随机数用于模拟不同的列表项。 - 删除功能：
在每个列表项中添加了一个“删除”按钮，点击时移除其父节点（即列表项）。 - 清空列表：
clearList()函数清空列表并重置计数器。 - 闭包计数：
使用闭包保存counter的值，记录已经添加的列表项数量。
- 添加列表项：
关键点：
- 使用
document.createElement动态创建元素节点。 - 使用
appendChild将新节点添加到DOM树中。 - 通过事件监听器（
onclick）实现交互。 - 使用CSS美化界面，使其更符合用户体验。
- 使用闭包保持计数器的私有状态。
2、表单验证
目标：
实现一个简单的表单验证功能，确保用户名至少包含3个字符，并且在提交时显示错误信息。
实现功能：
- 用户名输入验证（至少3个字符）。
- 显示错误信息。
- 阻止表单的默认提交行为。
完整代码：
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.error {
color: red;
margin-top: 5px;
}
.success {
color: green;
}
input, button {
margin: 5px;
padding: 8px;
}
#error {
font-weight: bold;
}
</style>
</head>
<body>
<form id="myForm">
<input type="text" id="username" placeholder="输入用户名">
<button type="submit">提交</button>
</form>
<div id="error"></div>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
const username = document.getElementById('username').value;
const errorDiv = document.getElementById('error');
// 清空错误信息
errorDiv.textContent = '';
// 验证用户名
if (username.length < 3) {
e.preventDefault(); // 阻止默认提交行为
errorDiv.textContent = '用户名至少需要3个字符';
errorDiv.className = 'error';
return;
}
// 添加自定义验证逻辑
if (!validateUsername(username)) {
e.preventDefault();
errorDiv.textContent = '用户名中包含非法字符';
errorDiv.className = 'error';
return;
}
// 提交成功
errorDiv.textContent = '提交成功！';
errorDiv.className = 'success';
});
// 自定义验证函数
function validateUsername(username) {
// 使用正则表达式验证
// 仅允许字母、数字和下划线
const pattern = /^[a-zA-Z0-9_]+$/;
return pattern.test(username);
}
</script>
</body>
</html>
代码解释：
- HTML结构：
- 表单包含一个文本输入框和一个提交按钮。
- 使用
div元素显示错误信息。
- CSS样式：
- 为错误信息和成功信息添加不同的颜色和样式。
- 使用
margin和padding美化表单布局。
- JavaScript功能：
- 事件监听：
监听表单的submit事件，阻止默认提交行为。 - 输入验证：
检查用户名的长度和是否包含非法字符。 - 错误显示：
在错误信息区域显示错误提示。 - 自定义验证函数：
使用正则表达式验证用户名是否符合格式要求。 - 成功反馈：
在成功提交时显示绿色成功提示。
- 事件监听：
关键点：
- 使用
addEventListener绑定事件处理程序。 - 通过
e.preventDefault()阻止默认提交行为。 - 使用正则表达式进行高级验证。
- 使用
className控制错误信息的样式。 - 实现自定义验证逻辑，扩展验证功能。
3、 动态加载内容
目标：
通过Fetch API动态加载外部内容，并将其显示在页面中。
实现功能：
- 使用
<button>触发加载内容。 - 使用Fetch API获取外部HTML文件内容。
- 显示加载过程和错误信息。
完整代码：
<!DOCTYPE html>
<html>
<head>
<title>动态加载内容</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#content {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.loading {
font-weight: bold;
color: #666;
}
</style>
</head>
<body>
<button onclick="loadContent()">加载内容</button>
<div id="content"></div>
<div id="status" class="loading"></div>
<script>
function loadContent() {
const contentDiv = document.getElementById('content');
const statusDiv = document.getElementById('status');
// 重置状态和内容
statusDiv.textContent = '加载中...';
contentDiv.innerHTML = '';
// 使用Fetch API加载内容
fetch('content.html')
.then(response => {
if (!response.ok) {
throw new Error('网络请求失败');
}
return response.text();
})
.then(html => {
contentDiv.innerHTML = html;
statusDiv.textContent = '加载成功！';
})
.catch(error => {
contentDiv.innerHTML = '加载失败，请检查网络连接。';
statusDiv.textContent = `错误：${error.message}`;
});
}
</script>
</body>
</html>
外部文件 (content.html):
<h2>动态加载的内容</h2>
<p>这是从外部文件加载的内容。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
代码解释：
- HTML结构：
- 添加了一个按钮用于触发加载内容。
- 使用
<div>元素显示加载的内容和状态信息。
- CSS样式：
- 为内容容器和状态信息添加了样式。
- 使用
border和padding美化显示区域。
- JavaScript功能：
- Fetch API：
使用fetch()函数异步加载外部内容。 - 状态更新：
在加载过程中显示加载状态。 - 错误处理：
捕获加载失败的错误，并显示错误信息。 - 内容更新：
将加载到的HTML内容插入到页面中。
- Fetch API：
关键点：
- 使用
fetch()实现异步加载。 - 通过Promise链式处理加载过程。
- 显示加载状态和错误信息，提升用户体验。
- 保证UI的响应性，避免界面冻结。