提示信息

HTML、CSS与JavaScript实现的待办事项清单

年少轻狂 已关注
19小时前 发表在 css样式 阅读 0 评论 0

实现一个简单的待办事项清单应用程序可以帮助你实践HTML、CSS和JavaScript。以下是一个基础版本的待办事项清单的实现：

HTML

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

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.     <title>待办事项清单</title>  
  7.     <link rel="stylesheet" href="styles.css">  
  8. </head>  
  9. <body>  
  10.     <div class="container">  
  11.         <h1>待办事项清单</h1>  
  12.         <input type="text" id="taskInput" placeholder="输入你的待办事项...">  
  13.         <button onclick="addTask()">添加任务</button>  
  14.         <ul id="taskList"></ul>  
  15.     </div>  
  16.     <script src="script.js"></script>  
  17. </body>  
  18. </html>

CSS

接下来，为应用程序添加一些基本样式。

  1. /* styles.css */  
  2. body {  
  3.     font-family: Arial, sans-serif;  
  4.     background-color: #f4f4f4;  
  5.     display: flex;  
  6.     justify-content: center;  
  7.     align-items: center;  
  8.     height: 100vh;  
  9.     margin: 0;  
  10. }  
  11. .container {  
  12.     background: white;  
  13.     padding: 20px;  
  14.     border-radius: 5px;  
  15.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
  16.     width: 300px;  
  17. }  
  18. h1 {  
  19.     text-align: center;  
  20.     color: #333;  
  21. }  
  22. input[type="text"] {  
  23.     width: calc(100% - 22px);  
  24.     padding: 10px;  
  25.     margin-bottom: 10px;  
  26.     border: 1px solid #ddd;  
  27.     border-radius: 4px;  
  28. }  
  29. button {  
  30.     width: 100%;  
  31.     padding: 10px;  
  32.     background-color: #5cb85c;  
  33.     color: white;  
  34.     border: none;  
  35.     border-radius: 4px;  
  36.     cursor: pointer;  
  37. }  
  38. button:hover {  
  39.     background-color: #4cae4c;  
  40. }  
  41. ul {  
  42.     list-style-type: none;  
  43.     padding: 0;  
  44. }  
  45. li {  
  46.     background: #f9f9f9;  
  47.     margin: 5px 0;  
  48.     padding: 10px;  
  49.     border-radius: 4px;  
  50.     display: flex;  
  51.     justify-content: space-between;  
  52.     align-items: center;  
  53. }  
  54. li button {  
  55.     background-color: #d9534f;  
  56.     border: none;  
  57.     color: white;  
  58.     padding: 5px 10px;  
  59.     border-radius: 3px;  
  60.     cursor: pointer;  
  61. }  
  62. li button:hover {  
  63.     background-color: #c9302c;  
  64. }

JavaScript

最后，使用JavaScript实现待办事项的添加和删除功能。

  1. // script.js  
  2. function addTask() {  
  3.     const taskInput = document.getElementById('taskInput');  
  4.     const taskList = document.getElementById('taskList');  
  5.     if (taskInput.value.trim() !== '') {  
  6.         const li = document.createElement('li');  
  7.         li.textContent = taskInput.value;  
  8.         const deleteButton = document.createElement('button');  
  9.         deleteButton.textContent = '删除';  
  10.         deleteButton.onclick = function() {  
  11.             taskList.removeChild(li);  
  12.         };  
  13.         li.appendChild(deleteButton);  
  14.         taskList.appendChild(li);  
  15.         taskInput.value = '';  // 清空输入框  
  16.     }  
  17. }

说明

  1. HTML部分定义了应用的基本结构，包括一个输入框、添加按钮和一个待办事项列表。
  2. CSS部分提供了一些基本样式，使应用更美观。
  3. JavaScript部分定义了addTask函数，该函数用于添加新任务，并为每个任务添加一个删除按钮，点击该按钮可以将任务从列表中移除。

通过此简单的待办事项清单，你可以了解如何使用JavaScript操作DOM，并将其与HTML/CSS结合来构建动态网页应用。你也可以在此基础上扩展功能，如添加任务的修改、按优先级排序等。

年少轻狂 关注 已关注

最近一次登录：2024-11-21 01:20:44   

暂时还没有签名，请关注我或评论我的文章
0条评论
按时间正序 按时间倒序 按喜欢排序

×
分享到朋友圈