原生JavaScript实现todolist功能
该项目主要可以练习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;
}
最后的实现效果
总结
本项目参考了http://www.todolist.cn/，对代码进行了一些精简，并添加了一些功能。在实现项目的过程中，首先是实现最基本的功能，然后不断地添加增强功能和美化。
相关推荐
-
原生JavaScript实现todolist功能
该项目主要可以练习js操控dom,事件,事件触发之间的逻辑关系,以及如何写入缓存,获取缓存. 主要功能: 将用户输入添加至待办项 可以对todolist进行分类,用户勾选即将待办项分入已完成组 todolist的每一项可删除和编辑 将用户输入数据写入localStorage本地缓存,实现对输入数据的保存 可以清楚域名下本地缓存,并清空所有todolist项 具体功能的实现 HTML代码 <!DOCTYPE html> <html lang="en"> <h
-
原生JavaScript实现日历功能代码实例(无引用Jq)
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 成品显示,可左右切换月份 html 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi
-
原生javascript实现的全屏滚动功能示例
本文实例讲述了原生javascript实现的全屏滚动功能.分享给大家供大家参考,具体如下: 原理: 1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度 2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题. 废话不多说,直接上代码 html代码: <div id="wrap"> <div id="main" style="top: 0;"> <div class="content num
-
原生javascript实现的ajax异步封装功能示例
本文实例讲述了原生javascript实现的ajax异步封装功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g
-
原生JavaScript实现的简单省市县三级联动功能示例
本文实例讲述了原生JavaScript实现的简单省市县三级联动功能.分享给大家供大家参考,具体如下: 三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级联动菜单<
-
原生JavaScript实现remove()和recover()功能示例
本文实例讲述了原生JavaScript实现remove()和recover()功能.分享给大家供大家参考,具体如下: 利用原生JavaScript实现: 1.remove(selectors)删除指定的一个或一组元素. 2.recover(selectors)恢复刚才删除的元素. function remove(selectors) { selectors.removeNode = []; if (selectors.length != undefined) { var len = select
-
原生JavaScript实现的无缝滚动功能详解
本文实例讲述了原生JavaScript实现的无缝滚动功能.分享给大家供大家参考,具体如下: 无缝轮播(原生JavaScript) 一:HTML部分: <div class="box" id="box"> <ul class="J_XSlide list"> <li class="J_tabContent"><a href="#" rel="external
-
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
本文实例讲述了原生javascript实现类似vue的数据绑定功能.分享给大家供大家参考,具体如下: 观察者模式 let observer = { /*订阅功能*/ addSubscriber: function (cb) { this.subscribers.push(cb); }, /*退订功能*/ removerSubscriber: function (cb) { let index = this.subscribers.indexOf(cb); this.subscribers.spl
-
原生JavaScript实现AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接服务器 发送请求 接收响应数据
-
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl