要点：

　　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写的一款记录事项的单页应用的更多相关文章

  1. 使用纯js写的一个分页

    上图晒效果: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用lim ...

  2. 前端 JS 原生 javascript 和 location.hash 实现一个单页应用的路由 router

    开篇日常立个flag-- 前言 最近在做一些应用,类似于单页应用,想实现类似于 Vue 路由的效果. 但是个人 Vue 基础四舍五入约等于无,而且看着 Vue-router 吃力+用不起来(因为我的项 ...

  3. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  4. 纯JS写动态分页样式效果

    效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...

  5. 纯JS写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  6. 纯js写“运动”框架

    所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...

  7. 纯JS写出日历

    封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" va ...

  8. 纯JS写的2048游戏，分享之

    这几天玩儿着2048这个游戏,突然心血来潮想练习下敲代码的思路.于是乎就模仿做了一个,到眼下位置还没有实现动态移动,不是非常好看,只是玩儿着自己模仿的小游戏还是蛮爽的,哈哈 假设没有玩儿过这个游戏,最 ...

  9. 纯js写验证码

    <html> <head> <meta name="viewport" content="width=device-width" ...

随机推荐

  1. rpm 包管理器

    rpm 包管理器 二进制应用程序的组成部分: 二进制文件.库文件.配置文件.帮助文件 程序包管理器:不同厂商的程序,包管理器也不同. debian:deb文件, dpkg包管理器 redhat: rp ...

  2. c++_等差素数列

    标题:等差素数列 2,3,5,7,11,13,....是素数序列.类似:7,37,67,97,127,157 这样完全由素数组成的等差数列,叫等差素数数列.上边的数列公差为30,长度为6. 2004年 ...

  3. 阿里云服务器ecs配置之安装mysql

    安装mysql数据库    1.安装工作:        下载 mysql 源安装包             [root@ming ~]# wget http://dev.mysql.com/get/ ...

  4. 3.3.3 使用 join 连接字段

        join 命令可以将多个文件结合在一起,每个文件里的每条记录,都共享一个键值(key),键值指的是记录中的主字段,通常会是用户名称.个人姓氏.员工编号之类的数据.举例来说,两个文件,一个列出所 ...

  5. DEVExpress中BarItem的使用2

    没有验证LookUpEdit与ComBox的区别. 没有验证ZoomTrackBarControl的使用方法. SparkLine看着也蛮有趣,需要绑定数据源控件的均没有验证. 前一节介绍的BarIt ...

  6. ES6(数据结构）

    一.set 用法 set 对数组进行转化 添加重复元素不会生效 (应用:去重复功能)转化过程不会有数据类型的转换 添加.删除.判断是否存在的方法 2. 读取(遍历)的几种方法 二.WeakSet 与S ...

  7. 【】关闭QQ右下角各种弹框

    []关闭QQ右下角弹框   一:     二:   超级会员设置过滤(屏蔽)广告后可以过滤哪些广告? 1.可以过滤QQ客户端好友聊天对话框右侧出现的Flash广告.左下角的文案广告: 如图: 2.可以 ...

  8. navicat不同数据库数据传输

    复制fo的t_fo_account表结构和数据到base库 结果

  9. Git 二进制文件冲突解决

    Git 二进制文件冲突解决 在我们合并分支的时候,如果两个分支都进行了修改那么就会产生合并冲突.对于非二进制文件的冲突解决,git会给出冲突的位置我们可以手动修改然后再commit.但是对于非二进制文 ...

  10. 【bzoj1055】[HAOI2008]玩具取名

    [bzoj1055][HAOI2008]玩具取名 2014年12月1日3,0111 Description 某人有一套玩具,并想法给玩具命名.首先他选择WING四个字母中的任意一个字母作为玩具的基本名 ...