使用环境:Chrome 36.0...+

技术:HTML5

目的:习练HTML5

功能概述:记录管理每天工作内容,便签清单

HTML5+CSS3呈现UI,JavaScript操作数据库,SQLite存储数据

预览:

关键代码:

             // save data
function dataStorage(o) { for (var i = 0; i < o.childNodes.length; i++) {
if (o.childNodes[i].nodeName == "P") {
o.removeChild(o.childNodes[i]);
}
} if (o.innerText.replace(/\s+/g, "").length == 0) {
return;
} var task = new Object();
task.task = o.innerText;
task.progressid = 2;
task.progress = ProgressEnum[task.progressid];
if (o.id == "newEditNode") {
o.removeAttribute("id");
task.year = nowDate.getFullYear();
task.month = nowDate.getMonth() + 1;
task.day = nowDate.getDate(); // open a database transaction
DB.transaction(function(tx) {
// insert into table(task,progress,year,month,day)
tx.executeSql('INSERT INTO ' + TableName + ' VALUES(?,?,?,?,?,?,0)', [task.task, task.progress, task.progressid, task.year, task.month, task.day],
// success:show success log in console
function(tx, rs) {
queryData(o.parentElement.id);
console.log("save data successfully!");
},
// fail:show error log in console
function(tx, error) {
console.log(error.source + "::" + error.message);
});
});
} else {
DB.transaction(function(tx) {
// update
tx.executeSql('UPDATE ' + TableName + ' SET task=? WHERE rowid=?', [task.task, o.id],
// success:show success log in console
function(tx, rs) {
queryData(o.parentElement.id);
console.log("update data successfully!");
},
// fail:show error log in console
function(tx, error) {
console.log(error.source + "::" + error.message);
});
});
}
} // query data
function queryData(parentId) {
document.getElementById(parentId).innerHTML = "";
DB.transaction(function(tx) {
tx.executeSql('SELECT rowid,* FROM ' + TableName + ' WHERE enabled=0 ORDER BY progressid ASC, rowid DESC', [], function(tx, rs) {
for (var i = 0; i < rs.rows.length; i++) {
createNode(rs.rows.item(i), parentId); //create node to show data
}
});
});
createEditNode(parentId); // create new edit node
} //change current date
function changeDate(cid, m) {
nowDate = new Date(document.getElementById(cid).innerText);
if (m == "+") {
nowDate.setDate(nowDate.getDate() + 1);
} else {
nowDate.setDate(nowDate.getDate() - 1);
}
document.getElementById("currentDate").innerText = nowDate.getFullYear() + "." + (nowDate.getMonth() + 1) + "." + nowDate.getDate();
TableName = "doList" + nowDate.getFullYear() + (nowDate.getMonth() + 1) + nowDate.getDate();
DB.transaction(function(tx) {
//create data table
tx.executeSql('CREATE TABLE IF NOT EXISTS ' + TableName + '(task TEXT,progress varchar(300),progressid INTEGER,year INTEGER,month INTEGER,day INTEGER,enabled INTEGER)', []);
});
queryData("divcontent");
} function load() {
if (navigator.appCodeName != "Mozilla") { } else {
/* ---- start program --- */
// create database
nowDate = new Date();
ProgressEnum = ["Executing", "Reform", "Pending", "Finished", "Cancel"];
TableName = "doList" + nowDate.getFullYear() + (nowDate.getMonth() + 1) + nowDate.getDate();
document.getElementById("currentDate").innerText = nowDate.getFullYear() + "." + (nowDate.getMonth() + 1) + "." + nowDate.getDate();
DB = openDatabase("toDoList", '', 'To Do list DataBase', 102400);
DB.transaction(function(tx) {
//create data table
tx.executeSql('CREATE TABLE IF NOT EXISTS ' + TableName + '(task TEXT,progress varchar(300),progressid INTEGER,year INTEGER,month INTEGER,day INTEGER,enabled INTEGER)', []);
});
queryData("divcontent");
}
}

URL:http://dicolancy.github.io/DemoCode/html5/todolist_chrome.html

HTML5学习笔记:HTML5基于本地存储SQLite的每日工作任务清单程序.[只支持chrome]的更多相关文章

  1. HTML5学习笔记(五)存储

    HTML5 web 存储,一个比cookie更好的本地存储方式.数据以 键/值 对存在, web网页的数据只允许该网页访问使用.加的安全与快速.可以存储大量的数据,而不影响网站的性能. 客户端存储数据 ...

  2. HTML5学习总结-07 WebStorage 本地存储

    一 Storage sessionStorage session临时回话,从页面打开到页面关闭的时间段 窗口的临时存储,页面关闭,本地存储消失 localStorage 永久存储(可以手动删除数据)S ...

  3. HTML5学习笔记----html5与传统html区别

    一. HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变,主要有如下: HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变. HTML5中 ...

  4. [html5] 学习笔记-html5音频视频

    HTML5 最大的新特色之一就是支持音频和视频.在 HTML5 之前,我们必须使用插件如 Silverlight  或 Flash 来实现这些功能.在 HTML5 中,可以直接使用新标签< au ...

  5. [html5] 学习笔记-html5增强的页面元素

    在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...

  6. (转)HTML5开发学习(3):本地存储之Web Sql Database

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Data ...

  7. (转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...

  8. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  9. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Linux Redis 开机启动

    通过初始化脚本启动Redis 在Redis源代码目录的utils文件夹中有一个名为redis_init_script的初始化脚本文件.需要配置Redis的运行方式和持久化文件.日志文件的存储位置.步骤 ...

  2. IIS服务器添加网站

    1.添加IIS服务:对“我的电脑”右键,管理,点击服务和应用程序,如果下面没有”Internet Information Services(IIS)管理器“,打开控制面板,点击程序,启用或者关闭Win ...

  3. PostMan工具使用之基础篇

    PostMan工具使用之基础篇 一.什么是PostMan Postman一款非常流行的API调试工具.(其他测试工具 Jmeter.soapUI) 二.下载及安装: 1.下载: 下载地址:https: ...

  4. Code Chef January Challenge 2019题解

    传送门 \(div2\)那几道题不来做了太水了-- \(DPAIRS\) 一个显然合法的方案:\(A\)最小的和\(B\)所有连,\(A\)剩下的和\(B\)最大的连 算了咕上瘾了,咕咕咕 const ...

  5. ionic 项目 随笔

    1,首先 会进入src/index.html, <!-- The polyfills js is generated during the build process --> <sc ...

  6. django入门-静态文件-part6

    尊重作者的劳动,转载请注明作者及原文地址 http://www.cnblogs.com/txwsqk/p/6517553.html 完全翻译自官方文档 https://docs.djangoproje ...

  7. django实战-留言板

    对应github链接:https://github.com/pshyms/django/tree/master/liuyanban 第一天 1. 创建一个新项目后,新建一个应用程序 python ma ...

  8. Xcode 编译更改 Build 输出路径

    Xcode新建一个工程,build之后,可执行文件一般在 ~/Library/Developer/Xcode/DerivedData 下. 可以把这个路径指定为当前工程目录.  指定方法 Xcode ...

  9. day 12 课后作业

    # -*- coding: utf-8 -*-# @Time : 2019/1/4 20:49# @Author : Endless-cloud# @Site : # @File : day 12 课 ...

  10. HDU - 3085 Nightmare Ⅱ

    HDU - 3085 Nightmare Ⅱ 双向BFS,建立两个队列,让男孩女孩一起走 鬼的位置用曼哈顿距离判断一下,如果该位置与鬼的曼哈顿距离小于等于当前轮数的两倍,则已经被鬼覆盖 #includ ...