36、web前端开发之JavaScript(五)-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_22910257/article/details/146989459

十五. 实际应用案例

在前面的章节中，我们学习了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内容插入到页面中。