基于jQuery的ToDoList案例

最新推荐文章于 2022-07-26 11:59:12 发布

~✨缘浅情深

最新推荐文章于 2022-07-26 11:59:12 发布

阅读量187

点赞数 1

文章标签： jquery css html5

本文链接：https://blog.csdn.net/qq_45018127/article/details/118404760

版权

该博客介绍了如何使用jQuery创建一个ToDoList案例，包括效果展示、HTML结构、CSS样式和jQuery代码实现。通过本地存储保存数据，允许用户添加、完成和删除任务。读者可以下载jQuery库并尝试运行代码。

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

基于jQuery的ToDoList案例

1、效果展示

在这里插入图片描述
页面有一个输入框，正在进行的事情和已完成的事情，数据是存储在本地存储的，就算页面刷新、关闭数据也不会消失。在输入框输入要进行的事件，按下回车，就会添加到正在进行的列表里，点击复选框，事件添加到已完成列表，点击后面的叉号，删除事件。

2、html部分

       <header>
			<section class="head w">
				<label for="title">ToDoList</label>
				<input type="text" name="title" id="title" placeholder="添加ToDo" required="required" />
			</section>
		</header>
		<section>
			<div class="w">
				<div class="label">
					<h2>正在进行</h2>
					<span id="todocount"></span>
				</div>
				<ol id="todolist" class="demo_box">
					
				</ol>
			</div>
			<div class="w">
				<div class="label">
					<h2>已经完成</h2>
					<span id="donecount"></span>
				</div>
				<ul id="donelist">
					
				</ul>
			</div>
		</section>

3、css部分

body {
   
	background: #ccc;
}
.w {
   
	width: 700px;
	margin: 0 auto;
}
.head,
.label {
   
	display: flex;
	justify-content: space-between;
	align-items