ToDoList. jQuery版

这个博客展示了如何使用HTML、CSS和JavaScript创建一个简单的TodoList应用。通过监听键盘事件,当用户按回车键时,可以将输入的任务添加到列表中,并存储在localStorage中。应用还包括删除任务和切换任务状态的功能,所有数据的增删改都在页面刷新后保持。样式设计简洁,提供了进行中和已完成任务的计数显示。
摘要由CSDN通过智能技术生成
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="index.css"/>
	</head>
	<body>
		<header>
			<section>
				<label>ToDoList</label>
				<input type="text" name="title" id="title" placeholder="添加ToDo" required="" />
			</section>
		</header>
		
		<section class="main">
			<h2>正在进行 <span id="todocount">0</span></h2>
			<ol id="todolist">
				<!-- <li></li> -->
			</ol>
			<h2>已经完成 <span id="donecount">0</span></h2>
			<ul id="donelist">
				<!-- <li></li> -->
			</ul>
		</section>
		
		<footer>
			Copyright &copy; 2021 todolist.cn
		</footer>
	</body>
	<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/todolist.js" type="text/javascript" charset="utf-8"></script>
</html>
$(function() {
	load();
	$("#title").on("keydown", function(e) {
		if (e.keyCode === 13) {
			if($(this).val()==""){
				alert("请输入内容");
			}else{
				//先读取本地储存数据
				var local = getData();
				//更新local数组,将新数据添加到local数组
				local.push({
					title: $(this).val(),
					done: false
				});
				saveData(local);
				$(this).val("")
				
				//本地数据渲染到页面中
				load();
			}
		}
	});
	//删除操作
	$("ol,ul").on("click", "a", function() {
		var data = getData();
		var index = $(this).attr("id");
		data.splice(index,1);
		saveData(data);
		load();
	})
	//点击复选框
	 $("ol,ul").on("click","input",function(){
		 var data = getData();
		 var index = $(this).siblings("a").attr("id");
		 data[index].done = $(this).prop("checked");
		 saveData(data);
		 load();
	 })

	//读取本地数据
	function getData() {
		var data = localStorage.getItem("todolist");
		if (data !== null) {
			return JSON.parse(data);
		} else {
			return [];
		}
	}

	//保存本地数据
	function saveData(data) {
		localStorage.setItem("todolist", JSON.stringify(data));
	}

	//渲染数据
	function load() {
		var data = getData();
		$("ol,ul").empty();
		var todoCount = 0;
		var doneCount = 0;
		$.each(data, function(i, n) {
			if(n.done){
				$("ul").prepend("<li><input type='checkbox' checked='checked'/> <p>" + n.title +
					"</p> <a href='javascript:;' id=" + i + "></a></li>");
					doneCount++;
			}else{
				$("ol").prepend("<li><input type='checkbox'/> <p>" + n.title +
					"</p> <a href='javascript:;' id=" + i + "></a></li>");
					todoCount++;
			}
		})
		$("#todocount").text(todoCount);
		$("#donecount").text(doneCount);
	}


})
* {
	margin: 0;
	padding: 0;
}

body {
	background-color: gainsboro;
}

header {
	background-color: #353535;
	color: whitesmoke;
}

header section {
	margin: 0 auto;
	width: 600px;
	height: 50px;
	line-height: 50px;
}

label {
	font-size: 20px;
}

header input {
	float: right;
	margin-top: 14px;
	outline: none;
	width: 350px;
	height: 25px;
	margin-left: 100px;
	padding-left: 10px;
	border-radius: 6px;
	box-shadow: 2px 2px 2px 2px #e2e2e2 inset;
}

.main {
	margin: 0 auto;
	width: 600px;
	/* padding-top: 20px; */
}

.main::after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

h2 {
	font-weight: bold;
	padding: 20px 0;
}

.main h2 span {
	float: right;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin-top: 5px;
	text-align: center;
	border-radius: 10px;
	font-size: 14px;
	background-color: #eee;
}

ol li {
	list-style: none;
	/* width: 600px; */
	padding: 5px 10px;
	height: 20px;
	border-radius: 3px;
	background-color: white;
	border-left: 3px solid #00aa7f;
	margin-bottom: 13px;
}

ul li {
	list-style: none;
	/* width: 600px; */
	padding: 5px 10px;
	height: 20px;
	border-radius: 3px;
	background-color: #e6e6e6;
	border-left: 3px solid #bababa;
	margin-bottom: 13px;
}

footer {
	margin: 0 auto;
	width: 600px;
	text-align: center;
}

.main li input {
	width: 20px;
	height: 20px;
	margin-right: 10px;
	float: left;
}
.main a {
	position: relative;
	float: right;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background-color: whitesmoke;
}
.main a::after{
	content: "";
	position: absolute;
	top: -5px;
	left: -5px;
	display: block;
	width: 21px;
	height: 21px;
	border-radius: 13px;
	border: 3px solid whitesmoke;
}
.main p {
	float: left;
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值