原生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 相关文章推荐
使弱类型的语言JavaScript变强势
Jun 22 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 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正则
2006/07/07 PHP
php的正则处理函数总结分析
2008/06/20 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
JSON JQUERY模板实现说明
2010/07/03 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
Python脚本实现下载合并SAE日志
2015/02/10 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
Python识别html主要文本框过程解析
2020/02/18 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
应届大学生自荐书
2014/06/17 职场文书
团队拓展活动方案
2014/08/28 职场文书
催款律师函范文
2015/05/27 职场文书
鸦片战争观后感
2015/06/09 职场文书
敬老院活动感想
2015/08/07 职场文书
信息技术国培研修日志
2015/11/13 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS