正文

web前端小案例 优秀的web前端案例

小编
小编 V管理员 /0 评论 /80 阅读
0103
欧意国内注册

使用HTML、CSS和JavaScript创建一个简单的待办事项列表

在这篇文章中，我们将学习如何使用HTML、CSS和JavaScript创建一个简单的待办事项列表，这个列表将允许用户添加新的待办事项，删除已完成的事项，并将未完成的事项标记为已完成，我们将分三个步骤来完成这个项目：创建HTML结构，编写CSS样式，以及编写JavaScript代码。

第一步：创建HTML结构

我们需要创建一个HTML文件，然后在其中添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项列表</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>待办事项列表</h1>
    <input type="text" id="todoInput" placeholder="输入新的待办事项">
    <button onclick="addTodo()">添加</button>
    <ul id="todoList"></ul>
    <script src="scripts.js"></script>
</body>
</html>

这段代码创建了一个基本的HTML结构，包括一个标题、一个输入框、一个按钮和一个无序列表，我们还在<head>标签中添加了一个链接到CSS文件的引用，以及一个链接到JavaScript文件的引用。

第二步：编写CSS样式

接下来，我们需要创建一个CSS文件（styles.css），并在其中添加以下代码：

body {
    font-family: Arial, sans-serif;
}
h1 {
    text-align: center;
}
#todoInput {
    width: 75%;
    padding: 10px;
    margin: 20px auto;
    display: block;
}
button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
}
ul {
    list-style-type: none;
    padding: 0;
}

这段代码为页面添加了一些基本样式，包括字体、颜色和边距，我们还将输入框和按钮设置为居中显示。

第三步：编写JavaScript代码

我们需要创建一个JavaScript文件（scripts.js），并在其中添加以下代码：

function addTodo() {
    const todoInput = document.getElementById('todoInput');
    const todoList = document.getElementById('todoList');
    const newTodo = document.createElement('li');
    newTodo.textContent = todoInput.value;
    newTodo.onclick = function() {
        this.classList.toggle('completed');
    };
    todoList.appendChild(newTodo);
    todoInput.value = '';
}

这段代码定义了一个名为addTodo的函数，该函数在用户点击“添加”按钮时执行，函数首先获取输入框和列表元素，然后创建一个新的<li>元素，并将其文本内容设置为输入框的值，接下来，我们为新创建的待办事项添加一个点击事件监听器，当用户点击该项时，它将切换“completed”类，我们将新创建的待办事项添加到列表中，并清空输入框。