要点：

　　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. Hadoop集群安装指南（CHD5.9.1）（分布式+图文详解）

    centos7.1,CDH5.9.1,3台机器,终极指导安装 下载链接如下: 安装文件下载链接如下: 链接:https://pan.baidu.com/s/1RQYNiWn9a-T8GXcCsoDBs ...

  2. 【洛谷日报#75】浅谈C++指针

    放入我的博客食用效果更佳(有很多oi学习资料) 1.指针基础 1.引用 C++有一个东西叫引用,引用相当于给对象(如:变量)起了另一个名字,引用必须用对象初始化,一旦初始化,引用就会和初始化其的对象绑 ...

  3. Openjudge-百练-4013-踩方格

    这题目是一道深搜的题目,我们写一个递归函数叫Ways(int i, int j ,int n),i j就是当前所处的坐标,我们设置一个visited数组,简称 V . 对于这个数组,首先初始化为零,然 ...

  4. sql数据表的设计思路

    好的表结构分的比较细致,个人理解大概主要分为主表.明细.历史记录表.中间表,辅助表结构应该分为:类型表.状态表.统计表.统计明细表等.为了一个功能加那么多表实在是多余,如果写一个非常复杂的业务逻辑还是 ...

  5. 由Java实现Valid Parentheses

    一.题目 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the ...

  6. css选择器(1)——元素选择器、类名和id选择器

    css的主要优点之一就是它能很容易地向所有同类型的元素应用一组样式.当然它是通过选择器来实现这一点的. 基本规则结构: 语法= 选择器 +声明块 1.元素选择器——直接使用html元素名,指向文档元素 ...

  7. Could not resolve dependencies for project com.shadow:shlang:jar:1.0-SNAPSHOT:

    maven打包项目出现缺少jar包错误 如果是将本地引用的jar包放在了lib目录下并通过下面方式引入 解决方案为 <dependency>    <groupId>com.o ...

  8. POJ 3259 Wormholes（负权环路）

    题意: 农夫约翰农场里发现了很多虫洞,他是个超级冒险迷,想利用虫洞回到过去,看再回来的时候能不能看到没有离开之前的自己,农场里有N块地,M条路连接着两块地,W个虫洞,连接两块地的路是双向的,而虫洞是单 ...

  9. Python数据结构--搜索树

    ''' 二叉搜索树(BST)是一棵树,其所有节点都遵循下述属性 - 节点的左子树的键小于或等于其父节点的键. 节点的右子树的键大于其父节点的键. 因此,BST将其所有子树分成两部分; 左边的子树和右边 ...

  10. 算法导论 第八章 线性时间排序（python）

    比较排序:各元素的次序依赖于它们之间的比较{插入排序O(n**2) 归并排序O(nlgn) 堆排序O(nlgn)快速排序O(n**2)平均O(nlgn)} 本章主要介绍几个线性时间排序:(运算排序非比 ...