利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)


Posted in Javascript onApril 13, 2021

1、简单介绍

在学习完HTML、CSS和一些JS后,博主也利用一些空余的时间的写了一个关于JS简单应用的Demo,主要实现的是一个Todolist(类似于记事本)的应用,可以实现数据的增、删、改、查,并且使用localStorage实现数据的本地持久化存储,具体就接着往下看吧。

2、运行截图

利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)  

往输入框里输入内容:

利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)  

进行添加后默认添加到未完成一栏:

利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)

将刚刚添加的事项进行修改:

利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)

修改成功:

利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)  

将修改成功后的事项设置成已完成:

利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)  

对“干饭”、“睡觉”进行删除:

利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)

3、代码介绍

话不多说,先贴上代码:

HTML部分:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TodoList</title>
		<link rel="stylesheet" type="text/css" href="index.css" rel="external nofollow" />
	</head>
	<body>
		<!-- header -->
		<div id="header">
			<label class="text">TodoList</label>
			<input id="todo" class="head" type="text" placeholder="请输入代办事项">
			<button id="add" class="add" onclick="add()">添加</button>
		</div>
		<!-- content -->
		<div id="container">
			<h1 class="title">未完成</h1>
			<span id="todocount"></span>
			<ol id="todolist">
			</ol>
			<h1 class="title">已完成</h1>
			<span id="donecount"></span>
			<ol id="donelist">
			</ol>
		</div>
	</body>
	<script type="text/javascript" src="index.js"></script>
</html>

主要是分成两个部分,一个是头部输入框的部分,还有一个就是内容显示部分,todocount和donecount表示未完成事项和已完成事项的数目,list则是显示具体的事项,这边默认是没有的,在js进行事项的添加并显示。

CSS部分:

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #b8c9ff;
}

#header {
	margin: 0 auto;
	font-size: 50px;
	width: 700px;
	text-align: center;
	height: 150px;
}

.title {
	display: inline-flex;
}

.head {
	-webkit-appearance: none;
	border-radius: 25px;
	width: 500px;
	height: 60px;
	box-shadow: 5px 5px 10px #556677;
	border: 1px solid #556677;
	font-size: 30px;
	padding-left: 25px;
	outline: 0;
	margin: 0 auto;
	display: inline-flex;
}

.add {
	width: 80px;
	height: 50px;
	border-radius: 25px;
	outline: 0;
	border: 1 solid #556677;
	float: right;
	margin: 20px 0 0;
	font-size: 20px;
}

#container {
	margin: 0 auto;
	width: 700px;
	height: 150px;
}

.del {
	width: 120px;
	height: 70px;
	border-radius: 25px;
	outline: 0;
	border: 1 solid #556677;
	font-size: 20px;
	display: flex;
	margin: 0 auto;
}

ol {
	margin-top: 20px;
	margin-bottom: 20px;
}

ol li {
	width: 600px;
	height: 30px;
	background-color: #fff;
	list-style: none;
	text-align: center;
	font-size: 20px;
	border-radius: 25px;
	margin-top: 10px;
	padding: 10px;
	box-shadow: 5px 5px 10px #556677;
}

ol li span {
	float: left;
}

ol li button {
	float: right;
	width: 70px;
	height: 30px;
	margin-top: 0px;
	margin-left: 10px;
	border-radius: 25px;
	box-shadow: 5px 5px 10px #556677;
	outline: 0;
}

.del1 {
	background-color: #f40;
	border-radius: 25px;
	width: 50px;
	height: 30px;
	box-shadow: 5px 5px 10px #556677;
	outline: 0;
}

.edit {
	background-color: royalblue;
	border-radius: 25px;
	width: 50px;
	height: 30px;
	box-shadow: 5px 5px 10px #556677;
	outline: 0;
	color: #FFFFFF;
}

#todocount {
	width: 30px;
	height: 30px;
	background-color: #FFFFFF;
	display: inline-block;
	border-radius: 50%;
	float: right;
	font-size: 1em;
	margin-top: 10px;
	text-align: center;
	line-height: 30px;
}

#donecount {
	width: 30px;
	height: 30px;
	background-color: #FFFFFF;
	display: inline-block;
	border-radius: 50%;
	float: right;
	font-size: 1em;
	margin-top: 10px;
	text-align: center;
	line-height: 30px;
}

CSS部分这边就不赘述啦,博主自认为做的很胯,大家有做的话可以自己进行一下优化。

JS部分:

window.addEventListener("load", load); //页面加载完调用load函数,即页面的初始化
document.getElementById("todo").onkeypress = function (event) {
	if (event.keyCode === 13) {/*13表示按下回车*/
		add(event);
	}
};
var todolist;//定义全局变量

function load() { //加载所有事项的函数
	var todo = document.getElementById("todolist");//获取DOM元素
	var done = document.getElementById("donelist");
	var todonum = document.getElementById("todocount");
	var donenum = document.getElementById("donecount");
	var todocontent = "";//设置初始值
	var donecontent = "";
	var todocount = 0;
	var donecount = 0;
	var list = localStorage.getItem("todolist");//获取本地上todolist的数据
	if (list != null) {//不为空时
		todolist = JSON.parse(list); //JSON对象转换为JS对象 
	} else {
		todolist = [];//置空
	}
	if (todolist != null) {
		for (var i = 0; i < todolist.length; i++) {//遍历已转化成js对象的todolist
			if (todolist[i].done == false) {//done为false即还未完成的情况
				todocontent += "<li>" + "<span>" + todolist[i].todo + "</span>" +  
				"<button οnclick=" + "edit(" + i + ") class='edit'>修改</button>" + 
				 "<button οnclick=" + "del(" + i + ") class='del1'>删除</button>" +
				"<button οnclick=" + "changedone(" + i + ")>确认完成</button>"
				 + "</li>"; //拼接上字符串,以便后续使用
				 todocount++;//未完成的数量加一
			} else {
				donecontent += "<li>" + "<span>" + todolist[i].todo + "</span>" +  
				"<button οnclick=" + "edit(" + i + ") class='edit'>修改</button>" +
				"<button οnclick=" + "del(" + i + ") class='del1'>删除</button>" + 
				"<button οnclick=" + "changetodo(" + i + ")>取消完成</button>"
				+ "</li>";
				donecount++;//已完成的数量加一
			}
		}
		todo.innerHTML = todocontent;//往todo所代表标签添加内容
		done.innerHTML = donecontent;//往done所代表标签添加内容
		todonum.innerHTML = todocount;//往todonum所代表标签添加内容
		donenum.innerHTML = donecount;//往donenum所代表标签添加内容
	} else { //当todolist为空时
		todo.innerHTML = "";
		done.innerHTML = "";
		todonum.innerHTML = 0;
		donenum.innerHTML = 0;
	}
}

function add(e) { //添加事项的函数
	var newtodo = {
		todo: "", //用户输入的内容
		done: false //done表示是否完成该事项
	};
	var temp = document.getElementById("todo").value; //使用temp存储id为todo标签的value值
	if (temp.length == 0 && temp.trim() == "") { //当输入为空时
		alert('输入事项不能为空');
		return;
	}
	var flag = confirm('您确定要添加该事项吗?');//弹出确认框
	if(flag){//选择是
		newtodo.todo = temp; //将temp值赋给newtodo对象的todo属性
		todolist.push(newtodo); //往todolist中添加对象
		document.getElementById("todo").value = ""; //对输入框进行初始化
		save(); //保存
		alert('添加成功');
	}else{
		alert('操作出错');
		return ;
	}
}

function changedone(i){ //将未完成的事项改变成已完成
	var flag = confirm('您确定要完成该事项吗?');
	if(flag){
		todolist[i].done = true; //改变done的状态
		save();
		alert('修改成功');
	}else{
		alert('操作出错');
		return ;
	}
}

function changetodo(i){ //将已完成的事项改变成未完成
	var flag = confirm('您确定要取消完成该事项吗?');
	if(flag){
		todolist[i].done = false;//改变done的状态
		save();
		alert('修改成功');
	}else{
		alert('操作出错');
		return ;
	}
}

function edit(i) { //修改事项的内容
	var temp = prompt("请输入你想要修改的内容",todolist[i].todo); 
	if(temp != null && temp.trim() != ""){//当修改后内容不为空时
		todolist[i].todo = temp; //修改内容
		alert('修改成功');
		save();
	}else{
		alert('输入字符串为空,修改失败');
	}
}

function del(i) { //删除相应的事项
	var flag = confirm('您确定要删除该事项吗?');
	if(flag){
		todolist.splice(i, 1); //删除掉指定的一个元素
		save();
		alert('删除成功');
	}else{
		alert('操作出错');
		return ;
	}
}

function save(){ //保存事项的函数
	localStorage.setItem("todolist", JSON.stringify(todolist)); //将JS对象转化成JSON对象并保存到本地
	load(); //每次保存完都刷新页面
}

这次demo的主要使用就是js部分,因此这边代码中的注释也比较全面了,主要就是增删改查的几个函数,以及一些初始化的注意事项,还有持久化数据的使用,需要注意的是每一个进行修改或者添加后都要进行一次保存并重新加载内容,不然会导致内容没办法及时地更新。还有就是这边如果直接复制代码的话,可能会因为设备的不同导致样式上的一些区别,这边博主没有做跨设备的处理。

4、总结

这次的Demo让我把之前学过的大部分知识都进行了一次的应用,并且在实践的过程中也将一些已经忘记的知识点进行了复习,这次的Demo虽然做的不是特别地完善,过程中也有遇到查资料的情况,但是总体上还是收获了很多,这边也建议很多刚开始学习前端的小白,在学完一阶段后,就要及时地做一些Demo,毕竟编程更重要的还是实践啦。

到此这篇关于用HTML+CSS+JS做出简单的TODOLIST(记事本)的文章就介绍到这了,更多相关todolist操作实例内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
JavaScript实现复选框全选功能
js实现上传图片到服务器
Apr 11 #Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 #Javascript
uniapp开发小程序的经验总结
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
You might like
重新认识php array_merge函数
2014/08/31 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
javascript几个易错点记录
2014/11/26 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
Python多线程编程简单介绍
2015/04/13 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
python 线程的五个状态
2020/09/22 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
高中三年学习生活的自我评价
2013/10/10 职场文书
大学校运会广播稿
2014/02/03 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL