经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）
来源：jb51　　时间：2021/4/12 19:00:14　　对本文有异议

1、简单介绍

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

2、运行截图

在这里插入图片描述  

往输入框里输入内容：

在这里插入图片描述  

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

在这里插入图片描述

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

在这里插入图片描述

修改成功：

在这里插入图片描述  

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

在这里插入图片描述  

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

在这里插入图片描述

3、代码介绍

话不多说，先贴上代码：

HTML部分：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>TodoList</title>
  6. 		<link rel="stylesheet" type="text/css" href="index.css" rel="external nofollow" />
  7. 	</head>
  8. 	<body>
  9. 		<!-- header -->
  10. 		<div id="header">
  11. 			<label class="text">TodoList</label>
  12. 			<input id="todo" class="head" type="text" placeholder="请输入代办事项">
  13. 			<button id="add" class="add" onclick="add()">添加</button>
  14. 		</div>
  15. 		<!-- content -->
  16. 		<div id="container">
  17. 			<h1 class="title">未完成</h1>
  18. 			<span id="todocount"></span>
  19. 			<ol id="todolist">
  20. 			</ol>
  21. 			<h1 class="title">已完成</h1>
  22. 			<span id="donecount"></span>
  23. 			<ol id="donelist">
  24. 			</ol>
  25. 		</div>
  26. 	</body>
  27. 	<script type="text/javascript" src="index.js"></script>
  28. </html>

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

CSS部分：

  1. * {
  2. 	margin: 0;
  3. 	padding: 0;
  4. }
  5.  
  6. body {
  7. 	background-color: #b8c9ff;
  8. }
  9.  
  10. #header {
  11. 	margin: 0 auto;
  12. 	font-size: 50px;
  13. 	width: 700px;
  14. 	text-align: center;
  15. 	height: 150px;
  16. }
  17.  
  18. .title {
  19. 	display: inline-flex;
  20. }
  21.  
  22. .head {
  23. 	-webkit-appearance: none;
  24. 	border-radius: 25px;
  25. 	width: 500px;
  26. 	height: 60px;
  27. 	box-shadow: 5px 5px 10px #556677;
  28. 	border: 1px solid #556677;
  29. 	font-size: 30px;
  30. 	padding-left: 25px;
  31. 	outline: 0;
  32. 	margin: 0 auto;
  33. 	display: inline-flex;
  34. }
  35.  
  36. .add {
  37. 	width: 80px;
  38. 	height: 50px;
  39. 	border-radius: 25px;
  40. 	outline: 0;
  41. 	border: 1 solid #556677;
  42. 	float: right;
  43. 	margin: 20px 0 0;
  44. 	font-size: 20px;
  45. }
  46.  
  47. #container {
  48. 	margin: 0 auto;
  49. 	width: 700px;
  50. 	height: 150px;
  51. }
  52.  
  53. .del {
  54. 	width: 120px;
  55. 	height: 70px;
  56. 	border-radius: 25px;
  57. 	outline: 0;
  58. 	border: 1 solid #556677;
  59. 	font-size: 20px;
  60. 	display: flex;
  61. 	margin: 0 auto;
  62. }
  63.  
  64. ol {
  65. 	margin-top: 20px;
  66. 	margin-bottom: 20px;
  67. }
  68.  
  69. ol li {
  70. 	width: 600px;
  71. 	height: 30px;
  72. 	background-color: #fff;
  73. 	list-style: none;
  74. 	text-align: center;
  75. 	font-size: 20px;
  76. 	border-radius: 25px;
  77. 	margin-top: 10px;
  78. 	padding: 10px;
  79. 	box-shadow: 5px 5px 10px #556677;
  80. }
  81.  
  82. ol li span {
  83. 	float: left;
  84. }
  85.  
  86. ol li button {
  87. 	float: right;
  88. 	width: 70px;
  89. 	height: 30px;
  90. 	margin-top: 0px;
  91. 	margin-left: 10px;
  92. 	border-radius: 25px;
  93. 	box-shadow: 5px 5px 10px #556677;
  94. 	outline: 0;
  95. }
  96.  
  97. .del1 {
  98. 	background-color: #f40;
  99. 	border-radius: 25px;
  100. 	width: 50px;
  101. 	height: 30px;
  102. 	box-shadow: 5px 5px 10px #556677;
  103. 	outline: 0;
  104. }
  105.  
  106. .edit {
  107. 	background-color: royalblue;
  108. 	border-radius: 25px;
  109. 	width: 50px;
  110. 	height: 30px;
  111. 	box-shadow: 5px 5px 10px #556677;
  112. 	outline: 0;
  113. 	color: #FFFFFF;
  114. }
  115.  
  116. #todocount {
  117. 	width: 30px;
  118. 	height: 30px;
  119. 	background-color: #FFFFFF;
  120. 	display: inline-block;
  121. 	border-radius: 50%;
  122. 	float: right;
  123. 	font-size: 1em;
  124. 	margin-top: 10px;
  125. 	text-align: center;
  126. 	line-height: 30px;
  127. }
  128.  
  129. #donecount {
  130. 	width: 30px;
  131. 	height: 30px;
  132. 	background-color: #FFFFFF;
  133. 	display: inline-block;
  134. 	border-radius: 50%;
  135. 	float: right;
  136. 	font-size: 1em;
  137. 	margin-top: 10px;
  138. 	text-align: center;
  139. 	line-height: 30px;
  140. }

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

JS部分：

  1. window.addEventListener("load", load); //页面加载完调用load函数，即页面的初始化
  2. document.getElementById("todo").onkeypress = function (event) {
  3. 	if (event.keyCode === 13) {/*13表示按下回车*/
  4. 		add(event);
  5. 	}
  6. };
  7. var todolist;//定义全局变量
  8.  
  9. function load() { //加载所有事项的函数
  10. 	var todo = document.getElementById("todolist");//获取DOM元素
  11. 	var done = document.getElementById("donelist");
  12. 	var todonum = document.getElementById("todocount");
  13. 	var donenum = document.getElementById("donecount");
  14. 	var todocontent = "";//设置初始值
  15. 	var donecontent = "";
  16. 	var todocount = 0;
  17. 	var donecount = 0;
  18. 	var list = localStorage.getItem("todolist");//获取本地上todolist的数据
  19. 	if (list != null) {//不为空时
  20. 		todolist = JSON.parse(list); //JSON对象转换为JS对象 
  21. 	} else {
  22. 		todolist = [];//置空
  23. 	}
  24. 	if (todolist != null) {
  25. 		for (var i = 0; i < todolist.length; i++) {//遍历已转化成js对象的todolist
  26. 			if (todolist[i].done == false) {//done为false即还未完成的情况
  27. 				todocontent += "<li>" + "<span>" + todolist[i].todo + "</span>" +  
  28. 				"<button οnclick=" + "edit(" + i + ") class='edit'>修改</button>" + 
  29. 				 "<button οnclick=" + "del(" + i + ") class='del1'>删除</button>" +
  30. 				"<button οnclick=" + "changedone(" + i + ")>确认完成</button>"
  31. 				 + "</li>"; //拼接上字符串，以便后续使用
  32. 				 todocount++;//未完成的数量加一
  33. 			} else {
  34. 				donecontent += "<li>" + "<span>" + todolist[i].todo + "</span>" +  
  35. 				"<button οnclick=" + "edit(" + i + ") class='edit'>修改</button>" +
  36. 				"<button οnclick=" + "del(" + i + ") class='del1'>删除</button>" + 
  37. 				"<button οnclick=" + "changetodo(" + i + ")>取消完成</button>"
  38. 				+ "</li>";
  39. 				donecount++;//已完成的数量加一
  40. 			}
  41. 		}
  42. 		todo.innerHTML = todocontent;//往todo所代表标签添加内容
  43. 		done.innerHTML = donecontent;//往done所代表标签添加内容
  44. 		todonum.innerHTML = todocount;//往todonum所代表标签添加内容
  45. 		donenum.innerHTML = donecount;//往donenum所代表标签添加内容
  46. 	} else { //当todolist为空时
  47. 		todo.innerHTML = "";
  48. 		done.innerHTML = "";
  49. 		todonum.innerHTML = 0;
  50. 		donenum.innerHTML = 0;
  51. 	}
  52. }
  53.  
  54. function add(e) { //添加事项的函数
  55. 	var newtodo = {
  56. 		todo: "", //用户输入的内容
  57. 		done: false //done表示是否完成该事项
  58. 	};
  59. 	var temp = document.getElementById("todo").value; //使用temp存储id为todo标签的value值
  60. 	if (temp.length == 0 && temp.trim() == "") { //当输入为空时
  61. 		alert('输入事项不能为空');
  62. 		return;
  63. 	}
  64. 	var flag = confirm('您确定要添加该事项吗?');//弹出确认框
  65. 	if(flag){//选择是
  66. 		newtodo.todo = temp; //将temp值赋给newtodo对象的todo属性
  67. 		todolist.push(newtodo); //往todolist中添加对象
  68. 		document.getElementById("todo").value = ""; //对输入框进行初始化
  69. 		save(); //保存
  70. 		alert('添加成功');
  71. 	}else{
  72. 		alert('操作出错');
  73. 		return ;
  74. 	}
  75. }
  76.  
  77. function changedone(i){ //将未完成的事项改变成已完成
  78. 	var flag = confirm('您确定要完成该事项吗?');
  79. 	if(flag){
  80. 		todolist[i].done = true; //改变done的状态
  81. 		save();
  82. 		alert('修改成功');
  83. 	}else{
  84. 		alert('操作出错');
  85. 		return ;
  86. 	}
  87. }
  88.  
  89. function changetodo(i){ //将已完成的事项改变成未完成
  90. 	var flag = confirm('您确定要取消完成该事项吗?');
  91. 	if(flag){
  92. 		todolist[i].done = false;//改变done的状态
  93. 		save();
  94. 		alert('修改成功');
  95. 	}else{
  96. 		alert('操作出错');
  97. 		return ;
  98. 	}
  99. }
  100.  
  101. function edit(i) { //修改事项的内容
  102. 	var temp = prompt("请输入你想要修改的内容",todolist[i].todo); 
  103. 	if(temp != null && temp.trim() != ""){//当修改后内容不为空时
  104. 		todolist[i].todo = temp; //修改内容
  105. 		alert('修改成功');
  106. 		save();
  107. 	}else{
  108. 		alert('输入字符串为空,修改失败');
  109. 	}
  110. }
  111.  
  112. function del(i) { //删除相应的事项
  113. 	var flag = confirm('您确定要删除该事项吗?');
  114. 	if(flag){
  115. 		todolist.splice(i, 1); //删除掉指定的一个元素
  116. 		save();
  117. 		alert('删除成功');
  118. 	}else{
  119. 		alert('操作出错');
  120. 		return ;
  121. 	}
  122. }
  123.  
  124. function save(){ //保存事项的函数
  125. 	localStorage.setItem("todolist", JSON.stringify(todolist)); //将JS对象转化成JSON对象并保存到本地
  126. 	load(); //每次保存完都刷新页面
  127. }

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

4、总结

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

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号