<! Doctype html> <html> <head lang = en> <meta charset = utf-8> <title> 列车时刻表查询 </title> <meta name = Viewport Content = width = largura do dispositivo, escala inicial = 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> </ad Head> <script src = js/connect.js> </sCript> <corpo onload = init ()> <div dados-role = Page id = PageOne> <div dados-role = cabeçalho Dados-posicionamento = Corrigido> <H1> 列车时刻表查询 </h1> </div> <div data-role = main class = ui-content> <p align = Center> 请给我留言 </p> <tabela data-role = Tabela Class = Ui-responsiva> <Thead> <tr> <th> 姓名: </th> <th> 留言: </th> </tr> </sead> <tbody> <tr> <td> <entrada TIPO = ID do texto = nome> </td> <td> <tipo de entrada = ID do texto = memorando> </td> </tr> </tbody> </table> <botão tipo = submeter onclick = savedata ()>留言 </button> <tabela data-role = tabela de dados = class = ui-responsiva id = datatable> <!-这里是留言板的显示区域-> </ table> </div> <!- -作者: [email protected] 时间: 2017-08-26 描述 ： 底部 TAB-> <Div Data-Role = Posição de dados do rodapé = fixado> <div dados-role = Navbar> <ul> <Li > <a href = index.html#índice data-icon = grade class = ui-btn-active> 查询 </a> </li> <li> <a href = index.html#detalhe dados-rell = dados pop-up -icon = star> 收藏 </a> </li> <li> <a href = test.html data-icon = comentário> 给我留言 </a> </li> </ul> </div> < /div> <!-收藏功能-> <div data-role = pop-up ID = mypopup class = ui-content dados-theMe = 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> feche </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 ,, meu banco de dados, 1024 * 100); // 初始化函数方法 function init () {datatable = document.getElementById (datatable); Showalldata ();} // 首先移除乱七八糟的东西 função removealldata () {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 中的数据 função showData (linha) {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 (line.Time); td3.innerhtml = t.tolocaledateSTRING () + + t.tolocaletimestring (); tr.appendChild (TD1); tr.appendChild (TD2); tr.appendChild (TD3); datatable.appendChild (tr);} // 显示所有的数据 função showAllData () {db.transaction (function (tx) {tx.executesql (Criar tabela se não existe msgdata (texto de nome, texto da mensagem, tempo inteiro), [[ ]); Item (i))}})})} // 添加数据 função addData (nome, mensagem, tempo) {db.transaction (function (tx) {tx.executesql (inserir em msgdata valores (?,?,?), [Nome, mensagem, tempo], função (tx, rs) {alert (留言成功！); // 调用 função savedata () {var name = document.getElementById (nome) .Value; var memorando = document.getElementById (memorando) .Value; var time = new Date (). getTime (); addData (nome, memorando, tempo); showalldata ();}我们有两个方法来进行软件设计 ： 一个是让其足够的简单以至于让 Bug 无法藏身；另一个就是让其足够的复杂 ， 让人找不到 Bug 。前者更难一些。
总结以上所述是小编给大家介绍的 html5 操作 webSQL 数据库的实例代码 ， ， ， ， ， 小编会及时回复大家的。在此也非常感谢大家对Vevb 武林网网站的支持！