<! doctype html> <html> <head lang = en> <meta charset = utf-8> <title> 列车时刻表查询 </title> <ชื่อ meta = viewport content = width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 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> <// สคริปต์> </head> <สคริปต์ src = js/connect.js> </script> <body onload = init ()> <div-data-Role = page id = pageOne> <div-data-Role = data Data Hoper = ส่วนหัว = แก้ไข> <h1> 列车时刻表查询 </h1> </div> <div data-Role = main class = ui-content> <p allign = center> 请给我留言 </p> <table data-Role = table class = ui-responsive> <thead> <tr> <th> 姓名： </th> <th> 留言： </th> </tr> </thead> <tbody> <tr> <td> <อินพุต type = text id = name> </td> <td> <input type = text id = memo> </td> </tr> </tbody> </table>留言 </button> <ตารางข้อมูล Role = ตารางข้อมูลโมดูล = class = ui-responsive id = dataTable> <!-这里是留言板的显示区域-> </table> </div> <!-! -作者： [email protected] 时间： 2017-08-26 描述： 底部底部 tab-> <div data-Role = ตำแหน่งข้อมูลส่วนท้าย = แก้ไข> <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 = ข้อมูลป๊อปอัพ -icon = star> 收藏 </a> </li> <li> <a href = test.html data-icon = ความคิดเห็น> 给我留言 </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-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right> ปิด </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, ฐานข้อมูลของฉัน, 1024 * 100); // 初始化函数方法 function init () {dataTable = document.getElementById (dataTable); showallData ();} // 首先移除乱七八糟的东西ฟังก์ชั่น removeAllData () {สำหรับ (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 中的数据ฟังก์ชั่น showdata (แถว) {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 = วันที่ใหม่ (); T.Settime (row.time); td3.innerhtml = t.tolocaledatestring () + + t.tolocaletimestring (); Tr.AppendChild (TD1); Tr.AppendChild (TD2); Tr.AppendChild (TD3); dataTable.AppendChild (tr);} // 显示所有的数据ฟังก์ชั่น showallData () {db.transaction (ฟังก์ชั่น (tx) {tx.executesql (สร้างตารางหากไม่มี msgdata (ชื่อข้อความข้อความ ]; รายการ (i))}})})} // 添加数据ฟังก์ชัน addData (ชื่อ, ข้อความ, เวลา) {db.Transaction (ฟังก์ชั่น (tx) {tx.executesql (แทรกลงในค่า msgdata (? [ชื่อ, ข้อความ, เวลา], ฟังก์ชั่น (tx, rs) {แจ้งเตือน (留言成功！); // 调用ฟังก์ชั่น savedata () {var name = document.getElementById (ชื่อ) .Value; var memo = document.getElementById (memo) .Value; var time = new Date (). getTime (); adddata (ชื่อ, บันทึกเวลา); showalldata ();}我们有两个方法来进行软件设计： 一个是让其足够的简单以至于让บั๊ก 无法藏身；另一个就是让其足够的复杂， 让人找不到บั๊ก。前者更难一些。
总结以上所述是小编给大家介绍的 html5 操作 websql 数据库的实例代码， 希望对大家有所帮助， 如果大家有任何疑问请给我留言， 小编会及时回复大家的。在此也非常感谢大家对小编会及时回复大家的。在此也非常感谢大家对vevb 武林网网站的支持！