要点：

　　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. NOI2018_Day1_T1_归程

    题目描述 本题的故事发生在魔力之都,在这里我们将为你介绍一些必要的设定. 魔力之都可以抽象成一个 n 个节点.m 条边的无向连通图(节点的编号从 1 至 n). 我们依次用 l,a 描述一条边的长度. ...

  2. Linux 之 nano 编辑器的使用

    在Linux操作系统中,有很多的文本编辑器,最为重要的就是vi文本编辑器,下面来介绍一个简单的nano文本编辑器.nano的使用简单,我们可以直接加上文件名就能够打开一个旧文件或新文件,我们可以打开一 ...

  3. for、while循环

    for循环 # for 循环后面可以对Iterable或者Iterator进行遍历 # "abc"和[1,2,3]为可迭代对象,range(4)为迭代器 for i in &quo ...

  4. 学习PyQuery库

    学习PyQuery库 好了,又是学习的时光啦,今天学习pyquery 来进行网页解析 常规导入模块(PyQuery库中的pyquery类) from pyquery import PyQuery as ...

  5. iptables工具

    http://www.linuxidc.com/Linux/2012-12/77074.htm iptables 指令 语法: iptables [-t table] command [match]  ...

  6. 零、常用的Mysql数据库操作语句大全

    零.用户管理: 1.新建用户: >CREATE USER name IDENTIFIED BY 'ssapdrow'; 2.更改密码: >SET PASSWORD FOR name=PAS ...

  7. 66. No EntityManager with actual transaction available for current thread【从零开始学】

    [从零开始学习Spirng Boot-常见异常汇总] 具体异常信息: org.springframework.dao.InvalidDataAccessApiUsageException: No En ...

  8. 1284-Primitive Roots，学信安的路过

                                                      Primitive Roots 此题通过率如此之高,料想不会很难,但是再简单小菜还是不会.. 嗯,下 ...

  9. 洛谷P1504 积木城堡

    题目描述 XC的儿子小XC最喜欢玩的游戏用积木垒漂亮的城堡.城堡是用一些立方体的积木垒成的,城堡的每一层是一块积木.小XC是一个比他爸爸XC还聪明的孩子,他发现垒城堡的时候,如果下面的积木比上面的积木 ...

  10. Swift 了解

    本篇仅于个人小记,记录个人不熟悉的知识点儿.如若要了解更全,请前往如下网址:http://www.runoob.com/swift/swift-arrays.html 1.Swift 标记 分号:Sw ...