利用前端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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
JavaScript实现复选框全选功能
js实现上传图片到服务器
Apr 11 #Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 #Javascript
uniapp开发小程序的经验总结
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
You might like
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
python 默认参数问题的陷阱
2016/02/29 Python
python添加模块搜索路径方法
2017/09/11 Python
django最快程序开发流程详解
2019/07/19 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Python调用飞书发送消息的示例
2020/11/10 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
上级检查欢迎词
2014/01/18 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
学校元旦晚会方案
2014/02/19 职场文书
委托证明书
2014/09/17 职场文书
员工福利申请报告
2015/05/15 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
员工旷工检讨书
2015/08/15 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
Python如何配置环境变量详解
2021/05/18 Python
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers