利用html和css和js创建待办事项管理系统

好的，下面是一个简单的待办事项管理系统的实现：

首先，在 HTML 中创建一个表单，包含一个输入框和一个按钮，用于添加新的待办事项：

<form>
  <input type="text" id="newTodo" placeholder="Add a new todo...">
  <button type="submit" onclick="addTodo()">Add</button>
</form>

然后，在 CSS 中定义一些样式，使表单看起来更好看：

form {
  margin-bottom: 20px;
  text-align: center;
}

input[type="text"] {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

button {
  padding: 10px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

接下来，在 JavaScript 中定义一个数组，用于存储所有的待办事项：

var todos = [];

然后，定义一个函数，用于添加新的待办事项。该函数会获取输入框中的文本，将其添加到数组中，并且重新渲染待办事项列表：

function addTodo() {
  var newTodo = document.getElementById('newTodo').value;
  todos.push(newTodo);
  renderTodos();
}

接着，定义一个函数，用于渲染待办事项列表。该函数会遍历数组中的每个待办事项，创建一个新的 HTML 元素，并将其添加到一个列表中：

function renderTodos() {
  var todoList = document.getElementById('todoList');
  todoList.innerHTML = '';
  for (var i = 0; i < todos.length; i++) {
    var todo = todos[i];
    var li = document.createElement('li');
    li.innerHTML = todo;
    todoList.appendChild(li);
  }
}

最后，在 HTML 中添加一个空的列表，用于显示所有的待办事项：

<ul id="todoList"></ul>

现在，整个待办事项管理系统就完成了。用户可以在输入框中添加新的待办事项，系统会将其添加到列表中并展示出来。当然，这只是一个简单的示例，你可以根据自己的需求进一步扩展和优化这个系统。