纯JS写的一款记录事项的单页应用

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯JS写的一款记录事项的单页应用相关的知识，希望对你有一定的参考价值。

要点：

　　1.使用localStorage存储

　　2._change_record_progress函数以字符串作为参数，用eval执行这个参数

　　3.使用了jQuery自定义事件，便于数据改变时实时更新显示

　　4.这一版代码中不考虑CSS问题

技术分享

<!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>

 

以上是关于纯JS写的一款记录事项的单页应用的主要内容，如果未能解决你的问题，请参考以下文章

simple-spa 一个简单的单页应用实例

bottle + vue.js 打造你的单页应用

最新文章推荐：使用 Vue.js 和 Bluemix 创建模块化的单页应用程序

带有 socket.io 的单页应用程序中的特定于部分的侦听器

具有 REST API 架构的单页应用程序

如何禁用通过 IIS 提供的单页应用程序 HTML 文件的缓存？