基于js实现todolist（本地存储功能）

最新推荐文章于 2023-07-13 17:52:20 发布
最新推荐文章于 2023-07-13 17:52:20 发布
阅读量307 收藏 1
点赞数 1
文章标签： javascript html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_67503717/article/details/125466571
版权

先来看看效果

 功能比较少，页面也很简洁，接下来上代码

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;">&#xeaf3;</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我每一步都有注释，应该很清楚能明白

Frank Zhang
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ToDoList——原生JavaScript（超详细）
qq_65715980的博客
08-02 1192
原生js，制作ToDoList，重点JavaScript部分，后期还会更新vue做法。
[JavaScript实例解析]简易TODO List，2024年最新3个月学会Web前端开发
最新发布
m0_60635321的博客
04-16 614
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
前端经典——todolist(html+javascript)
vh_YUNYANGYUMO的博客
09-22 1251
todolist项目可谓是前端学员的一个必修项目，各式各样的前端框架都可以从这个简单的小项目练起，在使用框架开发两年的时间呢，最近感觉对原生js的一些用法生疏的很，便借用这个基础小项目复习了一下js语言，同时也适用于刚接触前端的同学，下面就是一些示例图和代码，感兴趣的小伙伴来看看吧。
原生JS实现ToDo-List
weixin_43290826的博客
07-13 191
原生JS操作DOM经典综合案例
js-todoList
02-15
js-todoList
ToDoList本地存储原生js版/jQuery版
m0_71221890的博客
06-25 212
todolist本地存储原生js/jQury实现(localStorage练习)
原生js实现todolist功能
qq_48905575的博客
10-15 236
效果图： 上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>todolist</title> <style type="text/css"> body { margin: 0; padding: 0; font-size: 16px; background: #CDCDCD; }
【精讲】利用原生js实现todolist
m0_59505309的博客
08-02 651
【精讲】利用原生js实现todolist
javascript学习-todolist（利用本地存储）
qq_43368682的博客
07-25 549
todolist的例子（利用本地存储） 结合rem布局和本地存储编写一个具有记录日程的程序。利用rem布局使得页面适用于各种设备类型。 需求 1、移动端为主Pc端可用 2、输入框，输入待办事项 3、未完成列表能够显示出未完成的内容，可以对其删除，改成完成状态 4、完成列表：能够显示完成内容，可以删除改成未完成 步骤： html结构、 css样式、 javascript功能： 输入框 未完成、完成列表显示 删除改变状态功能 首先搭建基于rem布局的页面框架
原生JavaScript实现todolist功能
10-18
本篇文章给大家介绍了通过原生JavaScript实现todolist功能相关知识点，对此有需要的朋友可以学习下。
vue实现todolist基本功能以及数据存储功能实例详解
10-17
本文通过实例代码给大家介绍了vue实现todolist基本功能以及数据存储功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Todo-List:JS TodoList
05-22
待办事项清单 JS TodoList
Vue实现todolist删除功能
08-27
主要介绍了Vue实现todolist删除功能,，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue实现todolist功能、todolist组件拆分及todolist的删除功能
10-17
主要介绍了vue实现todolist功能、todolist组件拆分及todolist的删除功能,需要的朋友可以参考下
js实现的todolist
insgo的博客
07-21 953
* { margin: 0; padding: 0 } body { background-color: rgb(205, 205, 205); } .header { background-color: #000; height: 60px; } .header-bar { width: 500px; margin: 0 auto; } .header-title { font-size: 30p..
js实现Todolist
qq_63730529的博客
12-26 603
学习JavaScript过程中制作的一个Todolist
js实现todoList
weixin_47207556的博客
09-30 1485
原来用js也能写出来很漂亮的todoList 实现了todolist的添加，切换完成状态，删除功能。数据是存储在localStorgage上的因此刷新，或者重新进入数据都是存在的。 思路：将每个li节点用js对象来模拟，监听form，提交时添加li元素并追加到ul列表中。为每个创建的li绑定事件，切换状态。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
js实现TODOlist
qq_58705070的博客
11-13 373
todolist的小案例
vuex实现todolist本地存储
04-26
首先，我们需要在Vuex中定义一个状态，用于存储todo列表数据。...这样，我们就实现了将todoList数据存储到本地的功能。每次更新todoList时，都会将最新的数据存储到localStorage中，从而实现数据的持久化存储。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值