ToDoList—最简单的待办事项列表

最新推荐文章于 2022-05-13 20:56:23 发布
最新推荐文章于 2022-05-13 20:56:23 发布
阅读量1k 收藏 2
点赞数 2
分类专栏： javascript html 文章标签： html5 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/remakez/article/details/120786482
版权

ToDoList—最简单的待办事项列表

代码如下：(样式与网上的相同，js代码不同)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>ToDoList—最简单的待办事项列表</title>
		<meta name="description" content="ToDoList无须注册即可使用，数据存储在用户浏览器的html5本地数据库里，是最简单最安全的待办事项列表应用！" />
		<link rel="stylesheet" href="./css/index.css">
	</head>
	<body>
		<header>
			<section>
				<form action="" id="form" onclick="">
					<label for="title">ToDoList</label>
					<input type="text" id="title" name="title" placeholder="添加ToDo" required="required"
						autocomplete="off" />
				</form>
			</section>
		</header>
		<section>
			<h2>正在进行 <span id="todocount">0</span></h2>
			<ol id="todolist" class="demo-box">

			</ol>
			<h2>已经完成 <span id="donecount">0</span></h2>
			<ul id="donelist">
			</ul>
		</section>
		<footer>
			Copyright &copy; 2014 todolist.cn <a href="javascript:clear();">clear</a>
		</footer>
		<script type="text/javascript">
			var title = document.querySelector('#title');
			var ol = document.querySelector('#todolist')
			var ul = document.querySelector('#donelist')
			load();
			// 添加li
			title.addEventListener('keydown', function(e) {
				e = e || window.event;
				if (e.keyCode == 13) {
					if (title.value == '') {
						return
					} else {
						var todolist = {
							title: title.value,
							done: false
						}
						var arr = getdata();
						arr.push(todolist);
						saveData(arr);
						load()
					}
				}
			})  
			//存储数据
			function saveData(todolist) {
				return window.localStorage.setItem('todo', JSON.stringify(todolist))//转化为字符串存储
			}
			//获取数据并存储
			function getdata() {
				var data = window.localStorage.getItem('todo')
				if (data) {
					return JSON.parse(data); //转化为对象
				} else {
					return [];
				}
			}
			//刷新
			function load() {
				//获取最新的存储数据
				var ol = document.querySelector('#todolist')
				var ul = document.querySelector('#donelist')
				var todoCount = document.querySelector('#todocount');
				var doneCount = document.querySelector('#donecount');
				var num = 0;
				var data = getdata()
				//删除原来的子节点，重新填入
				var childs = ol.childNodes;
				for (var i = childs.length - 1; i >= 0; i--) {
					ol.removeChild(childs[i]);
				}
				var childs = ul.childNodes;
				for (var i = childs.length - 1; i >= 0; i--) {
					ul.removeChild(childs[i]);
				}
				var todocount = 0;
				var donecount = 0;
				data.forEach(function(item, index) {
					var li = document.createElement('li')
					li.innerHTML = "<input class='change' type='checkbox'/><p>" + item.title + "</p><a href='#'></a>";
					li.className = num++;
					if (item.done) {
						ul.insertBefore(li, ul.children[0])
						li.children[0].checked = 'checked'
						donecount++
					} else {
						ol.insertBefore(li, ol.children[0])
						todocount++
					}
				})
				todoCount.innerText = todocount
				doneCount.innerText = donecount
			}
			//删除
			ol.addEventListener('click', function(e) {
				e = e || window.event;
				if (e.target.nodeName == 'A') {
					ol.removeChild(e.target.parentNode)
					var data = getdata();
					data.splice(e.target.parentNode.className, 1);
					saveData(data);
					load();
				}
			})

			// 进行与完成之间跳转
			ol.addEventListener('click', function(e) {
				e = e || window.event;
				if (e.target.className == 'change') {
					var remove = ol.removeChild(e.target.parentNode);
					var data = getdata();
					data[e.target.parentNode.className].done = true;
					saveData(data);
					load();
				}

			})
			ul.addEventListener('click', function(e) {
				e = e || window.event;
				if (e.target.className == 'change') {
					var remove = ul.removeChild(e.target.parentNode);
					var data = getdata();
					data[e.target.parentNode.className].done = false;
					saveData(data);
					load();
				}

			})

			//编辑li文本
			var n = 0;
			ol.addEventListener('click', function(e) {
				if (e.target.nodeName === 'P') {
					var p = e.target;
					var title = p.innerHTML
					p.innerHTML = "<input type='text' id='input' value='" + title + "'/>"
					var input = document.getElementById('input')
					input.select() //选中input中内容
					input.addEventListener('blur', function() {
						if (input.value) {
							var data = getdata();
							// var index = 'input'.substring(1);//字符串截取 索引1及其后所有的字符
							// console.log(index);//nput
							data[e.target.parentNode.className].title = input.value;
							saveData(data);
							load();
						}else{
							alert('不能为空！');
						}
					})
				}
			})
		</script>
	</body>
</html>
remakez
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
todoList 待办事项 Demo
weixin_42959207的博客
03-26 4038
todoList 待办事项 Demo 项目效果： 项目源码：https://github.com/wangduxiu/Angular7-Demo.git 前台页面： 业务逻辑： tolistHasKeyWord(toList:any,keyWords:any) {}： 自己封装的一个方法用来判断数组toList中有没有用户输入的值keyWords 循环遍历自定义的一个数组toList中的每...
[vue] todoList,待办项列表实现
蹲在人生路上的那只猫
07-21 2083
直接上图吧！ 然后上代码啦！
ToDoList:简单的待办事项列表应用
05-12
作业前-ToDoList ToDoList是一个Android应用程序，它允许构建待办事项列表和基本的待办事项管理功能，包括添加新项目，编辑和删除现有项目。 提交人： Joanna Illing 花费时间：总共花费38个小时 用户故事 完成以下必需的功能： 用户可以成功地从待办事项列表中添加和删​​除项目 用户可以点击列表中的待办事项，并打开待办事项的编辑屏幕，然后对待办事项列表中显示的文本进行任何更改。 用户可以保留待办事项，并在应用重启时正确检索它们 实现了以下可选功能： 将待办事项保留而不是文本文件中 改善列表中待办事项的样式 添加对待办事项的完成截止日期的支持（并显示在listview项中） 使用而不是新的Activity来编辑项目 添加对选择每个待办事项优先级的支持（并显示在列表视图项中） 调整样式以改善UI / UX，玩颜色，图像或背景 实现了以下附加功
ToDoList—最简单的待办事项列表（经典案例）重点
weixin_52065872的博客
05-13 3985
案例说明 案例分析 案例实现代码 在这里插入代码片 代码运行结果 插入结果图片
TodoList:这是一个简单的待办事项清单
05-28
待办事项清单 这是一个简单的待办事项列表此网页可让您制作需要记住的所有任务的待办事项列表 在安装之前，这些是有关此项目的一些信息： 您的数据不会无处存储； -该项目是由MH15O制作的，可以免费下载，但是您不能从中获利或以任何商业方式使用它； 如何安装此网页？ 首先下载此文件 将其放在您的DeskTop中-打开索引页面 然后点击“显示我的地理位置”按钮以获取您的位置！ 首先，应该让浏览器拥有当前位置，不要担心，您的位置没有存储！ 如果您喜欢这个项目，您还可以留下一颗星星！ 谢谢你; MH15O:copyright:2021 MH15O
todolist最简单的待办事项列表
这里是前端，是不一样的前端
06-04 1119
代码展示 在这里插入代码片 ```<template> <div class="box"> <!-- 输入框 --> Todolist <input type="text" v-model="inputValue" @keydown.enter="submit" placeholder="添加TODO" class="q1"/> <!-- 提交按钮 --> <!-- <button @cli
一个待办事项列表界面（可添加删除）
01-10
一个待办事项列表界面（可添加删除） 。 一个待办事项列表界面（可添加删除）。 jquery。
jQuery模仿ToDoList实现简单的待办事项列表
10-15
以上就是从给定文件信息中提取出的关于使用jQuery实现简单待办事项列表的知识点。需要注意的是，由于原文档中存在OCR扫描识别错误，以上信息可能在个别细节上有所出入，但在整体上应较为准确地反映了文件的核心内容...
todolist（简单的待办事项列表)
12-03
【标题】"todolist"是一个基于HTML和JavaScript的简单待办事项列表应用，它提供了基本的任务管理功能，便于用户记录和组织日常任务。 【描述详解】 这个应用的核心功能包括： 1. **添加任务**：用户可以输入新的待...
ToDoList:一个简单的待办事项列表应用程序，用户可以在其中添加和删除任务
05-12
一个简单的待办事项列表应用程序，用户可以在其中添加和删除任务 用户可以输入任务，然后单击添加以将任务添加到待办事项列表中！ 如果我愿意的话，可能会添加更多功能，虽然分配不是必需的，但可能会非常不错。
ToDoList1:简单的待办事项清单，采取 1
06-02
待办事项1 简单的待办事项清单，采取 1
todolist.html
09-28
实现todolist，可以让相互切换，块来下载吧，免费哟！，够够够，去挨个领，----------------------------------------------------------------------------------------------------------------------------
toDoList：ToDoList（HTML，CSS，JS）
02-21
待办事项清单 TodoList的（HTML，CSS，JS）请在这里- 超级简单的待办事项清单，可让您添加，编辑或删除“待办事项”。 受启发
产品待办列表（总需求）.xls
05-20
Scrum模式中产品待办列表的样本范文。初学者可以直接使用模板来创建自己的产品待办列表。包含了完整的产品待办列表列和内容。
jQuery案例 —— todoList待办事项列表
01-08
这个案例是一个待办事项列表，可以记录自己当天需要做的事情，完成一件就画勾，要是不想要了就删除，可以很好的督促自己完成每天的学习任务啊。看下效果吧。 当我第一次看到这个效果时，从局部出发，我的第一反应...
简易版ToDoList
qq_48701993的博客
02-07 452
学了前端Vue框架也有点时间了，想要写个小东西，想来检验下学习成果，于是就做了简易版ToDoList。 在敲代码的过程，我发现自己还是有很多不太会熟悉，还是要看着视频中的代码敲，慢慢的加功能，遇到不会的就百度，这也是刚开始学，还不是很熟练，先模仿再创新。 还有就是我在敲代码的时候，有点过于追求细节了，以至于主要功能没有完成，效率不高。我觉得以后写项目，先分析清除要做些什么功能出来，分析清楚之后，把主要功能代码先实现，之后在求细节美化，这能很好的提高效率。 一步一步来吧，脚踏实地的去学！！！ 效果展示：
一个简单的todolist
纸上得来终觉浅
11-18 1599
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>vue-todolist</title> <meta charset="utf-8" /> <script src="https://unpkg.com/v
vue最简单的todolist
weixin_38600000的博客
09-04 135
v-model的双向数据绑定 使用组件代替li标签，并添加属性进行传值 每一个组件都是实例，自身的Vue是个根实例 在子组件定义一个点击事件并用$emit传事件和参数到父组件中，父组件监听到事件并定方法对子组件的值进行修改 ...
利用html和css和js创建待办事项管理系统
最新发布
05-14
好的，下面是一个简单的待办事项管理系统的实现： 首先，在 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、付费专栏及课程。

余额充值