javascript网页设计案例

最新推荐文章于 2025-08-12 22:36:33 发布

转角再相遇

最新推荐文章于 2025-08-12 22:36:33 发布

阅读量370

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/sorrty00/article/details/142466395

这篇文章重点讲解一个简单但功能齐全的JavaScript网页设计案例。这是一个待办事项（To-Do List）应用，用户可以添加、删除和标记任务为完成状态。

案例：待办事项应用（To-Do List）

1. 项目结构

todo-app/
├── index.html
├── style.css
└── script.js

2. HTML文件（index.html）

首先，我们需要一个基本的HTML结构来展示待办事项应用的UI。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-Do List</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>To-Do List</h1>
    <input type="text" id="new-task" placeholder="Add a new task...">
    <button id="add-task-btn">Add</button>
    <ul id="task-list"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

3. CSS文件（style.css）

接下来，我们添加一些基本的样式来美化我们的待办事项应用。

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 300px;
}

h1 {
  text-align: center;
}

#new-task {
  width: calc(100% - 22px);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  background-color: #5cb85c;
  color: white;
  cursor: pointer;
  border-radius: 3px;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

li.completed {
  text-decoration: line-through;
  color: #888;
}

li button {
  background: none;
  border: none;
  color: red;
  cursor: pointer;
}

4. JavaScript文件（script.js）

最后，我们编写JavaScript代码来实现添加、删除和标记任务为完成状态的功能。

document.addEventListener('DOMContentLoaded', () => {
  const newTaskInput = document.getElementById('new-task');
  const addTaskBtn = document.getElementById('add-task-btn');
  const taskList = document.getElementById('task-list');

  // 添加任务
  addTaskBtn.addEventListener('click', () => {
    const taskText = newTaskInput.value.trim();
    if (taskText !== '') {
      const li = document.createElement('li');
      li.textContent = taskText;

      // 创建完成按钮
      const completeBtn = document.createElement('button');
      completeBtn.textContent = 'Complete';
      completeBtn.addEventListener('click', () => {
        li.classList.toggle('completed');
      });

      // 创建删除按钮
      const deleteBtn = document.createElement('button');
      deleteBtn.textContent = 'Delete';
      deleteBtn.addEventListener('click', () => {
        taskList.removeChild(li);
      });

      li.appendChild(completeBtn);
      li.appendChild(deleteBtn);
      taskList.appendChild(li);

      newTaskInput.value = '';
    }
  });

  // 输入框为空时禁用添加按钮
  newTaskInput.addEventListener('input', () => {
    addTaskBtn.disabled = newTaskInput.value.trim() === '';
  });

  // 默认禁用添加按钮
  addTaskBtn.disabled = true;
});

运行项目

将上述代码分别复制到 index.html、style.css 和 script.js 文件中。
打开 index.html 文件在浏览器中查看效果。

功能说明

添加任务：用户可以在输入框中输入任务内容，并点击“添加”按钮将任务添加到任务列表中。
标记完成：每个任务项都有一个“完成”按钮，点击后可以标记任务为完成状态，已完成的任务会显示为删除线。
删除任务：每个任务项都有一个“删除”按钮，点击后可以从列表中删除该任务。
输入验证：当输入框为空时，添加按钮会被禁用，防止用户添加空任务。

结论

这个简单的待办事项应用展示了如何使用HTML、CSS和JavaScript构建一个功能齐全的Web应用。通过这个示例可以学习到如何操作DOM、处理用户交互事件以及如何实现基本的应用逻辑，掌握JavaScript网页设计的基本技能。