先来看看效果
功能比较少,页面也很简洁,接下来上代码
HTML
<body>
<div class="all">
<div class="container">
<div class="header">
<div class="left-header">
<h1>我的一天</h1>
<div class="date">五月十七日 星期日</div>
</div>
<div class="right-header">
<div class="jintian">今天</div>
</div>
</div>
<!-- 输入框 -->
<div class="new-task">
<div class="iconfont tianjia" style="font-size: 30px;"></div>
<input class="input" type="text" placeholder="添加任务">
</div>
<!-- 要做的任务 -->
<div class="todo-list">
</div>
<!-- 已完成事件 -->
<div class="done-list">
</div>
<!-- 添加模板 -->
<div class="todo-template">
<div class="todo-item">
<div class="todo-item-icon"><img class="todo-icon" src="Imgs\todolist图片\round.png" alt=""></div>
<div class="todo-content">
<div class="todo-text">下班后去拿快递</div>
</div>
<div class="settime">
<span>定时</span>
<input class="ban" type="text">
<span>分</span>
</div>
<div class="delaytime">
<span>延时</span>
<input class="ban" type="text">
<span>分</span>
</div>
<div class="todo-star-icon"><img class="star-icon" src="Imgs\todolist图片\star.png" alt=""></div>
<div class="todo-baggage-icon"><img class="baggage-icon" src="Imgs\todolist图片\recover.png" alt="">
</div>
</div>
</div>
</div>
</div>
<script src="js\todolist.js"></script>
</body>
CSS
body {
color: #444;
}
.all {
min-height: 400px;
}
.todo-light {
width: 40px;
}
.todo-icon {
width: 35px;
}
.star-icon {
width: 40px;
margin-right: 10px;
}
.baggage-icon {
width: 40px;
}
.todo-star-icon,.todo-item-icon,.todo-baggage-icon{
display: flex;
align-items: center;
}
.container {
width: 900px;
margin-left: auto;
margin-right: auto;
}
.header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.left-header h1{
margin-top: 0px;
margin-bottom: 0px;
font-size: 40px;
}
.left-header .date {
font-size: 15px;
}
.right-header {
display: flex;
align-items: center;
}
.new-task {
display: flex;
border-bottom: 1px solid rgb(212, 207, 207);
}
.new-task input {
border: none;
outline:none;
width: 400px;
padding-left: 10px;
font-size: 20px;
}
.todo-item {
display: flex;
border-bottom: 1px solid rgb(212, 207, 207);
padding-top: 6px;
padding-bottom: 6px;
}
.todo-item:hover {
background-color: rgb(247, 241, 241);
}
.todo-content {
flex:10;
padding-left: 10px;
}
.todo-content .todo-text {
font-size: 28px;
}
.todo-dian-icon {
position: relative;
}
.todo-list,.done-list {
font-size: 20px;
}
.todo-template {
display: none;
}
/* 定时 */
.todo-item .settime,.todo-item .delaytime{
margin: auto 0;
margin-right: 15px;
}
.todo-item span{
font-size: 20px;
}
.todo-item input {
width: 50px;
padding:5px;
font-size: 20px;
color: rgb(23, 26, 204);
}
JS
//定义输入框元素
var newTaskInput = document.querySelector('.new-task input')
//定义已做 未做元素
var todolist = document.querySelector('.todo-list')
var donelist = document.querySelector('.done-list')
//存放本地缓存数据
let arr = JSON.parse(localStorage.getItem('data')) || []
//得到当前时间
gettime()
//加载之前本地的数据
init()
//键盘监听
newTaskInput.onkeydown = function (e) {
//回车键
if (e.keyCode == 13) {
//得到输入值
let newTaskvalue = newTaskInput.value;
//消除错位输入格式
if (newTaskvalue.trim() === '') {
return
}
//obj存放状态,用来判断是否完成
var obj = {
id: Date.now(), //给每个obj不同的id属性,用来锁定
value: newTaskvalue, //输入框的值
done: false, //小圆点状态
collect: false, //星星状态
updateTime: Date.now(), //时间戳,用来给obj排序
settime: 0, //定时的时间
}
//把obj放进数组
arr.push(obj)
//存入本地
localStorage.setItem('data', JSON.stringify(arr))
//清空值
this.value = '';
//加载新添加的数据
init()
}
}
//渲染数组中的数据
function init() {
//渲染
load()
//星星渲染
starload()
//定时器渲染
Timingload()
//定时功能
timing()
//小圆点,星星点击事件
allclick()
//删除操作
DeleteClick()
}
//点击修改本地记录
function allclick() {
//得到本地数据
let arr = JSON.parse(localStorage.getItem('data'))
let todoItemIcons = document.querySelectorAll('.todo-icon')
let starItemIcons = document.querySelectorAll('.star-icon')
for (let i = 0; i < todoItemIcons.length; i++) {
//判断小圆点状态,存到本地
todoItemIcons[i].onclick = function () {
let arr = JSON.parse(localStorage.getItem('data'))
//得到点击事项的id
let id = this.parentElement.parentElement.getAttribute("data-set")
for (let j = 0; j < arr.length; j++) {
if (arr[j].id == id) {
//反转本地的done值
arr[j].done = !arr[j].done
//更改updateTime时间戳
arr[j].updateTime = Date.now()
//done为true就是noround,false就是round
let imgPaht = arr[j].done ? "Imgs/todolist图片/noround.png" : "Imgs/todolist图片/round.png"
this.setAttribute("src", imgPaht)
//时间戳牌序,从大到小排序
arr.sort((a, b) => b.updateTime - a.updateTime);
//存进去
localStorage.setItem('data', JSON.stringify(arr))
}
}
//渲染一遍
location.reload()
init()
}
//判断星星状态,存到本地
starItemIcons[i].onclick = function () {
//得到点击事项的id
let id = this.parentElement.parentElement.getAttribute("data-set")
for (let j = 0; j < arr.length; j++) {
if (arr[j].id == id) {
//反转本地collect值
arr[j].collect = !arr[j].collect
//collect为true就是star-fill,false就是star
let imgpaht = arr[j].collect ? "Imgs/todolist图片/star-fill.png" : "Imgs/todolist图片/star.png"
//修改src
this.setAttribute("src", imgpaht)
//存到本地
localStorage.setItem('data', JSON.stringify(arr))
}
}
location.reload()
}
}
}
//回收站点击功能
function DeleteClick() {
//删除操作
let arr = JSON.parse(localStorage.getItem('data'))
let todobaggages = document.querySelectorAll('.todo-baggage-icon .baggage-icon')
//给每个回收站图标添加点击事件
for (let i = 0; i < todobaggages.length; i++) {
todobaggages[i].onclick = function () {
//找到回收站父类的父类,就是todo-item
let todoitem = todobaggages[i].parentElement.parentElement
//找到该todo-item自定义的id属性
let id = todoitem.getAttribute("data-set")
//遍历本地中的arr的id属性。
for (let j = 0; j < arr.length; j++) {
//如果本地的id和外面的id相同,说明找到了。
if (arr[j].id == id) {
//删除本地的这条信息
arr.splice(j, 1)
//删除后直接返回
break
}
}
//送到本地
localStorage.setItem('data', JSON.stringify(arr))
//重新加载
location.reload()
//表面上移除该元素
todoitem.remove()
}
}
}
//定时和延时功能
function timing() {
//从本地得到信息
let arr = JSON.parse(localStorage.getItem('data'))
let todosettime = document.querySelectorAll('.todo-item .settime input')
//遍历todo-item
for (let i = 0; i < todosettime.length; i++) {
todosettime[i].onblur = function () {
//获取到匹配得id
for (let j = 0; j < arr.length; j++) {
if (arr[j].id == todosettime[i].parentElement.parentElement.getAttribute("data-set")) {
//给本地得settime存值
arr[j].settime = Number(todosettime[i].value)
//中间值
let k = arr[j].settime
//存入本地
localStorage.setItem('data', JSON.stringify(arr))
//定时器
let time = setInterval(function () {
k--
if (k <= 0) {
alert('定时时间已到')
//变为只读属性
todosettime[i].setAttribute('readonly', 'readonly');
clearInterval(time)
}
}, 1000);
}
}
}
}
}
//定时提醒功能
function Timingload() {
//得到本地数据,没找到就为空
let arr = JSON.parse(localStorage.getItem('data')) || []
let todosettime = document.querySelectorAll('.todo-item .settime input');
//遍历本地数据
arr.forEach(function (item) {
for (let i = 0; i < todosettime.length; i++) {
//通过自定义id属性定位元素
if (todosettime[i].parentElement.parentElement.getAttribute('data-set') == item.id) {
//让显示数字等于本地数据
let displaynumber = item.settime
//让数字不为零得显示
if (displaynumber != 0) {
//渲染界面
todosettime[i].value = displaynumber
//只读属性
todosettime[i].setAttribute('readonly', 'readonly');
}
}
}
})
}
//渲染画面
function load() {
//空字符串拼接html元素
let todo_list = '', done_list = ''
//获取本地数据
let arr = JSON.parse(localStorage.getItem('data')) || []
//遍历arr数组
arr.forEach(function (item) {
//判断每个item的done属性
if (item.done === false) {
todo_list += `<div class="todo-item" data-set='${item.id}'>
<div class="todo-item-icon"><img class="todo-icon" src=${"Imgs/todolist图片/round.png"} alt=""></div>
<div class="todo-content">
<div class="todo-text">${item.value}</div>
</div>
<div class="settime">
<span>定时</span>
<input class="ban" type="text">
<span>分</span>
</div>
<div class="todo-star-icon"><img class="star-icon" src=${"Imgs/todolist图片/star.png"} alt=""></div>
<div class="todo-baggage-icon"><img class="baggage-icon" src=${"Imgs/todolist图片/recover.png"} alt=""></div>
</div>`
}
todolist.innerHTML = todo_list
if (item.done === true) {
done_list += `<div class="todo-item" data-set='${item.id}'>
<div class="todo-item-icon"><img class="todo-icon" src=${"Imgs/todolist图片/noround.png"} alt=""></div>
<div class="todo-content">
<div class="todo-text" style="text-decoration:line-through;">${item.value}</div>
</div>
<div class="settime">
<span>定时</span>
<input class="ban" type="text">
<span>分</span>
</div>
<div class="todo-star-icon"><img class="star-icon" src=${"Imgs/todolist图片/star.png"} alt=""></div>
<div class="todo-baggage-icon"><img class="baggage-icon" src=${"Imgs/todolist图片/recover.png"} alt=""></div>
</div>`
}
donelist.innerHTML = done_list
})
}
//星星的点击渲染
function starload() {
let starItemIcons = document.querySelectorAll('.star-icon')
//得到本地数据
let arr = JSON.parse(localStorage.getItem('data')) || []
//遍历本地每条数据
arr.forEach(function (item) {
//如果有item是未被收藏的
if (item.collect === false) {
//遍历星星图标
for (let i = 0; i < starItemIcons.length; i++) {
//找到每个item的自定义id属性
let id = starItemIcons[i].parentElement.parentElement.getAttribute('data-set')
//如果匹配
if (item.id == id) {
//更改当前星星的src
starItemIcons[i].setAttribute("src", 'Imgs/todolist图片/star.png')
console.log();
}
}
} else {
for (let i = 0; i < starItemIcons.length; i++) {
let id = starItemIcons[i].parentElement.parentElement.getAttribute('data-set')
if (item.id == id) {
starItemIcons[i].setAttribute("src", 'Imgs/todolist图片/star-fill.png')
}
}
}
})
}
//获得时间
function gettime() {
//获得日期的元素
let Date1 = document.querySelector('.header .date');
//声明一个Date类对象
let date = new Date();
//得到年份
let year = date.getFullYear();
//得到月份
let month = date.getMonth() + 1;
//得到天
let dates = date.getDate();
let arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
//得到星期几的数字
let day = date.getDay();
console.log();
//拼接
let display = year + '年' + month + '月' + dates + '日 ' + arr[day];
Date1.innerHTML = display;
}
JS我每一步都有注释,应该很清楚能明白