利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）
1、简单介绍
在学习完HTML、CSS和一些JS后，博主也利用一些空余的时间的写了一个关于JS简单应用的Demo，主要实现的是一个Todolist（类似于记事本）的应用，可以实现数据的增、删、改、查，并且使用localStorage实现数据的本地持久化存储，具体就接着往下看吧。
2、运行截图
往输入框里输入内容：
进行添加后默认添加到未完成一栏：
将刚刚添加的事项进行修改：
修改成功：
将修改成功后的事项设置成已完成：
对“干饭”、“睡觉”进行删除：
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标签删除HTML示例代码
复制代码 代码如下: /// <summary> /// 去除HTML标签 /// </summary> /// <param name="Htmlstring"></param> /// <returns></returns> public static string DeleteHTML(string Htmlstring) { //删除HTML Htmlstring = Regex.Replace(Htmls
-
js+html+css实现手动轮播和自动轮播
本文实例为大家分享了js+html+css实现手动轮播和自动轮播的具体代码,供大家参考,具体内容如下 原理:设置图片层的总长=单张图片长度*张数:在轮播层中利用overflow只留出一张图片的显示: 通过图片层的left来显示轮播的每一张图,第一张为0,为了后面的图片显示,left的值左移为负数. 原理图 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&
-
html+css+js实现canvas跟随鼠标的小圆特效源码
效果(源码在最后): 实现: 1.定义标签: <h1>北极光之夜</h1> <canvas id="draw" style=" position: fixed; display: block;"> 当前浏览器不支持Canvas,请更换浏览器后再试 </canvas> 2. 文字的基本样式: h1{ position: absolute; top: 50%; left: 50%; transform: translate
-
html5以及jQuery实现本地图片上传前的预览代码实例讲解
html5以及jQuery实现本地图片上传前的预览,效果类似如下: 选择图片前的页面: 选择图片之后的预览效果: 下面直接上代码(只是最简单的实现代码,css样式没有复制,自己随意发挥) <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; char
-
在HTML中使用JavaScript的两种方法
在HTML中使用HTML需要借助<scirpt>标签,使用<script>标签的方式有两种:一种是直接在<script>标签中嵌入JavaScript代码,另一种是用<script>的src属性引入外部JavaScript文件. 直接在页面嵌入JavaScript代码 在使用<script>标签嵌入JavaScript代码时,只需为<script>指定type属性.然后,像下面这样把JavaScript代码直接放在标签内部即可: &l
-
如何学习html的各种标签
head标签学习 网页标题标签 <title>HTML学习</title> <!-- 告诉浏览器我们需要什么标题来显示页 --> 编码格式标签 <meta charset="utf-8" /> <!-- H5网页解析编码标签 --> <meta http-equiv="content-type" content="text/html; charset=utf-8"><!
-
利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）
1.简单介绍 在学习完HTML.CSS和一些JS后,博主也利用一些空余的时间的写了一个关于JS简单应用的Demo,主要实现的是一个Todolist(类似于记事本)的应用,可以实现数据的增.删.改.查,并且使用localStorage实现数据的本地持久化存储,具体就接着往下看吧. 2.运行截图 往输入框里输入内容: 进行添加后默认添加到未完成一栏: 将刚刚添加的事项进行修改: 修改成功: 将修改成功后的事项设置成已完成: 对"干饭"."睡觉"进
-
使用Angular.js实现简单的购物车功能
先给大家分享实现代码,在代码下面有效果图展示,大家可以两者结合参考下,废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://code.angularjs.org/1.2.5/angular.min.js"></script
-
js实现简单锁屏功能实例
本文实例讲述了js实现简单锁屏功能的方法.分享给大家供大家参考.具体实现方法如下: //********* 锁屏DIV *************************** function LockScreen(tag,title,width,height,url) { if (tag) //锁屏 { var lockdiv = document.getElementById("lockscreen"); if (lockdiv!=null) { lockdiv.style.dis
-
原生JS实现简单的倒计时功能示例
本文实例讲述了原生JS实现简单的倒计时功能.分享给大家供大家参考,具体如下: 1.第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div> <scr
-
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
本文实例总结了JS常见简单正则表达式验证功能.分享给大家供大家参考,具体如下: 下面都是一些比较常用简单的验证,像那些特殊的复杂的情况这里不进行考虑 1.验证电话号码或者手机号码 /** * 验证电话号码(手机号码+电话号码) * @param obj * @returns {Boolean} */ function checkPhoneNum(obj){ if(/^((\d{3}-\d{8}|\d{4}-\d{7,8})|(1[3|5|7|8][0-9]{9}))$/.test(obj)){
-
js实现简单抽奖小功能
本文实例为大家分享了js实现简单抽奖小功能的具体代码,供大家参考,具体内容如下 1.场景: 点击按钮开始随机抽取奖品,当停止那刻停留在大屏幕的是抽中的奖品("谢谢"即为没奖). 2.思路: 众所周知,抽奖主要讲究的就是随机性,并且是在一堆奖项中抽取.那么可以锁定方向:用数组放奖项名,用Math.random()来返回介于 0(包含) ~ 1(不包含) 之间的一个随机数.只要能随机选中数组的下标,便能随机选中奖项. 话不多说,附上代码: <!DOCTYPE html> <
-
原生js实现简单滑动解锁功能 js实现滑动拼图解锁
本文实例为大家分享了js实现简单滑动解锁功能以及滑动拼图解锁的具体代码,供大家参考,具体内容如下 简单实现滑动解锁,效果图是这样的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
-
JS实现简单留言板功能
本文实例为大家分享了JS实现简单留言板的具体代码,供大家参考,具体内容如下 言归正传,之前的案例相信大家都已经完全弄清楚了,还记得我们之前统计字数的那个案例吗?忘记的可以再去翻阅一下,今天就是在这个方法的基础上,把它变成一个留言版,就像我们之前的评论一样,是不是很期待呢?先来看一下效果图 输入昵称,选择头像,输入留言,点击广播就能够在下面显示出来了,是不是很nice呢,具体怎么实现的呢,我们来看代码 <!DOCTYPE html> <html lang="en">
-
node.js实现简单登录注册功能
本文实例为大家分享了node.js实现简单登录注册的具体代码,供大家参考,具体内容如下 1.首先需要一个sever模块用于引入路由,引入连接数据库的模块,监听服务器2.要有model层,里面写数据库连接模块和数据库的各种model(表),并导出model对象3.工具类utils,里面存放一些功能的模块,并且封装后导出 ,例如发送验证码的功能4.写路由,需要对数据库操作就使用导出的model对象,需要功能模块就使用导出的功能对象随后返回这个路由,在sever里引入5.生成api文档 sever模块
-
使用HTML+CSS+JS制作简单的网页菜单界面
写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器.ABROAD后台添加数据.百度图片搜索.sf发布博客文章时贴标签的样式--标签就像浏览器里原生的checkbox一样,不过checkbox实在太丑了,就使用这个简单方法美化一下好了. 1.HTML代码: <span class="tags"> <span>经济.金融类</span> <span>行政.人资类</span> <