纯JS写的一款记录事项的单页应用
要点:
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写的一款记录事项的单页应用的更多相关文章
- 使用纯js写的一个分页
上图晒效果: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用lim ...
- 前端 JS 原生 javascript 和 location.hash 实现一个单页应用的路由 router
开篇日常立个flag-- 前言 最近在做一些应用,类似于单页应用,想实现类似于 Vue 路由的效果. 但是个人 Vue 基础四舍五入约等于无,而且看着 Vue-router 吃力+用不起来(因为我的项 ...
- 纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
- 纯JS写动态分页样式效果
效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...
- 纯JS写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
- 纯js写“运动”框架
所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...
- 纯JS写出日历
封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" va ...
- 纯JS写的2048游戏,分享之
这几天玩儿着2048这个游戏,突然心血来潮想练习下敲代码的思路.于是乎就模仿做了一个,到眼下位置还没有实现动态移动,不是非常好看,只是玩儿着自己模仿的小游戏还是蛮爽的,哈哈 假设没有玩儿过这个游戏,最 ...
- 纯js写验证码
<html> <head> <meta name="viewport" content="width=device-width" ...
随机推荐
- 如何移除浏览器一启动就打开lunchpage.org
lunchpage.org 就是一个劫持网站.症状就是你打开你电脑上的任何浏览器都会重定向到一个广告页面.这个很烦! 解决方法: 1. 安装 Zemana AntiMalware 便携版. 2. 打开 ...
- luogu P1618 三连击(升级版)
题目描述 将1,2,…,9共9个数分成三组,分别组成三个三位数,且使这三个三位数的比例是A:B:C,试求出所有满足条件的三个三位数,若无解,输出“No!!!”. //感谢黄小U饮品完善题意 输入输出格 ...
- luogu P1238 走迷宫--DFS模板好(水)题
题目描述 有一个m*n格的迷宫(表示有m行.n列),其中有可走的也有不可走的,如果用1表示可以走,0表示不可以走,文件读入这m*n个数据和起始点.结束点(起始点和结束点都是用两个数据来描述的,分别表示 ...
- 【HIHOCODER 1601】 最大得分(01背包)
描述 小Hi和小Ho在玩一个游戏.给定一个数组A=[A1, A2, ... AN],小Hi可以指定M个不同的值S1,S2, S3 ... SM,这样他的总得分是 ΣSi × count(Si).(co ...
- 【HIHOCODER 1033 】 交错和(数位DP)
描述 输入 输入数据仅一行包含三个整数,l, r, k(0 ≤ l ≤ r ≤ 1018, |k| ≤ 100). 输出 输出一行一个整数表示结果,考虑到答案可能很大,输出结果模 109 + 7. 提 ...
- [第一波模拟\day2\T1] {病毒分裂}(split.cpp)
[题目描述] A 学校的实验室新研制出了一种十分厉害的病毒.由于这种病毒太难以人工制造了,所以专家们在一开始只做出了一个这样的病毒.这个病毒被植入了特殊的微型芯片,使其可以具有一些可编程的特殊性能.最 ...
- python基础——4(数字、字符串、列表类型的内置方法介绍)
目录 一.可变与不可变类型 二.数字类型 三.字符串类型 四.列表类型 一.可变与不可变类型 可变类型:值改变,但是id不变,证明就是在改变原值,是可变类型 不可变类型:值改变,id也跟着改变,证明产 ...
- 慕课网 微信小程序商城构建全栈应用 tp5【总结】
1.异常处理: [代码越抽象,复用性越高] [封装性越好,适应代码变化的能力越强] [] <?php/** * Created by PhpStorm. * User: 14155 * Date ...
- Linux(4):文件属性
文件属性: # 重点: 磁盘空间不足 和 软链接与硬链接的区别 查看文件的属性: # ls lhi 文件 [root@NEO ~]# ls -lhi /etc/hosts 130078 -rw-r-- ...
- Notification通知创建
Notification通知创建 由于通知是一个远程视图,所以创建通知在状态栏显示需要用到三个主要的对象: 一.PendingIntent对象,用来承载Intent对象的,Intent对象主要是定义通 ...