JavaScript网页设计案例

A_cot

于 2024-09-12 09:10:43 发布

阅读量310

点赞数 13

文章标签： javascript 前端开发语言 html css

本文链接：https://blog.csdn.net/A_cot/article/details/142165504

版权

以下是一个使用 JavaScript 实现的简单待办事项列表网页案例。

HTML 结构：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript 待办事项列表案例</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>待办事项列表</h1>
  <input type="text" id="taskInput" placeholder="添加新任务">
  <button id="addTaskButton">添加任务</button>
  <ul id="taskList"></ul>
  <script src="script.js"></script>
</body>

</html>

CSS 样式（styles.css）：

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

h1 {
  text-align: center;
}

#taskInput {
  padding: 10px;
  width: 300px;
  margin-bottom: 10px;
}

#addTaskButton {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

#taskList {
  list-style-type: none;
  padding: 0;
}

#taskList li {
  background-color: white;
  padding: 10px;
  margin-bottom: 5px;
}

#taskList li button {
  margin-left: 10px;
  background-color: #f44336;
  color: white;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
}

JavaScript 代码（script.js）：

// 获取元素
const taskInput = document.getElementById('taskInput');
const addTaskButton = document.getElementById('addTaskButton');
const taskList = document.getElementById('taskList');

// 添加任务函数
function addTask() {
  const taskText = taskInput.value.trim();
  if (taskText!== '') {
    const li = document.createElement('li');
    li.textContent = taskText;
    const deleteButton = document.createElement('button');
    deleteButton.textContent = '删除';
    deleteButton.addEventListener('click', function () {
      taskList.removeChild(li);
    });
    li.appendChild(deleteButton);
    taskList.appendChild(li);
    taskInput.value = '';
  }
}

// 添加任务按钮点击事件
addTaskButton.addEventListener('click', addTask);

// 输入框回车事件
taskInput.addEventListener('keypress', function (event) {
  if (event.key === 'Enter') {
    addTask();
  }
});

分析：

HTML 结构部分：
- <head>标签中设置了字符编码、视口和引入外部 CSS 文件。
- <body>中包含一个标题<h1>、一个输入框<input>用于输入任务、一个按钮<button>用于添加任务、一个无序列表<ul>用于显示任务列表。最后引入了 JavaScript 文件。
CSS 样式部分：
- 整体设置了页面的字体和背景颜色。
- 对标题进行了居中显示。
- 输入框设置了 padding 和宽度，并在底部添加了 margin。
- 添加任务按钮设置了背景颜色、文本颜色、无边框和鼠标指针为手型。
- 任务列表去除了默认的列表样式。
- 任务列表项设置了背景颜色和 padding。
- 任务列表项中的删除按钮设置了背景颜色、文本颜色、无边框、鼠标指针为手型和 padding。
JavaScript 代码部分：
- 首先获取页面中的元素，包括输入框、添加任务按钮和任务列表。
- addTask函数用于添加任务。首先获取输入框中的文本内容并去除两端的空白字符。如果文本内容不为空，则创建一个<li>元素和一个删除按钮<button>。将输入的任务文本设置为<li>元素的文本内容，并将删除按钮添加到<li>元素中。当点击删除按钮时，会移除对应的任务列表项。最后将<li>元素添加到任务列表中，并清空输入框。
- 为添加任务按钮添加点击事件监听器，点击按钮时调用addTask函数。
- 为输入框添加键盘按下事件监听器，当按下回车键时也调用addTask函数。