JavaScript、Css/Html 实现待办事项列表

本文介绍了如何使用JavaScript、CSS和HTML技术来构建一个包含新增、进行中和已完成三个模块的待办事项列表管理系统。设计要求包括移动端和PC端的适配,以及输入框、进行中列表和完成列表的交互功能,如编辑和删除任务。
摘要由CSDN通过智能技术生成

ToDoList——待办事项列表

利用JavaScript、Css/Html技术设计一个简单的待办事项列表管理系统,主要包含新增待办事项、正在进行列表、完成列表共计三个模块。

设计需求

  1. 移动端为主/PC端可用。
  2. 输入框:输入待办事项。
  3. 正在进行列表:能够显示出未完成的内容,可以对每一项内容,进行修改(改为完成,删除)。
  4. 完成列表:能够显示完成的内容,可以对每一项内容,进行修改(改为未完成,删除)。

项目制作

  1. 编写Html结构。
  2. 编写Css样式表。
  3. 实现JavaScript交互功能:输入框的输入功能、未完成列表的显示功能、完成列表的显示功能、修改/删除列表的功能。

一、html结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Todolist</title>
	<link rel="shortcut icon" href="github.svg" type="image/x-icon">
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/rem.js"></script>
</head>
<body>

	<!-- html结构 -->
	<!-- 

	.main>(.header>(.logo{Todolist}+input))+(.done>(h3>span.title{正在进行}+span.num)+.list)+(.done>(h3>span.title{已完成}+span.num)+.list)

	 -->

	 <div class="main">
	 	<div class="header">
	 		<div class="logo">ToDoList</div>
	 		<form action="javascript:;" method="get">
	 			<input type="text" placeholder="请输入待办事项" id="input">
	 		</form>
	 	</div>
	 	<div class="doing todo">
	 		<h3><span class="title">正在进行</span><span class
  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的待办事项管理系统的实现: 首先,在 HTML 中创建一个表单,包含一个输入框和一个按钮,用于添加新的待办事项: ```html <form> <input type="text" id="newTodo" placeholder="Add a new todo..."> <button type="submit" onclick="addTodo()">Add</button> </form> ``` 然后,在 CSS 中定义一些样式,使表单看起来更好看: ```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 中定义一个数组,用于存储所有的待办事项: ```javascript var todos = []; ``` 然后,定义一个函数,用于添加新的待办事项。该函数会获取输入框中的文本,将其添加到数组中,并且重新渲染待办事项列表: ```javascript function addTodo() { var newTodo = document.getElementById('newTodo').value; todos.push(newTodo); renderTodos(); } ``` 接着,定义一个函数,用于渲染待办事项列表。该函数会遍历数组中的每个待办事项,创建一个新的 HTML 元素,并将其添加到一个列表中: ```javascript 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 中添加一个空的列表,用于显示所有的待办事项: ```html <ul id="todoList"></ul> ``` 现在,整个待办事项管理系统就完成了。用户可以在输入框中添加新的待办事项,系统会将其添加到列表中并展示出来。当然,这只是一个简单的示例,你可以根据自己的需求进一步扩展和优化这个系统。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值