利用前端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 相关文章推荐
Jquery中获取iframe的代码
Jan 11 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
JavaScript实现复选框全选功能
js实现上传图片到服务器
Apr 11 #Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 #Javascript
uniapp开发小程序的经验总结
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
You might like
珊瑚虫IP库浅析
2007/02/15 PHP
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python切换hosts文件代码示例
2013/12/31 Python
python中os模块详解
2016/10/14 Python
python 获取网页编码方式实现代码
2017/03/11 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
python集合删除多种方法详解
2020/02/10 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
django orm模块中的 is_delete用法
2020/05/20 Python
浅谈Python3中print函数的换行
2020/08/05 Python
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
公司道歉信范文
2014/01/09 职场文书
《匆匆》教学反思
2014/02/22 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python