<! DocType html> <html> <head lang = en> <meta charset = utf-8> <title> 列车时刻表查询 </title> <meta name = viewport content = width = dispositivo-width, inicial-escala = 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/conecte.js> </script> <body onload = init ()> <div data-role = página id = pageOne> <div data-data-role = Header data-pose = FIJADO> <H1> 列车时刻表查询 </H1> </div> <div data-role = main class = ui-content> <p align = center> 请给我留言 </p> <table data-role = TABLE CLASS = UI-Responsive> <thead> <tr> <th> 姓名 ： </th> <th> 留言 ： </th> <tr> </thead> <tbody> <tr> <td> <input type = text id = name> </td> <td> <input type = text id = memo> </td> </tr> </tbody> </table> <button type = enviar onClick = saveData ()>留言 </boton> <table data-role = table data-mode = class = ui-fresponsive id = dataTable> <!-这里是留言板的显示区域-> </table> </div> <!-!- -： ： [email protected] 时间 ： 2017-08-26 描述 ： 底部 底部 pestaña-> <div data-role = pie de página data-posicion = fijo> <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#detalle data-rel = popup data -icon = Star> 收藏 </a> </li> <li> <a href = test.html data-icon = comentario> 给我留言 </a> </li> </ul> </div> < /div> <!-收藏功能-> <div data-role = popup id = mypopup class = ui-content data-theme = b> <a href =# data-rel = back class = ui-btn ui- btn-a ui-corner-todo ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right> cerrar </a> <p> 收藏成功 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 暂且不做处理 electrónico! /p> <p> 请点击右上角有个关闭按钮 </p> <p> <b> 提示 ： </b> 你也可以点击弹窗的外部区域来关闭弹窗。 </p> </ div> </div> </body> </html>JS ： ：
/** * HTML5 操作本地 WebSQL 数据库 * 作者 ： 汪政 * 时间 ： 2017/08/26 15 8 8：19 */var dataTable = null; var db = OpenDatabase (myData, mi base de datos, 1024 * 100); // 初始化函数方法 Función init () {dataTable = document.getElementById (dataTable); showAllData ();} // 首先移除乱七八糟的东西 función removealData () {for (var i = dataTable.childNodes.length-1; i> = 0; 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 = 时间; tr.appendchild (Th1); tr.appendchild (Th2); tr.appendchild (Th3); dataTable.appendChild (tr);} // 显示 WebSQL 中的数据 Función showData (fila) {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 = nueva fecha (); T.SetTime (Row.Time); td3.innerhtml = t.tolocaledateTring () + + t.tolocaletiMeTring (); tr.appendChild (TD1); Tr.AppendChild (TD2); Tr.AppendChild (TD3); datTable.appendChild (tr);} // 显示所有的数据 función showAllData () {db.transaction (function (tx) {tx.executesql (cree tabla si no existe msgdata (nombre de texto, texto de mensaje, entero de tiempo), [ ]); Elemento (i))}})})} // 添加数据 Función AddData (nombre, mensaje, tiempo) {db.transaction (function (tx) {tx.executesql (inserte en valores de msgdata (?,?,?), [Nombre, mensaje, tiempo], función (tx, rs) {alerta (留言成功！); // 调用 función saveData () {var name = document.getElementById (nombre) .Value; var memo = document.getElementById (memo) .value; var tiempo = nueva fecha (). getTime (); addData (nombre, memo, tiempo); showallData ();}我们有两个方法来进行软件设计 ： 一个是让其足够的简单以至于让 Error 无法藏身；另一个就是让其足够的复杂 ， 让人找不到 Error 。前者更难一些。
总结以上所述是小编给大家介绍的 HTML5 操作 WebSQL 数据库的实例代码 ， 希望对大家有所帮助 如果大家有任何疑问请给我留言 ， 小编会及时回复大家的。在此也非常感谢大家对VEVB 武林网网站的支持！