jQueryはローカルストレージ付きメモを実現

37366 ワード
先端
先日、ローカルストレージと簡単なメモの実現に関する2つの文章を送りましたが、そのメモはページをリフレッシュしたりブラウザを消したりしてデータを開くと消えてしまいます.では、なぜ2つを結合して、データを失わないwebメモを作らないのでしょうか.だから、アップグレード版2.0彼が来た!!!
実装機能:
  • メモ機能
    • を実現
  • 自動取得追加メモ時間
  • 完了イベントと未完了イベントの数を自動的に統計する
  • チェックボックスをオンにすると、対応するイベントは完了リスト
    • になります.
  • チェックボックスをオフにすると、対応するイベントは未完了リスト
    • になります.
  • X番をクリックすると、応答したイベントは
    • 削除されます.
  • メモの追加ボタンをクリックすると、入力ボックスが自動的に空になります.
  • ページをリフレッシュまたはブラウザを閉じると、ブラウザキャッシュをクリーンアップしない限り、データは失われません.
    実装効果: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("
  • "
    • +n.title+""+n.time+"+i+" class='glyphicon glyphicon-remove'>")
            }else{
                todocount++;
                $(".weiwancheng ul").prepend("
  • "
    • +n.title+""+n.time+"+i+" class='glyphicon glyphicon-remove'>")

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


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

    
})

    計画的に自分の生活を計画するのは成功の道の必修科目で、so、このメモはあなたが持つ価値があります!!!
    • jquery-validationを変更すると、検証プロンプトがよりきれいになります.
    jsでバックグラウンドパッケージのjsonデータを取得する