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

最新推荐文章于 2023-11-06 20:12:59 发布

LinHt_CSDN

最新推荐文章于 2023-11-06 20:12:59 发布

阅读量2.4k

点赞数 3

分类专栏：前端文章标签： javascript css html5

本文链接：https://blog.csdn.net/LinHt_CSDN/article/details/108108495

版权

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

摘要由CSDN通过智能技术生成

ToDoList——待办事项列表

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

设计需求

移动端为主/PC端可用。
输入框：输入待办事项。
正在进行列表：能够显示出未完成的内容，可以对每一项内容，进行修改（改为完成，删除）。
完成列表：能够显示完成的内容，可以对每一项内容，进行修改（改为未完成，删除）。

项目制作

编写Html结构。
编写Css样式表。
实现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