<! Doctype html> <html> <head Lang = en> <meta charset = utf-8> <ititle> 列车时刻表查询 </ title> <meta name = viceport contenu = width = device-width, initial-échelle = 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 ()> <div data-role = page id = pageOne> <div data-role = henter data position = fixe> <h1> 列车时刻表查询 </h1> </div> <div data-role = main class = ui-conont> <p align = Center> 请给我留言 </p> <table data-role = Classe de table = UI-Responsive> <Thead> <Tr> <Th> 姓名 ： </th> <th> 留言 ： </th> </tr> </thead> <tbody> <tr> <td> <entrée type = text id = name> </ td> <td> <input type = text id = mémo> </td> </tr> </tbody> </ table> <bouton type = soumettre onclick = savedata ()>留言 </futton> <table data-role = table data-mode = class = ui-responsive id = dataTable> <! - 这里是留言板的显示区域 -> </ table> </div> <! - - 作者 ： [email protected] 时间 ： 2017-08-26 描述 ： 底部 onglet -> <div data-role = footter data position = fixe> <div data-role = navbar> <ul> <li > <a href = index.html # index data-icon = grid class = ui-btn-active> 查询 </a> </li> <li> <a href = index.html # data-rel = popup data -Icon = star> 收藏 </a> </li> <li> <a href = test.html data-icon = comment> 给我留言 </a> </li> </ul> </div> < / div> <! - 收藏功能 -> <div data-role = popup id = mypopup class = ui-content data-thème = b> <a href = # data-rel = back class = ui-btn ui- btn-a ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right> close </a> <p> 收藏成功 ， 暂且不做处理 !. < / p> <p> 请点击右上角有个关闭按钮 </p> <p> <b> 提示: </b> 你也可以点击弹窗的外部区域来关闭弹窗。 </p> </ div> </div> </ body> </html>JS 代码 ：
/ ** * html5 操作本地 WebSQL 数据库 * 作者 ： 汪政 * 时间 ： 2017/08/26 15::03::19 * / var dataTable = null; var db = openDatabase (myData ,, ma base de données, 1024 * 100); // 初始化函数方法 function init () {dataTable = document.getElementyId (dataTable); showallData ();} // 首先移除乱七八糟的东西 fonction removealldata () {for (var i = dataTable.childnodes.length - 1; i> = 0; i--) {dataTable.removechild (dataTable.childnodes [i 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 = 时间; Tr.ApendChild (Th1); Tr.ApendChild (Th2); Tr.ApendChild (Th3); dataTable.ApendChild (tr);} // 显示 WebSQL 中的数据 fonction showData (row) {var tr = document.CreateElement (tr); var td1 = document.CreateElement (TD); td1.innerhtml = row.name; var td2 = document.CreateElement (TD); td2.innerhtml = row.mesage; var td3 = document.CreateElement (TD); var t = new Date (); t.settime (row.time); td3.innerhtml = t.tolocaledatestring () + + t.tolocaletimestring (); Tr.ApendChild (TD1); Tr.ApendChild (TD2); Tr.ApendChild (TD3); dataTable.ApendChild (tr);} // 显示所有的数据 fonction showAllData () {db.transaction (function (tx) {tx.exectuesql (créer une table s'il n'existe pas msgdata (texte de nom, texte de message, time enger), [ ]); item (i))}})})} // 添加数据 fonction addData (name, message, time) {db.transaction (function (tx) {tx.exectuesql (insérer dans les valeurs msgdata (? ,?), [nom, message, temps], fonction (tx, rs) {alert (留言成功！);}, fonction (tx, error) {alert (error.source + :: + error.Message); // 调用 Fonction SaveData () {var name = document.getElementById (name) .Value; var memo = document.getElementById (Memo) .Value; var time = new Date (). getTime (); addData (nom, mémo, heure); showalldata ();}我们有两个方法来进行软件设计: 一个是让其足够的简单以至于让 Bogue 无法藏身；另一个就是让其足够的复杂 ， 让人找不到 Bogue 。前者更难一些。
总结以上所述是小编给大家介绍的 html5 操作 WebSQL 数据库的实例代码 ， 希望对大家有所帮助 ， 如果大家有任何疑问请给我留言 ， 小编会及时回复大家的。在此也非常感谢大家对Vevb 武林网网站的支持！