基于JQuery实现todolist＋本地存储作品实现教程

最新推荐文章于 2023-06-09 17:33:45 发布

Frank Zhang

最新推荐文章于 2023-06-09 17:33:45 发布

阅读量300

点赞数

文章标签：前端 jquery

本文链接：https://blog.csdn.net/qq_67503717/article/details/126923274

版权

作品主要是为了检验JQuery的学习成果和利用BootStrap实现的todolist作品。功能和页面都比较简单。但是基础功能都能实现，且加了本地存储，方便下次打开时上次的记录不会消失。

实现的功能：

增删改查，定时等。。。。

接下来上代码

//文档就绪
$(function () {
    gettime()
    init()
    //存放本地数据
    let arr = JSON.parse(localStorage.getItem('data')) || []
    //键盘按下事件
    $(".input-group .form-control").keydown(function (e) {
        //按的是回车
        if (e.keyCode == 13) {
            //赋值
            let newTaskvalue = $(".input-group .form-control").val()
            //消除格式
            if (newTaskvalue.trim() === '') {
                return
            }
            //定义对象
            let  obj = {
                id: Date.now(),
                value: newTaskvalue,
                done: false,
                collect: false,
                settime: 0,
                updateTime: Date.now()
            }
            //放入本地
            arr.push(obj)
            localStorage.setItem('data', JSON.stringify(arr))
            //清空值
            $(".input-group .form-control").val('')
            //渲染
            init()
        }
    })
})

function init() {
    load()
    starload()
    Timingload()
    allclick()
    DeleteClick()
    timing()
    changetext()
    find()
}

//点击修改本地记录
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]).click(function () {
            let arr = JSON.parse(localStorage.getItem('data'))
            //得到点击事项的id
            let id = $(this).parent().parent().attr("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).attr("src", imgPaht)
                    //时间戳牌序，从大到小排序
                    arr.sort((a, b) => b.updateTime - a.updateTime);
                    //存进去
                    localStorage.setItem('data', JSON.stringify(arr))
                }
            }
            location.reload()
            //渲染一遍
            init()
        })
        //判断星星状态，存到本地
        $(starItemIcons[i]).click(function () {
            //得到点击事项的id
            let id = $(this).parent().parent().attr("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).attr("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]).click(function () {
            //找到回收站父类的父类，就是todo-item
            let todoitem = $(todobaggages[i]).parent().parent()
            //找到该todo-item自定义的id属性
            let id = todoitem.attr("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 changetext(){
    //读取本地数据
    let arr = JSON.parse(localStorage.getItem('data'))||[]
    //获得所有修改按钮
    let changebut = document.querySelectorAll('.todo-item .btn-primary')
    for(let i=0;i<changebut.length;i++) {
        $(changebut[i]).click(function(){
            //匹配id
            let id = $(changebut[i]).parent().attr("data-set")
            //确认按钮点击
            $('.modal-footer .btn-default').click(function(){
                //获得修改后的值
                let changetext = $('#message-text').val()
                //匹配id
                for(let j=0;j<arr.length;j++){
                    if(arr[j].id == id){
                        //送本地
                        arr[j].value = changetext
                        localStorage.setItem('data',JSON.stringify(arr))
                        $('#message-text').val('')
                        break
                    }
                }
                // location.reload()
            })
        })
    }
}

//定时和延时功能
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]).blur(function(){       
            //获取到匹配得id
            for (let j = 0; j < arr.length; j++) {
                if (arr[j].id == $(todosettime[i]).parent().parent().attr("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]).attr('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]).parent().parent().attr('data-set') == item.id) {
                //让显示数字等于本地数据
                let displaynumber = item.settime
                //让数字不为零得显示
                if (displaynumber != 0) {
                    //渲染界面
                    $(todosettime[i]).val(displaynumber)
                    //只读属性
                    $(todosettime[i]).attr('readonly', 'readonly');
                }
            }
        }
    })
}

//页面加载
function load() {
    let todo_list = ''
    let done_list = ''
    let arr = JSON.parse(localStorage.getItem('data')) || []
    arr.forEach(item => {
        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>
           <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">修改</button>
           <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>`
        }
        $('.todo-list').html(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>
           <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">修改</button>
           <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>`
        }
        $('.done-list').html(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]).parent().parent().attr('data-set')
                //如果匹配
                if (item.id == id) {
                    //更改当前星星的src
                    $(starItemIcons[i]).attr("src", 'Imgs/todolist图片/star.png')
                }
            }
        } else {
            for (let i = 0; i < starItemIcons.length; i++) {
                let id = $(starItemIcons[i]).parent().parent().attr('data-set')
                if (item.id == id) {
                    $(starItemIcons[i]).attr("src", 'Imgs/todolist图片/star-fill.png')
                }
            }
        }
    })
}

//获得时间
function gettime() {
    //声明一个Date类对象
    let date = new Date();
    //得到年份
    let year = date.getFullYear();
    //得到月份
    let month = date.getMonth() + 1;
    //得到天
    let dates = date.getDate();
    let arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    //得到星期几的数字
    var day = date.getDay();
    //拼接
    let display = year + '年' + month + '月' + dates + '日  ' + arr[day];
    $('.header .date').html(display)
}
//查找功能
function find() {
    //搜索被点击
    $('.btn-success').click(function(){
        //得到输入的值
        let findtext = $('.form-control').val()
        //得到场上存在的所有值，匹配
        let todotext =document.querySelectorAll('.todo-item .todo-text')
        for(let i=0;i<todotext.length;i++){
            //如果每个item指不等于输入的值或者空值
            if($(todotext[i]).text()!=findtext && findtext!=''){
                //隐藏
                $(todotext[i]).parent().parent().hide()
                //如果等于空或输入值
            }else if(findtext==''|| $(todotext[i]).text()==findtext){
                //显示
                $(todotext[i]).parent().parent().show()
            }
        } 
    })
}

css和html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="CSS\iconfont.css">
    <style>
      body {
    color: #444;
  }
  .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-top: 20px;
    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;
  }
  .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);
  }
  
    </style>
</head>
<body>
    <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="input-group">
                <input type="text" class="form-control" placeholder="添加代办">
                <span class="input-group-btn">
                    <button class="btn btn-success" type="button">
                        搜索
                    </button>
                </span>
            </div>
        </div>
        <!-- 要做的任务 -->
        <div class="todo-list">
        </div>
        <!-- 已完成事件 -->
        <div class="done-list">
        </div>
        <!-- 模态框 -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-body">
                  <form>
                    <div class="form-group">
                      <label for="message-text" class="control-label">修改内容</label>
                      <textarea class="form-control" id="message-text"></textarea>
                    </div>
                  </form>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
                </div>
              </div>
            </div>
          </div>
    </div>

    <script src="js\todo清单.js"></script>
</body>

</html>

字体图标部分，需要大家自己引入了。