jQuery实现带本地存储的备忘录

前几天发了两篇关于本地存储和实现简单备忘录的两篇文章,但是那个备忘录一刷新页面或关掉浏览器再打开数据就不见了,那为何不把它俩结合一下,做一个不会丢失数据的web备忘录呢。所以,升级版2.0他来了!!!

实现功能:

  1. 实现备忘功能
  2. 自动获取添加备忘时间
  3. 自动统计已完成和未完成事件的数量
  4. 勾选复选框,相应的事件会到已完成列表
  5. 取消复选框,相应的事件会到未完成列表
  6. 点击X号,响应的事件删除
  7. 点击添加备忘按钮,输入框自动清空
  8. 刷新页面或关闭浏览器,数据不会丢失(除非清理浏览器缓存)

实现效果:
在这里插入图片描述
html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>备忘录</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="js/jQuery.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div class="header">
        <input type="text" placeholder="添加备忘事件" id="in">
        <button class="btn btn-success">添加备忘</button>
    </div>
    <div class="con">
        <div class="weiwancheng">
            <p>未完成<i class="weicount">1</i></p>
            <ul>
                <li>
                
                </li>
            </ul>
        </div>
        
        <div class="yiwancheng">
            <p>已完成<i class="yicount"></i></p>
            <ul>
                
            </ul>
        </div>
        
    </div>
</body>
</html>

css文件:

* {
    margin: 0;
    padding: 0;
    outline: none!important;
}
html {
    height: 100%;
}
body {
     height: 100%;
     background-image: -webkit-linear-gradient(left,#fbc2eb, #a6c1ee);
}
.header {
     width: 500px;
     height: 42px;
     margin: 10px auto;
     text-align: center;
}
.header input {
    width: 300px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    padding: 0 10px;
}
.header button {
    height: 40px;
    margin-left: 10px;
    border: 0;
}
.weiwancheng,
.yiwancheng {
    width: 600px;
    margin: 10px auto;
}
.weicount,
.yicount {
    height: 20px;
    width: 20px;
    border: 0;
    margin-left: 20px;
    padding: 5px 8px 5px 8px;
    background-color: #fff;
    border-radius: 50%;
}
.weiwancheng ul,
.yiwancheng ul {
    width: 100%;
}
.weiwancheng ul li,
.yiwancheng ul li {
    padding-left: 10px;
    display: flex;
    align-items: center;
    list-style: none;
    line-height: 30px;
    width: 100%;
    margin-top: 10px;
    border: 0;
    border-radius: 10px;
    background-color: aqua;
}
.yiwancheng ul li {
    background-color: #a6c1ee;
}
.content {
    display: inline-block;
    width: 400px;
    word-wrap:break-word;
    margin: 0!important;
    padding: 0 10px;
}
.weiwancheng ul li em,
.yiwancheng ul li em {
    margin-left: 20px;
    cursor: pointer;
    height: 14px;
    width: 14px;
}
.weiwancheng ul li input,
.yiwancheng ul li input {
    margin-top: 0;
    height: 20px;
    width: 20px;
}

js文件:

$(function () {
    load();
    $(".btn").on("click", function () {
        if($("#in").val()==''){
            alert('备忘不能为空!')
        }else{
            function getNow(s) {
                return s < 10 ? '0' + s : s;
            }
    
            var myDate = new Date();
    
            var year = myDate.getFullYear();        //获取当前年
            var month = myDate.getMonth() + 1;   //获取当前月
            var date = myDate.getDate();            //获取当前日
            var h = myDate.getHours();              //获取当前小时数(0-23)
            var m = myDate.getMinutes();          //获取当前分钟数(0-59)
            var s = myDate.getSeconds();
    
            var now = year + '-' + getNow(month) + "-" + getNow(date) + " " + getNow(h) + ':' + getNow(m) + ":" + getNow(s);
            var local = getDate();
            console.log(local);
            local.push({title:$("#in").val(),time:now,done:false});
            saveDate(local);
            load();
            $("#in").val('');
        }
    });

    $(".weiwancheng ul,.yiwancheng ul").on("click","em",function(){
        var data=getDate();
        var index=$(this).attr("index");
        data.splice(index,1);
        saveDate(data);
        load();
    });
    $(".weiwancheng ul,.yiwancheng ul").on("click","input",function(){
        var data=getDate();
        var index=$(this).siblings("em").attr("index");
        data[index].done=$(this).prop("checked");
        saveDate(data);
        load();
    });

    function saveDate(data){
        localStorage.setItem("todolist",JSON.stringify(data))
    }


    function load(){
        var data=getDate();
        $(".weiwancheng ul,.yiwancheng ul").empty();
        var todocount=0;
        var donecount=0;
        $.each(data,function(i,n){
            if(n.done){
                donecount++;
                $(".yiwancheng ul").prepend("<li><input type='checkbox' checked='checked'><p class='content'>"+n.title+"</p><span>"+n.time+"</span><em index="+i+" class='glyphicon glyphicon-remove'></em></li>")
            }else{
                todocount++;
                $(".weiwancheng ul").prepend("<li><input type='checkbox'><p class='content'>"+n.title+"</p><span>"+n.time+"</span><em index="+i+" class='glyphicon glyphicon-remove'></em></li>")

            }
            
        });
        $(".weicount").text(todocount);
        $(".yicount").text(donecount);
    }


    function getDate() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }

    
})



有计划的规划自己的生活是成功路上的必修课,so,此备忘录你值得拥有!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章