原生JavaScript实现todolist功能


Posted in Javascript onMarch 02, 2018

该项目主要可以练习js操控dom,事件,事件触发之间的逻辑关系,以及如何写入缓存,获取缓存。

主要功能:

  • 将用户输入添加至待办项
  • 可以对todolist进行分类,用户勾选即将待办项分入已完成组
  • todolist的每一项可删除和编辑
  • 将用户输入数据写入localStorage本地缓存,实现对输入数据的保存
  • 可以清楚域名下本地缓存,并清空所有todolist项

具体功能的实现

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>todolist-prime</title>
 <link rel="stylesheet" href="yuansheng.css" rel="external nofollow" >
</head>
<body>

 <header>
  <section>
   <label for="add_list">My todolist</label>
   <input type="text" id="add_list" name="add_list" placeholder="type here" required>
  </section>
 </header>

 <div class="content">
  <h1>未完成<span id="todocount"></span></h1>
  <ol id="todolist">
  </ol>

  <h1>已完成<span id="donecount"></span></h1>
  <ol id="donelist">
  </ol>
 </div>

 <div id="clear">
 <span style="white-space:pre;">	</span><button id="clearbutton"><h3>全部清除</h3></button>
 </div>
 <script src="todolist-prime.js"></script>
</body>
</html>

JS代码及分析

创建一个数组对象来保存用户输入的数据,数组的每一项都是一个对象,对象的"todo"属性保存着用户输入的数据,"done"属性可理解为用户输入数据的标签,主要用来对"todo"值进行分类。

每次用户输入完数据,都要更新缓存,并初始化输入框。

function addTodolist(e) {
 var obj_list = {
  todo: "", //用于存储用户输入的数据
  done: false  //初始化用户输入的数据属性,以便对用户待办事项进行分类
 };
 document.getElementById("add_list").value = document.getElementById("add_list").value.trim();
 if (document.getElementById("add_list").value.length === 0){
  alert("不能为空");
  return;
 }

 obj_list.todo = document.getElementById("add_list").value;
 todolist.push(obj_list);

 saveData(todolist);

 document.getElementById("add_list").value = "";  //初始化输入框
 load();  //将用户输入的数据添加至dom节点
 document.getElementById("add_list").focus();
}

将输入的数据添加至dom节点,并且根据输入数据属性("done")的值进行分类。

<span style="font-size:14px;">function load(){
 var todo = document.getElementById("todolist"),
  done = document.getElementById("donelist"),
  todocount = document.getElementById("todocount"),
  donecount = document.getElementById("donecount"),
  todoString = "",
  doneString = "",
  todoCount = 0,
  doneCount = 0;
 document.getElementById("add_list").focus();

 todolist = loadData();

 //todolist数组对象里若包含用户输入数据,则将其添加至dom节点;若为空对象,则初始化页面。
 if (todolist != null){
  for (var i=0; i<todolist.length; i ++){
   if(!todolist[i].done){
    todoString += "<li>"
//通过onchange事件,复选框值有改变则调用update函数,并改变输入数据“done”属性的布尔值,这样
//下次load()后,这段数据会进入不同的分组,未完成的事项分入已完成事项组,已完成事项分入未完成事项组
//点击事项调用edit函数
//点击“-”,调用remove函数
     + "<input type='checkbox' onchange='update("+i+", \"done\", true)'>"
     + "<p id='p-"+i+"' onclick='edit("+i+")'>" + todolist[i].todo + "</p>" +
     "<a onclick='remove("+i+")'>-</a>" +
     "</li>"; //将每次用户输入的数据,通过节点<p>利用id标记,以便后续编辑功能定位
    todoCount ++;
   }
   else{
    doneString += "<li>"
     + "<input type='checkbox' "
     + "onchange='update("+i+", \"done\", false)' checked>"
     + "<p id='p-"+i+"' onclick='edit("+i+")'>" + todolist[i].todo + "</p>"
     + "<a onclick='remove("+i+")'>-</a>"
     + "</li>";
    doneCount ++;
   }
  }

  todo.innerHTML = todoString;
  done.innerHTML = doneString;
  todocount.innerHTML = todoCount;
  donecount.innerHTML = doneCount;
 }
 else {
  todo.innerHTML = "";
  done.innerHTML = "";
  todocount.innerHTML = 0;
  donecount.innerHTML = 0;
 }
}</span>

击事项触发编辑事件,将可编辑表单控件插入段落中,并将用户输入的值通过update函数对todolist数组里存储的数据进行更新

function edit(i) {
 var p = document.getElementById('p-' + i),
  pContent = p.innerHTML,
  inputId;

//通过upadate函数对todolist数组相应项进行更新,将用户输入的内容写入到todolist数组相应项的todo属性中
 function confirm() {
  if (inputId.value.length === 0) {
   p.innerHTML = pContent;
   alert("内容不能为空");
  }
  else {
   update(i, "todo", inputId.value); //修改事项内容后,更新数组里对应项"todo"属性的值,以便更新dom节点
  }
 }

//结合keypress事件,按下enter键,调用confirm函数
 function enter(e) {
  if (e.keyCode == 13){
   confirm();
  }
 }

 p.innerHTML = "<input type='text' id='input-"+i+"' value='"+pContent+"'>";
 inputId = document.getElementById('input-'+i);
 inputId.focus();
 inputId.setSelectionRange(0, inputId.value.length);
 inputId.onblur = confirm; //表单控件失去焦点,调用confirm函数,即对页面内容进行更新
 inputId.onkeypress = enter;  //对按键事件进行监控
}

将数组todolist相应项的属性(“todo”或“done”)进行更新,并加载

function update(i, field, value) { 
 todolist[i][field] = value; 
 saveData(todolist); 
 load(); 
}

删除相应项,并加载

function remove(i) { 
 todolist.splice(i, 1); 
 
 saveData(todolist); //相同名称的缓存会覆盖,更新缓存 
 
 load(); 
}

将用户数据保存至本地缓存

function saveData(data) { 
 localStorage.setItem("mytodolist", JSON.stringify(data)); //JS对象转换成JSON对象存进本地缓存 
}

从本地缓存中获取数据,有数据,赋值给todolist,这样刷新页面用户数据依旧存在

function loadData() { 
 var hisTory = localStorage.getItem("mytodolist"); 
 if(hisTory !=null){ 
  return JSON.parse(hisTory);  //JSON对象转换为JS对象 
 } 
 else { return []; } 
}

清楚本地缓存

function clear() { 
 localStorage.clear(); 
 load(); 
}

一系列事件的监听

window.addEventListener("load", load); //页面加载完毕调用load函数 
document.getElementById("clearbutton").onclick = clear; 
document.getElementById("add_list").onkeypress = function (event) { 
 if(event.keyCode === 13){ 
  addTodolist(); 
 } 
};

CSS

body {
  margin: 0px;
  padding: 0px;
  font-size: 16px;
  background-color: gainsboro;
}
header {
  height: 50px;
  background-color: cornflowerblue;
}
header section {
  margin: 0 auto;
  width: 40%;
}

header section label {
  float: left;
  line-height: 50px; /*设置line-height和包含块高度一致,以实现行内元素垂直居中*/
  font-size: 20px;
}

#add_list {
  float: right;
  margin-top: 11px;
  width: 60%;
  height: 24px;
  border-radius: 5px;
  box-shadow: 0 1px 0 black;
  font-size: 18px;
  text-indent: 10px;
}

h1 {
  position: relative;
}

h1 span {
  position: absolute;
  top: 1px;
  right: 5px;
  display: inline-block;
  width: 23px;
  height: 23px;
  border-radius: 23px;  /*创建圆形标记*/
  line-height: 23px;
  font-size: 18px;
  text-align: center;
  background: #E6E6FA;
}

.content {
  width: 40%;
  margin: 0 auto;
}

li {
  position: relative;
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 0 10px;
  height: 32px;
  box-shadow: 0 1px 0 black;
  line-height: 32px;
  background-color: burlywood;
  list-style: none;
}

ol li input {
  position: absolute;
  top: 4px;
  left: 10px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
p{
  margin: 0;
}
ol li p {
  display: inline;
  margin-left: 35px;
}

ol li p input{
  top: 5px;
  margin-left: 35px;
  width: 70%;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
}

ol li a {
  position: absolute;
  top: 8px;
  right: 10px;
  display: inline-block;
  border: 1px;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 32px;
  line-height: 10px;
  color: red;
  font-weight: bolder;
  cursor: pointer;
  background-color: gray;
}

#clear {
  width: 100px;
  margin: 0 auto;
}

#clearbutton {
  border-color: red;
  border-radius: 5px;
  box-shadow: 0 1px 0 yellow;
  cursor: pointer;
}

button h3{
  font-size: 13px;
  line-height: 13px;
}

最后的实现效果

原生JavaScript实现todolist功能

总结

本项目参考了http://www.todolist.cn/,对代码进行了一些精简,并添加了一些功能。在实现项目的过程中,首先是实现最基本的功能,然后不断地添加增强功能和美化。

Javascript 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
javascript中的有名函数和无名函数
Oct 17 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
详解javascript脚本何时会被执行
Feb 05 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 #Javascript
vue判断input输入内容全是空格的方法
Mar 02 #Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 #Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 #Javascript
Vue2.0系列之过滤器的使用
Mar 01 #Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 #Javascript
vue.js 获取select中的value实例
Mar 01 #Javascript
You might like
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
js null,undefined,字符串小结
2010/08/21 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
建筑施工实习自我鉴定
2013/09/19 职场文书
艺术爱好者的自我评价分享
2013/10/08 职场文书
管理站站长岗位职责
2013/11/27 职场文书
营业员演讲稿
2013/12/30 职场文书
《白鹅》教学反思
2014/04/13 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书