HTML5學習筆記：HTML5基於本機存放區SQLite的每日工作任務清單程式.[只支援chrome]

標籤：des   style   blog   http   color   java   使用   io   for   

使用環境：Chrome 36.0...+

技術：HTML5

目的：習練HTML5

功能概述：記錄管理每天工作內容，便簽清單

                     HTML5+CSS3呈現UI，JavaScript操作資料庫，SQLite儲存資料

預覽：

 

關鍵代碼：

  1             // save data  2             function dataStorage(o) {  3   4                 for (var i = 0; i < o.childNodes.length; i++) {  5                     if (o.childNodes[i].nodeName == "P") {  6                         o.removeChild(o.childNodes[i]);  7                     }  8                 }  9  10                 if (o.innerText.replace(/\s+/g, "").length == 0) { 11                     return; 12                 } 13  14                 var task = new Object(); 15                 task.task = o.innerText; 16                 task.progressid = 2; 17                 task.progress = ProgressEnum[task.progressid]; 18                 if (o.id == "newEditNode") { 19                     o.removeAttribute("id"); 20                     task.year = nowDate.getFullYear(); 21                     task.month = nowDate.getMonth() + 1; 22                     task.day = nowDate.getDate(); 23  24                     // open a database transaction 25                     DB.transaction(function(tx) { 26                         // insert into table(task,progress,year,month,day) 27                         tx.executeSql(‘INSERT INTO ‘ + TableName + ‘ VALUES(?,?,?,?,?,?,0)‘, [task.task, task.progress, task.progressid, task.year, task.month, task.day], 28                         // success:show success log in console 29                         function(tx, rs) { 30                             queryData(o.parentElement.id); 31                             console.log("save data successfully!"); 32                         }, 33                         // fail:show error log in console 34                         function(tx, error) { 35                             console.log(error.source + "::" + error.message); 36                         }); 37                     }); 38                 } else { 39                     DB.transaction(function(tx) { 40                         // update 41                         tx.executeSql(‘UPDATE ‘ + TableName + ‘ SET task=? WHERE rowid=?‘, [task.task, o.id], 42                         // success:show success log in console 43                         function(tx, rs) { 44                             queryData(o.parentElement.id); 45                             console.log("update data successfully!"); 46                         }, 47                         // fail:show error log in console 48                         function(tx, error) { 49                             console.log(error.source + "::" + error.message); 50                         }); 51                     }); 52                 } 53             } 54  55             // query data 56             function queryData(parentId) { 57                 document.getElementById(parentId).innerHTML = ""; 58                 DB.transaction(function(tx) { 59                     tx.executeSql(‘SELECT rowid,* FROM ‘ + TableName + ‘ WHERE enabled=0 ORDER BY progressid ASC, rowid DESC‘, [], function(tx, rs) { 60                         for (var i = 0; i < rs.rows.length; i++) { 61                             createNode(rs.rows.item(i), parentId);  //create node to show data 62                         } 63                     }); 64                 }); 65                 createEditNode(parentId); // create new edit node 66             } 67  68             //change current date 69             function changeDate(cid, m) { 70                 nowDate = new Date(document.getElementById(cid).innerText); 71                 if (m == "+") { 72                     nowDate.setDate(nowDate.getDate() + 1); 73                 } else { 74                     nowDate.setDate(nowDate.getDate() - 1); 75                 } 76                 document.getElementById("currentDate").innerText = nowDate.getFullYear() + "." + (nowDate.getMonth() + 1) + "." + nowDate.getDate(); 77                 TableName = "doList" + nowDate.getFullYear() + (nowDate.getMonth() + 1) + nowDate.getDate(); 78                 DB.transaction(function(tx) { 79                     //create data table 80                     tx.executeSql(‘CREATE TABLE IF NOT EXISTS ‘ + TableName + ‘(task TEXT,progress varchar(300),progressid INTEGER,year INTEGER,month INTEGER,day INTEGER,enabled INTEGER)‘, []); 81                 }); 82                 queryData("divcontent"); 83             } 84  85  86             function load() { 87                 if (navigator.appCodeName != "Mozilla") { 88                      89                 } else { 90                     /* ---- start program --- */ 91                     // create database 92                     nowDate = new Date(); 93                     ProgressEnum = ["Executing", "Reform", "Pending", "Finished", "Cancel"]; 94                     TableName = "doList" + nowDate.getFullYear() + (nowDate.getMonth() + 1) + nowDate.getDate(); 95                     document.getElementById("currentDate").innerText = nowDate.getFullYear() + "." + (nowDate.getMonth() + 1) + "." + nowDate.getDate(); 96                     DB = openDatabase("toDoList", ‘‘, ‘To Do list DataBase‘, 102400); 97                     DB.transaction(function(tx) { 98                         //create data table 99                         tx.executeSql(‘CREATE TABLE IF NOT EXISTS ‘ + TableName + ‘(task TEXT,progress varchar(300),progressid INTEGER,year INTEGER,month INTEGER,day INTEGER,enabled INTEGER)‘, []);100                     });101                     queryData("divcontent");102                 }103             }

 

HTML5學習筆記：HTML5基於本機存放區SQLite的每日工作任務清單程式.[只支援chrome]