純JS寫的一款記錄事項的單頁應用

時間 2019-12-09

原文原文鏈接

要點：javascript

　　1.使用localStorage存儲html

　　2._change_record_progress函數以字符串做爲參數，用eval執行這個參數java

　　3.使用了jQuery自定義事件，便於數據改變時實時更新顯示jquery

　　4.這一版代碼中不考慮CSS問題app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- jquery -->
    <script src="jquery-3.2.1.js"></script>
    <title>進度記錄工具</title>
</head>
<body>
    <table>
        <tr>
            <td><input type="text" id='item'></td>
            <td><input type="text" id='progress'></td>
            <td><input type="button" value="保存" onclick="save()"></td>
        </tr>
    </table>
    <script>
        $(
            function() {
                show();
                $(this).bind("record_progress_is_changed",show);
            }
        );
        function show(){
            $("table tr:gt(0)").remove();
            var o = JSON.parse(localStorage.record_progress || "{}");
            for(var k in o){
                var html = "<tr><td>"+k+"</td><td>"+o[k]+"</td></tr>";
                $html = $(html).append("<td><a href='javascript:void(0);' onclick='my_delete.call(this)'>刪除</a></td>");
                $("table").append($html);
            }
        }
        function save(){
            var item = $("#item");
            var progress = $("#progress");
            if(item.length != progress.length){
                console.error("有錯誤，條目數和進度數不匹配!");
                return false;
            }
            _change_record_progress("o['"+item.val()+"']='"+progress.val()+"';");
            item.val("");
            progress.val("");
        }
        function my_delete(){
            var $this = $(this);
            var item = $this.parent().prev().prev();
            _change_record_progress("delete o['"+item.text()+"'];");
        }
        function _change_record_progress(str){
            var o = JSON.parse(localStorage.record_progress || "{}");
            eval(str);
            localStorage.record_progress=JSON.stringify(o);
            $.event.trigger("record_progress_is_changed");
        }
    </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。