HTML代碼：

 !DOCTYPE html  html  head lang= en  meta charset= UTF-8  title 列車時(shí)刻表查詢 /title  meta name= viewport content= width=device-width,initial-scale=1  link rel= stylesheet href= http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css /  script src= http://code.jquery.com/jquery-1.11.1.min.js /script  script src= http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js /script  /head  script src= js/connect.js /script  body onload= init()  p data-role= page id= pageone  p data-role= header data-position= fixed  h1 列車時(shí)刻表查詢 /h1  p data-role= main >
JS代碼：
 
/** * HTML5 操作本地WebSQL數(shù)據(jù)庫 * 作者：汪政 * 時(shí)間：2017/08/26 15：03：19var datatable = null;var db = openDatabase( MyData , , My Database , 1024 * 100);//初始化函數(shù)方法function init() { datatable = document.getElementById( datatable  showAllData();//首先移除亂七八糟的東西function removeAllData() { for(var i = datatable.childNodes.length - 1; i i--) { datatable.removeChild(datatable.childNodes[i]); var tr = document.createElement( tr  var th1 = document.createElement( th  var th2 = document.createElement( th  var th3 = document.createElement( th  th1.innerHTML = 姓名  th2.innerHTML = 留言  th3.innerHTML = 時(shí)間  tr.appendChild(th1); tr.appendChild(th2); tr.appendChild(th3); datatable.appendChild(tr);//顯示W(wǎng)ebSQL中的數(shù)據(jù)function showData(row) { var tr = document.createElement( tr  var td1 = document.createElement( td  td1.innerHTML = row.name; var td2 = document.createElement( td  td2.innerHTML = row.message; var td3 = document.createElement( td  var t = new Date(); t.setTime(row.time); td3.innerHTML = t.toLocaleDateString() + + t.toLocaleTimeString(); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); datatable.appendChild(tr);//顯示所有的數(shù)據(jù)function showAllData() { db.transaction(function(tx) { tx.executeSql( CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER) , []); tx.executeSql( SELECT * FROM MsgData , [], function(tx, rs) { removeAllData(); for(var i = 0; i rs.rows.length; i++) { showData(rs.rows.item(i))//添加數(shù)據(jù)function addData(name, message, time) { db.transaction(function(tx) { tx.executeSql( INSERT INTO MsgData VALUES (?,?,?) , [name, message, time], function(tx, rs) { alert( 留言成功！  function(tx, error) { alert(error.source + :: + error.message);function saveData() { var name = document.getElementById( name ).value; var memo = document.getElementById( memo ).value; var time = new Date().getTime(); addData(name, memo, time); showAllData();}
我們有兩個(gè)方法來進(jìn)行軟件設(shè)計(jì)：一個(gè)是讓其足夠的簡(jiǎn)單以至于讓BUG無法藏身；另一個(gè)就是讓其足夠的復(fù)雜，讓人找不到BUG。前者更難一些。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP ！
相關(guān)推薦：
如何讓HTML5手機(jī)端彈出遮罩菜單特效
HTML5實(shí)現(xiàn)使用按鈕控制背景音樂開關(guān)的方法
以上就是如何用HTML5操作WebSQL數(shù)據(jù)庫的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。