HTML5 Study Note: HTML5 is based on the local store SQLite daily work task List program. [Chrome only supported]

Usage Environment: Chrome 36.0...+

Technology: HTML5

Objective: to practise HTML5

Feature Overview: Records management daily work content, Sticky notes list

HTML5+CSS3 renders Ui,javascript operations database, SQLite stores data

Preview:

Key code:

1             //Save Data2             functiondatastorage (o) {3 4                  for(vari = 0; i < o.childnodes.length; i++) {5                     if(O.childnodes[i].nodename = = "P") {6 O.removechild (O.childnodes[i]);7                     }8                 }9 Ten                 if(O.innertext.replace (/\s+/g, ""). Length = = 0) { One                     return; A                 } -  -                 varTask =NewObject (); theTask.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; ATask.day =nowdate.getdate (); at  -                     //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 in                         function(TX, RS) { - Querydata (o.parentelement.id); toConsole.log ("Save Data successfully!"); +                         }, -                         //fail:show error Log in console the                         function(TX, error) { *Console.log (Error.source + "::" +error.message); $                         });Panax Notoginseng                     }); -}Else { theDb.transaction (function(TX) { +                         //Update ATx.executesql (' UPDATE ' + TableName + ' SET task=? WHERE rowid=? ', [Task.task, O.id], the                         //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) { theConsole.log (Error.source + "::" +error.message); -                         });Wuyi                     }); the                 } -             } Wu  -             //Query Data About             functionQuerydata (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(vari = 0; i < rs.rows.length; i++) { ACreateNode (Rs.rows.item (i), parentid);//create node to show data +                         } the                     }); -                 }); $Createeditnode (ParentID);//Create new Edit node the             } the  the             //Change current date the             functionchangedate (CID, m) { -Nowdate =NewDate (document.getElementById (CID). InnerText); in                 if(M = = "+") { theNowdate.setdate (Nowdate.getdate () + 1); the}Else { AboutNowdate.setdate (Nowdate.getdate ()-1); the                 } thedocument.getElementById ("currentdate"). InnerText = Nowdate.getfullyear () + "." + (Nowdate.getmonth () + 1) + "." +nowdate.getdate (); theTableName = "Dolist" + nowdate.getfullyear () + (Nowdate.getmonth () + 1) +nowdate.getdate (); +Db.transaction (function(TX) { -                     //Create data Table theTx.executesql (' CREATE TABLE IF not EXISTS ' + TableName + ' (Task text,progress varchar, progressid integer,year intege R,month integer,day integer,enabled INTEGER) ', []);Bayi                 }); theQuerydata ("Divcontent"); the             } -  -  the             functionload () { the                 if(Navigator.appcodename! = "Mozilla") { the                      the}Else { -                     /*----Start Program---*/ the                     //CREATE DATABASE theNowdate =NewDate (); theProgressenum = ["Executing", "reform", "Pending", "Finished", "Cancel"];94TableName = "Dolist" + nowdate.getfullyear () + (Nowdate.getmonth () + 1) +nowdate.getdate (); thedocument.getElementById ("currentdate"). InnerText = Nowdate.getfullyear () + "." + (Nowdate.getmonth () + 1) + "." +nowdate.getdate (); theDB = OpenDatabase ("ToDoList", "', ' to Do List DataBase ', 102400); theDb.transaction (function(TX) {98                         //Create data Table AboutTx.executesql (' CREATE TABLE IF not EXISTS ' + TableName + ' (Task text,progress varchar, progressid integer,year intege R,month integer,day integer,enabled INTEGER) ', []); -                     });101Querydata ("Divcontent");102                 }103}

HTML5 Study Note: HTML5 is based on the local store SQLite daily work task List program. [Chrome only supported]