原生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实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 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 pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
如何在python中实现随机选择
2019/11/02 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
python的launcher用法知识点总结
2020/08/07 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
什么是servlet链?
2014/07/13 面试题
医院学雷锋活动策划方案
2014/02/15 职场文书
《学会待客》教学反思
2014/02/22 职场文书
合作意向协议书范本
2014/03/31 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
普通党员整改措施
2014/10/24 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL