HTML5学习笔记：HTML5基于本地存储SQLite的每日工作任务清单程序.[只支持chrome]
2024-09-21 11:47:44
使用环境：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
最新文章
- 微信小程序
- 面积（area）
- eclipse工程加入jquery.min.js报错：missing semicolon
- IIS SMTP status codes
- 使用Windows Azure创建Linux系统虚拟机-下
- java提高篇(十)-----详解匿名内部类 ,形参为什么要用final
- css 权威指南笔记（四）选择器
- mssql 判断sql语句的执行效率语句
- Ext.net.DirectMethods
- 使用apache daemon让java程序在unix系统上以服务方式运行
- 输入和输出--javase中的路径
- bzoj 1814 Ural 1519 Formula 1 插头DP
- 深入理解CoordinatorLayout.Behavior
- 加载静态界面----，要不要会加载cookie和页面参数
- mybatis查询修改同时操作
- .NET Core 2.0应用程序大小减少50％
- Android强制关闭某个指定应用 “关闭应用”
- 括弧匹配检验(check.cpp)
- Eclipse中GitLab的配置和使用入门
- Discuz常见小问题-如何关闭验证码