js实现todolist

一、需求分析

能显示当前日期
输入代办事项，在下列代办列表展示
已经完成的代办移入“已完成”
重要事件标红并且置顶
能够删除代办事项
倒计时

二、最终作品展示

三、功能实现

THML部分代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ToDoList</title><link rel="stylesheet" href="ToDoList.css"><link rel="stylesheet" href="iconfont.css"></head><body><div class="wrap"><div class="container"><div class="header"><div class="header-up"><h1>想脱离菜鸡的每一天</h1><div class="myDay">2022年6月10日</div></div><div class="right-header">今天</div></div><div class="new-task"><span style="font-size: 20px;">+</span><input type="text" placeholder="添加新任务"></div><div class="impote"></div><div class="todo-list"></div><h3>已经完成</h3><div class="haveFinish"></div></div><ul class="list"><li class="item active"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li></ul><ul class="pointList"><li class="point active" data-index=0></li><li class="point" data-index=1></li><li class="point" data-index=2></li><li class="point" data-index=3></li><li class="point" data-index=4></li></ul><button class="btn" id="leftBtn">< </button><button class="btn" id="rightBtn"> > </button></div><!-- 模板 --><div class="todo-template"><div class="todo-item" id="todo-item"><div class="no-do" id="no-do"></div><div class="list-center" data-index=""></div><i class="iconfont import" id="import"></i><i class="iconfont" id="delet"></i><i class="iconfont" id="setTime" style="margin-left: 10px;font-weight: 700;"></i><input type="number" id="lastTime"><select name="sex" id="sex"><option value="天">天</option><option value="时">时</option><option value="分">分</option><option value="秒">秒</option></select></div></div><script src="todo.js" ></script>
</body></html>

css代码

body{color: rgb(116, 116, 116);
}
*{margin: 0;padding: 0;
}
ul,ol{list-style-type: none;}
a{text-decoration: none;}.container{width: 600px;margin: 0 auto;position: absolute;top: 0;left: 500px;z-index: 3;background-color: white;height: 600px;border: 1px solid rgb(116, 116, 116);border-radius: 20px;box-shadow: 3px 3px 2px  rgb(170, 170, 170);overflow-y: scroll;}
/* 输入框设置 */input{border: none;width: 100%;height: 100%;outline: none;}
.header{display: flex;text-align: center;justify-content: space-between;
}
.right-header{font-size: 30px;
}
.new-task{margin: 30px 0;display: flex;height: 30px;border-bottom: 1px solid rgb(167, 167, 167) ;}
.new-task img{width: 30px;
}
.todo-item{display: flex;height: 45px;
}
.list-center{width: 440px;font-size: 20px;overflow: hidden;
}
.todo-template{display: none;
}
.no-do{border: 2px solid rgb(168, 168, 168);height: 15px;width: 15px;border-radius: 50%;margin-top: 5px;font-weight: 600;line-height: 15px;cursor: pointer;
}
.import{margin-right: 10px;
}
.nofinish{border-bottom: 1px solid #333;
}
#lastTime{width: 50px;/* background-color: aqua; */height: 20px;border: 1px solid rgb(155, 155, 155);border-radius: 10px;text-align: center;
}
#sex{width: 50px;/* background-color: aqua; */height: 20px;border: none;
}.wrap {width: 100%;height: 100%;position: relative;
}.list {width: 100%;height: 602px;position: relative;padding-left: 0px;
}
.list .item img{width: 400px;height: 400px;}
.item {width: 100%;height: 100%;list-style: none;position: absolute;left: 0;opacity: 0;transition: all .8s;
}.item:nth-child(1) {background-color: rgb(187, 232, 250);
}.item:nth-child(2) {background-color: rgb(223, 255, 158);
}.item:nth-child(3) {background-color: rgb(223, 198, 248);
}.item:nth-child(4) {background-color: rgb(255, 224, 229);
}.item:nth-child(5) {background-color: rgb(255, 229, 181);
}.item.active {z-index: 1;opacity: 1;
}.btn {width: 60px;height: 100px;z-index: 100;top: 150px;position: absolute;border: none;background: rgba(0, 0, 0, .3);
}#leftBtn {left: 0px;}#rightBtn {right: 0px;
}.pointList {list-style: none;padding-left: 0px;position: absolute;right: 20px;bottom: 20px;z-index: 200;
}.point {width: 10px;height: 10px;background-color: antiquewhite;border-radius: 100%;float: left;margin-right: 8px;border-style: solid;border-width: 2px;border-color: slategray;cursor: pointer;
}.point.active{background-color: cadetblue;
}

js代码

let todoList = document.querySelector('.todo-list');
let havefinsh = document.querySelector('.haveFinish');//已完成：父盒子
let impote = document.querySelector('.impote');
let main = document.querySelector('#import');//节点：；标红
let newTaskInput = document.querySelector('.new-task input');
let newTaskText = newTaskInput.value;//获取input输入的值
let flag = false;
let falg = false;
let second;let template = document.querySelector('.todo-template');//获取模板的节点//输入数据
newTaskInput.onkeydown = function (event) {if (event.keyCode === 13) {// console.log('sdf');let newTaskText = newTaskInput.value;//获取input输入的值if (newTaskText.trim() != '' && !arrsa(newTaskText, flag)) {//先读取本地存储原来的数据let local = getList();//声明一个数组然后存储一下数据//把最新的数据增加到数组里// console.log(local);local.push({ name: newTaskInput.value, done: false, index: 0, important: false, timm1: false, setName: '天' });//把数据存储到本地中setDat(local);load();newTaskInput.value = '';}else{alert('有误');}}
}//数组去重方法
function arrsa(newInput, flag) {let data = getList();for (let i = 0; i < data.length; i++) {if (data[i].name == newInput) {flag = true;break;}}return flag;
}//若果是已完成还想添加相同的代办
function abs(falg){let data = getList();for (let i = 0; i < data.length; i++) {if (data[i].done == true) {flag = true;break;}}return falg;
}//读取本地存储的数据
function getList() {let data = localStorage.getItem('todolist');if (data !== null) {//本地存储的数据是字符串格式的，但是要转化对象格式// console.log( JSON.parse(data));return JSON.parse(data);} else {return [];}
}//保存本地存储的数据
function setDat(dat) {let data = localStorage.setItem('todolist', JSON.stringify(dat));
}load();
//渲染加载数据function load() {let data = getList();// console.log(data);let template = document.querySelector('.todo-template');//获取模板的节点let newTaskContainerlet childs = todoList.childNodes;let childss = havefinsh.childNodes;let childsss = impote.childNodes;for (let i = childs.length - 1; i >= 0; i--) {todoList.removeChild(childs[i]);}for (let j = childss.length - 1; j >= 0; j--) {havefinsh.removeChild(childss[j]);}for (let j = childsss.length - 1; j >= 0; j--) {impote.removeChild(childsss[j]);}for (let i = 0; i < data.length; i++) {newTaskContainer = template.cloneNode(true);//将template节点下的所有元素复制一份（深度拷贝）todoItem = newTaskContainer.querySelector('.todo-item');//获取拷贝的节点下的。todo-itemlistCenter = todoItem.querySelector('.list-center')listCenter.innerText = data[i].name;listCenter.setAttribute("data-index", data[i].index)let nodo = todoItem.querySelector('#no-do');let main = todoItem.querySelector('#import');let list = nodo.parentElement.querySelector('.list-center');if (data[i].done == false && data[i].important == false) {//未做 不标红// ding(todoItem, listCenter)todoItem.querySelector('#sex').value = data[i].setName;todoItem.querySelector('#lastTime').value = data[i].index;todoList.appendChild(todoItem);} else if (data[i].done == false && data[i].important !== false) {//未做 标红todoItem.querySelector('#sex').value = data[i].setName;todoItem.querySelector('#lastTime').value = data[i].index;// ding(todoItem, listCenter)impote.appendChild(todoItem);date.value = data[i].setName;todoItem.querySelector('#lastTime').value = data[i].index;main.style.cssText = 'color: rgb(235, 13, 13);';list.style.cssText = 'color: rgb(235, 13, 13);';// time3(data[i], listCenter,todoItem);} else if (data[i].done !== false && data[i].important !== false) {//做了 标红havefinsh.insertBefore(todoItem, havefinsh.firstChild);nodo.innerText = '√';main.style.cssText = 'color: rgb(235, 13, 13);';list.style.cssText = 'color: rgb(235, 13, 13);';list.style.textDecoration = 'line-through';// time3(data[i], listCenter)} else if (data[i].done !== false && data[i].important == false) {//做了 不标红havefinsh.appendChild(todoItem);nodo.innerText = '√';list.style.textDecoration = 'line-through';// time3(data[i], listCenter)}newTaskInput.value = '';delet1(todoItem, listCenter);addChangeState(todoItem, listCenter);importanter(todoItem, listCenter);timeSit(todoItem, listCenter);// time2(todoItem);ding(todoItem, listCenter);}}//删除方法
function delet1(newInput, listCenter) {let data = getList();let del = newInput.querySelector('#delet');del.addEventListener('click', function () {// del.parentElement.remove();for (let j = 0; j < data.length; j++) {if (data[j].name == listCenter.innerText) {// data[i].timm1 == false;data.splice(j, 1);break;}}setDat(data);load();})
}//点击完成
function addChangeState(newTaskNode, listCenter) {let nodo = newTaskNode.querySelector('#no-do');//节点：代办let data = getList();nodo.addEventListener('click', function () {// console.log('sss');for (let i = 0; i < data.length; i++) {if (data[i].name == listCenter.innerText && data[i].done == false) {data[i].done = true;// nodo.parentElement.remove();//获取这个节点的父元素，并将父元素移走// havefinsh.appendChild(nodo.parentElement);} else if (data[i].name == listCenter.innerText && data[i].done == true) {data[i].done = false;// moveChild0(todoList, nodo.parentElement);}}setDat(data);load();})
}//重要事情标红
function importanter(newInput, listCenter) {let main = newInput.querySelector('#import');// let nodo = newInput.querySelector('#no-do');// let todoList = document.querySelector('.todo-list');let data = getList();main.addEventListener('click', function () {// console.log(this);// console.log(i);for (let i = 0; i < data.length; i++) {if (data[i].name == listCenter.innerText && data[i].important == false && data[i].done == false) {//没做 不重要data[i].important = true;} else if (data[i].name == listCenter.innerText && data[i].important !== false && data[i].done == false) {//没做 重要data[i].important = false;}}setDat(data);load();})
}//移动元素到最顶部
function moveChild(fatherElement, moveChild, toMove) {fatherElement.insertBefore(moveChild, toMove);
}
//移动到最底部
function moveChild0(fatherElement, moveChild) {fatherElement.insertBefore(moveChild, null);
}//定时器
function timeSit(newInput, listCenter) {let lastTime1 = newInput.querySelector('#lastTime');//节点：输入的时间let date = lastTime1.parentElement.querySelector('.todo-item select');//定时器的单位let data = getList();// let allTime = 0;lastTime1.onchange = function () {for (let i = 0; i < data.length; i++) {let second = lastTime1.value;//获取输入的时间if (data[i].name == listCenter.innerText && data[i].done == false && second > 0) {data[i].timm1 = true;if (data[i].timm1 == true) {// console.log(lastTime1.value);if (date.value == '天') {data[i].setName = date.value;data[i].index = lastTime1.value;setDat(data);load();} else if (date.value == '时') {data[i].setName = date.value;data[i].index = lastTime1.value;setDat(data);load();// console.log(data)} else if (date.value == '分') {data[i].setName = date.value;data[i].index = lastTime1.value;setDat(data);load();// console.log(data[i].setName)} else if (date.value == '秒') {data[i].setName = date.value;data[i].index = lastTime1.value;console.log( data[i].setName);setDat(data);load();}}} else if (data[i].name == listCenter.innerText && data[i].done == true && second > 0) {alert('您已完成这件事！');lastTime1.value = '';}}}
}//开始定时器
function ding(newInput, listCenter) {let setTime = newInput.querySelector('#setTime');//节点：闹钟图标let lastTime1 = newInput.querySelector('#lastTime');//节点：输入的时间let timer = null;let allTime = 0;let data = getList();for (let i = 0; i < data.length; i++) {let second = lastTime1.value;//获取输入的时间if (data[i].name == listCenter.innerText && data[i].timm1 == true) {// console.log('sfdas');if (data[i].setName == '天') {allTime = second * 86400;} else if (data[i].setName == '时') {allTime = second * 3600;} else if (data[i].setName == '分') {allTime = second * 60;} else if (data[i].setName == '秒') {allTime = second;}if (timer == null) {timer = setInterval(() => {allTime--;// console.log(allTime);if (allTime <= 0) {alert('已到期');clearInterval(timer);timer = null;data[i].timm1 = false;data[i].index = 0setDat(data);load();// console.log(data[i].timm1);}}, 1000);setTime.addEventListener('click', function () {clearInterval(timer);lastTime1.value = '0';newInput.querySelector('#sex').value = '天';timer = null;data[i].setName = '天';data[i].timm1 = false;data[i].index = 0setDat(data);load();});}}}
}
'use strict'

三、关于localstorage

因为这里用到了本地存储，所以来介绍一下

localStorage.setItem(‘key’, JSON.stringify(数据)) //存储数据使用，形式为一个键值对

localStorage.getItem(‘key’) //取数据使用，通过key值取出

localStorage.removeItem(‘key’) //移除存储的键值对

js实现TODOlist相关推荐

（vue基础试炼_03）使用vue.js实现TodoList
接上一篇:(vue基础试炼_02)使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818 指令作用 v-fo ...
15 JS应用-todolist任务
需求 1. 将用户输入添加至待办项 2. 可以对todolist进行分类(待办项和已完成组),用户勾选既将待办项分入已完成组 3. todolist的每一项可删除和编辑 4. 下方有clear按钮,并 ...
js实现 todoList
原本用js实现了todoList,包含基本的增删功能,并且实现了本地存储功能,还写的有一个好看的倒计时效果,因为不小心把代码覆盖了,找不回来了,就没有再加倒计时的效果,所以就用jQuery快速完成了这 ...
适合前端初学者，vue.js完成ToDoList的增删改，支持回车提交增加，及修改时自动获取焦点
重新学习vue,将实例中的ToDoList做了些调整.增加了些功能功能: 1.添加要做事项,支持回车完成添加,也可以点击按钮添加,添加后input清空 2.待做事项,是一个有序列表 3.列表可以删除 ...
源生的html属性js,源生JS怎样实现todolist功能
这次给大家带来源生JS怎样实现todolist功能,源生JS实现todolist功能的注意事项有哪些,下面就是实战案例,一起来看一下. 该项目主要可以练习js操控dom,事件,事件触发之间的逻辑关系, ...
vue写的简单版todolist
上一张丑图: 项目演示地址:http://47.75.195.199/todolist/ 源码地址:https://github.com/chunsenye/... <template>& ...
有趣的HTML实例（七）注册登录界面Ⅱ（css+js）
你知道,有些鸟儿是注定不会被关在牢笼里的,它们的每一片羽毛都闪耀着自由的光辉. --<肖申克的救赎> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编 ...
有趣的HTML实例（十五）注册登录界面（css+js）
我并不是每次吃完饭就看电视,有时我边吃边看电视,生活中有些改变会增加乐趣. --<加菲猫> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编码实现 i ...
html js不触发_「万字整理」这里有一份Node.js入门指南和实践,请注意查收 ??
前言什么是 Node.js 呢 ? JS 是脚本语言,脚本语言都需要一个解析器才能运行.对于写在 HTML 页面里的 JS,浏览器充当了解析器的角色.而对于需要独立运行的 JS,NodeJS 就是一 ...

js实现TODOlist

js实现todolist

一、需求分析

二、最终作品展示

三、功能实现

三、关于localstorage

js实现TODOlist相关推荐

最新文章

热门文章

js实现TODOlist

js实现todolist

一、 需求分析

二、最终作品展示

三、功能实现

三、关于localstorage

js实现TODOlist相关推荐

最新文章

热门文章

一、需求分析