前端学习Task2：Todo list任务列表

最新推荐文章于 2025-06-20 11:25:17 发布

赵之星bling

最新推荐文章于 2025-06-20 11:25:17 发布

阅读量512

点赞数

CC 4.0 BY-SA版权

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/Michellezhaozy/article/details/103098377

本文详细介绍了一个简单的To-do List应用的构建过程，包括HTML、CSS和jQuery的使用，实现任务的添加、修改、完成和删除功能。代码示例清晰，便于理解和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Todo list

主要分为键入，待完成，已完成三个区域
在这里插入图片描述

代码

.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TO DO LIST</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="container">
		<h2>TO DO LIST</h2>
		<div id="add">
			<h3>Add Task</h3>
			<div class="line"></div>
			<input type="text" id="input" value="请输入内容"/>
			<button>ADD</button>
		</div>
		<div id="incomplete">
			<h3>Incomplete</h3>
			<div class="line"></div>
			<ul></ul>
		</div>
		<div id="completed">
			<h3>Completed</h3>
			<div class="line"></div>
			<ul></ul>
		</div>
	</div>
	<script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>
  <script src="js/script.js"></script>
</body>
</html>

css

*{
	padding: 0px;
	margin: 0px;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
}
button{
	outline: none;
	border: none;
	background-color: #fff;
}
body{
	background-color: #dbe4e6;
	font: 15px/130% arial, sans-serif;
	color: #555;
}
.container{
	position: absolute;
	top: 20px;
	left: 50%;
	margin-left: -200px;
	height: auto;
	width: 400px;
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.container h2{
	margin: 40px auto 20px;
	font-size: 20px normal;
	text-align: center;
}

h3{
	margin: 0px 25px;
	font-size: 17px normal;
	text-align: left;
}

.line{
	height: 1.5px;
	width: 350px;
	margin: 10px auto;
	background-color: #555;
}

li .level2{
	background-color: #ccc;
	height: 1px;
	width: 325px;
	margin-left: 12.5px;
}

#add,
#incomplete,
#completed{
	height: auto;
	width: 100%;
	margin: 5px auto;
}

#add #input{
	height: 30px;
	width: 270px;
	margin: auto 10px;
	margin-left: 30px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	outline: none;
	padding: 2.5px;
	font-size: 15px;
	float: left;
	color: #888;
	letter-spacing: 120%;
}

#add button{
	height: 30px;
	width: 50px;
	margin: 2.5px 0px 0px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

ul{
	height: auto;
	width: 350px;
	margin: 0 auto 10px;
	font-size: 15px;
}

ul li{
	height: auto;
	width: 100%;
}

ul li div{
	float: left;
	width: 255px;
	height: auto;
	margin: 10px;
	font-size: 15px;
	letter-spacing: 120%;
}

ul li img{
	cursor: pointer;
	height: 20px;
	width: 20px;
	background-size: 100%;
	margin: 10px 5px 10px 0px;
	float: left;
	filter: saturate(0%);
}

.ripeout{
	text-align: center;
	margin-left: 30px ; 
}

ul li img:hover{
	filter: saturate(100%);
	/*filter: drop-shadow(0px 0px 1px #9eb8e6);*/
}

#incomplete #edit{
	float: left;
	width: 270px;
	height: 30px;
	margin: 10px;
	padding: 2.5px;
	font-size: 15px;
	border-radius: 5px;
	border: 1px solid #ccc;
	outline: none;
}

.jquery

$(function(){
	var add = $('#add');
		incomplete = $('#incomplete'),
		completed = $('#completed'),
		button = add.find('button'),
		input =  add.find('#input');

	$('#input').focus(function(){
		$(this).val('');
	});


	button.click(function(){
		var in_list = incomplete.find('ul');
		var content = input.val();
		if (content == "") {
			window.alert("请输入内容");
			return false;
		}
		input.val("");
		in_list.append('<li></li>');
		var list_item = in_list.find('li:last-child');
		var div = '<div>' + content + '</div>';
		var img1 = '<img src="img/modify2.png" class = "modify" alt=""></img>';
		var img2 = '<img src="img/delete2.png" class = "delete" alt=""></img>';
		var img3 = '<img src="img/complete2.png" class = "complete" alt=""></img>';
		var line = '<div class="line level2"></div>';
		list_item.append(div+img1+img2+img3+line);
	});


	$("body").on("click",".modify",function(){
		var list_item = $(this).parent();
		var content = list_item.find('div')[0];
		var temp = content.innerHTML;
		content.remove();
		list_item.prepend('<input type="text" value="" id="edit"/>');
		list_item.find('#edit').val(temp);
		list_item.find('.modify').remove();
		list_item.find('.delete').remove();
		list_item.find('.complete').css({
			'height':'20px',
			'width':'20px',
			'margin-left':'15px',
			'margin-top':'15px'
		});
		list_item.find($(".complete")).attr("class","confirm");
		$("body").on("click",".confirm",function(){
			var content = $('#edit').val();
			if (content == "") {
				window.alert("请输入内容");
				return false;
			}
			$(this).remove();
			list_item.find('#edit').remove();
			var div = '<div>' + content + '</div>';
			var img1 = '<img src="img/modify2.png" class = "modify" alt=""></img>';
			var img2 = '<img src="img/delete2.png" class = "delete" alt=""></img>';
			var img3 = '<img src="img/complete2.png" class = "complete" alt=""></img>';
			list_item.prepend(div+img1+img2+img3);
		});
	});


	$("body").on("click",".complete",function(){
		var in_item = $(this).parent();
		var com_list = completed.find('ul');
		var content = in_item.find($('div'))[0];
		com_list.append('<li></li>');
		var list_item = com_list.find('li:last-child');
		var div = '<div>' + content.innerHTML + '</div>';
		var img1 = '<img src="img/delete0.png" class = "ripeout" alt=""></img>';
		var line = '<div class="line level2"></div>';
		list_item.append(div+img1+line);
		in_item.remove();
	});

	$("body").on("click",".delete",function(){
		$(this).parent().remove();
	});

	$("body").on("click",".ripeout",function(){
		$(this).parent().remove();
	});
});