要点：

　　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. 牛客OI赛制测试赛2 A 无序组数

    链接:https://www.nowcoder.com/acm/contest/185/A来源:牛客网 题目描述 给出一个二元组(A,B) 求出无序二元组(a,b) 使得(a|A,b|B)的组数 无序 ...

  2. CodeForces - 1105D Kilani and the Game(多源BFS+暴力)

    题目: 给出一张游戏地图和每个玩家的位置,每次能移动的步数.p个玩家轮流移动占领地图中的格子(当格子已经被占领时就不能在占领了)在每个玩家都不能移动时游戏结束. 问在游戏结束后,每个玩家占领的格子的数 ...

  3. 队列的JS实现及广度优先搜索（BFS）的实现

    队列是先进先出(FIFO)的数据结构,插入操作叫做入队,只能添加在队列的末尾:删除操作叫做出队,只能移除第一个元素.在JS中,用数组可以很简单的实现队列.JavaScript实现排序算法 functi ...

  4. mac 监控文件变化并重启php

    自己撸一个框架,需要监控代码变化 安装fswatch brew install fswatch shell重启PHP脚本reload.sh #!/bin/sh do ps -ef | grep php ...

  5. [第一波模拟\day2\T1] {病毒分裂}(split.cpp)

    [题目描述] A 学校的实验室新研制出了一种十分厉害的病毒.由于这种病毒太难以人工制造了,所以专家们在一开始只做出了一个这样的病毒.这个病毒被植入了特殊的微型芯片,使其可以具有一些可编程的特殊性能.最 ...

  6. idea 神键

    http://blog.csdn.net/dc_726/article/details/42784275 idea 中几个十分酸爽的快捷键.

  7. js总结（一）：javascript的类型:基本类型、对象和数组

    javascript 类型分为2种,一个是原始值,另一个是复杂值(对象). 一.原始值 5个原始值是:数字,字符,布尔,null,undefined. 9个原生的对象构造函数:Number Strin ...

  8. [HDU2157]How many ways??（DP + 矩阵优化）

    传送门 k < 20 k这么小,随便dp一下就好了... dp[i][j][k]表示从i到j经过k个点的方案数 4重循环.. 但是如果k很大就不好弄了 把给定的图转为邻接矩阵,即A(i,j)=1 ...

  9. 间谍网络（tarjan缩点）

    洛谷传送门 看着这道题给人感觉就是tarjan求SCC,然而还得判断是否能控制全部间谍,这就得先从可以贿赂的点dfs一遍. 如果没有全部被标记了,就输出NO,再从没被标记的点里找最小的标号. 如果全被 ...

  10. JAVA中json转换为集合(对象)之间的相互转换

    字符串转换为json对象: String strResult = RestUtil.getRestContent(url+"/service/peccancy/myOrderList&quo ...