要点：

　　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. P2756 网络流解决二分图最大匹配

    P2756 飞行员配对方案问题 题目背景 第二次世界大战时期.. 题目描述 P2756 飞行员配对方案问题 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语 ...

  2. curl 模拟post请求

    curl -H "Content-Type:application/json" -X POST --data '{"openId":"xxxxxxx& ...

  3. SpringBoot的线程调度

    Spring Boot默认提供了一个ThreadPoolTaskExecutor作为线程调度器,只需要在配置类中使用注解EnableAsync即可开启异步线程调度.在实际要执行的Bean中使用@Asy ...

  4. 条款10：令operator=返回一个reference to * this(Have assignment operators return a reference to *this)

    NOTE: 1.令赋值(assignment)操作符返回一个reference to *this. 2.此协议适用于所有赋值相关的运算比如:+= -= *=....

  5. InnoDB体系架构总结（一）

    缓冲池:    是一块内存区域,通过内存的速度来弥补磁盘速度较慢对数据库性能的影响.在数据库中读取的页数据会存放到缓冲池中,下次再读取相同页的时候,会首先判断该页是否在缓冲池中.对于数据库中页的修改操 ...

  6. 【51nod 1791】 合法括号子段

    有一个括号序列,现在要计算一下它有多少非空子段是合法括号序列. 合法括号序列的定义是: 1.空序列是合法括号序列. 2.如果S是合法括号序列,那么(S)是合法括号序列. 3.如果A和B都是合法括号序列 ...

  7. keepalived安装脚本

    keepalived_install.sh: #cat keepalived_install.sh #!/bin/bash pkg=keepalived-2.0.10.tar.gz tar xf $p ...

  8. 利用Bitvise SSH Client设置二级代理

    浏览器设置代理 chrome: 插件:SwitchyOmega 二级代理 软件:Bitvise SSH Client 友情连接:链接: https://pan.baidu.com/s/1fdth_TZ ...

  9. [codevs3622] 假期（单调队列）

    传送门 首先考虑暴力做法,可以先求一遍前缀和 sum,然后ans = max(ans, sum[i] - sum[k]) (i - q <= k <= i - p) 但这个肯定会超时. 仔 ...

  10. [HAOI2006]受欢迎的牛（tarjan缩点）

    洛谷传送门 直接tarjan求scc,然后统计出度为0的缩点,如果多余1个就输出0,只有一个就输出这个缩点里的点. ——代码 #include <cstdio> #include < ...