<! Doctype html> <html> <head lang = en> <meta charset = utf-8> <iteme> 列车时刻表查询 </iteme> <meta name = viewport content = width = perangkat lebar, skala awal = 1> <link rel = stylesheet href = http: //code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css/> <skrip src = http: //code.jquery. com/jQuery-1.11.1.min.js> </script> <skrip src = http: //code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js> </s. Script> </head> <skrip src = js/connect.js> </script> <body onload = init ()> <div data-role = page id = pageone> <div data-role = header-position data = Fixed> <h1> 列车时刻表查询 </h1> </div> <div data-role = kelas utama = ui-content> <p align = center> 请给我留言 </p> <tabel data-role = Tabel kelas = UI-responsive> <Thead> <tr> <th> 姓名 ： </tm type = Text ID = Name> </td> <td> <input type = Text ID = Memo> </td> </tr> </tbody> </able> <typute type = kirim ontClick = saveData ()>留言 </button> <tabel data-role = tabel data-mode = class = UI-responsive id = DataTable> <!-这里是留言板的显示区域-> </able> </div> <!- -作者 ： [email protected] 时间 ： 2017-08-26 描述 ： 底部 tab-> <Div Data-Role = Footer Data-Posisi = Fixed> <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#detail data-rel = data popup -iCon = star> 收藏 </a> </li> <li> <a href = test.html data-icon = komentar> 给我留言 </a> </li> </ul> </div> < /Div> <!-收藏功能-> <Div Data-Role = ID Popup = MyPopup Class = UI-Content Data-tema = B> <a href =# data-rel = Kelas belakang = UI-BTN UI- btn-a ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right> tutup </a> <p> 收藏成功 ， ，! /p> <p> 请点击右上角有个关闭按钮 </p> <p> <b> 提示 ： </b> 你也可以点击弹窗的外部区域来关闭弹窗。 </p> </ Div> </div> </body> </html>JS ：
/** * html5 操作本地 Websql 数据库 * 作者 ： 汪政 * 时间 ： 2017/08/26 15:03 ostinge */var DataTable = null; var db = openDatabase (mydata ,, database saya, 1024 * 100); // 初始化函数方法 function init () {datatable = document.geteLementById (datatable); showallData ();} // 首先移除乱七八糟的东西 function removeAlldata () {for (var i = datatable.childnodes.length-1; i> = 0; i--) {datatable.removechild (dataatable.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 中的数据 Function showData (baris) {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 = tanggal baru (); t.settime (row.time); td3.innerHtml = t.tolocaledateString () + + t.tolocaletimestring (); Tr.AppendChild (TD1); Tr.AppendChild (TD2); Tr.AppendChild (TD3); datatable.appendChild (tr);} // 显示所有的数据 function showallData () {db.transaction (function (tx) {tx.executesql (buat tabel jika tidak ada msgdata (nama teks, teks pesan, integer waktu), [ ]); item (i))}})})} // 添加数据 addata fungsi (nama, pesan, waktu) {db.transaction (fungsi (tx) {tx.executesql (masukkan ke dalam nilai msgdata (?,?), [Nama, waktu], fungsi (tx, rs) {alert (留言成功！); // 调用 fungsi savedata () {var name = document.geteLementById (name) .value; var memo = document.geteLementById (memo) .value; var time = new date (). getTime (); addData (nama, memo, waktu); showalldata ();}我们有两个方法来进行软件设计 ： 一个是让其足够的简单以至于让 bug 无法藏身；另一个就是让其足够的复杂 ， 让人找不到 bug 。前者更难一些。
总结以上所述是小编给大家介绍的 html5 操作 Websql 数据库的实例代码 ， 希望对大家有所帮助 ， 如果大家有任何疑问请给我留言 ， 小编会及时回复大家的。在此也非常感谢大家对VEVB 武林网网站的支持！