当前位置：首页 > wzjs >正文

网上做论文的网站有哪些网站维护要做哪些工作

wzjs 2025/9/1 10:00:46

网上做论文的网站有哪些,网站维护要做哪些工作,南宁市建设工程信息网,广西建设职业技术学院管理工程系网站2014考试前培训时间十五. 实际应用案例在前面的章节中，我们学习了JavaScript的高级概念，现在让我们将这些知识应用到实际项目中。通过实际案例的练习，我们可以更好地理解JavaScript在真实场景中的应用，并学会如何解决实际问题。 1、操作列表目标…

十五. 实际应用案例

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