首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

利用前端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操作实例内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

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

- Author -

这名没人用吧

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
vue 之 css module的使用方法
Dec 04 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
JavaScript实现复选框全选功能
js实现上传图片到服务器
Apr 11 #Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 #Javascript
uniapp开发小程序的经验总结
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
放大器(1) 66-XI(1) VOLVO(1) 矿石收音机(1) 沃尔沃(1) E1-XM(1) R601SW(1) S900(1) ETON(1) 军机(1)
You might like
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
浅谈php优化需要注意的地方
2014/11/27 PHP
简单谈谈favicon
2015/06/10 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
prototype1.4中文手册
2006/09/22 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
怎么通过onclick事件获取js函数返回值（代码少）
2015/07/28 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
JS实现打字游戏
2019/12/17 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python 常用string函数详解
2016/05/30 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Python Pandas 箱线图的实现
2019/07/23 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
超级实用的8个Python列表技巧
2020/08/24 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
荷兰网上药店：Drogisterij.net
2019/09/03 全球购物
nohup的用法
2014/08/10 面试题
营销与策划个人求职信
2013/09/22 职场文书
鲁迅故里导游词
2015/02/05 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS