百搜论坛欢迎您的加入!
adimg adimg
 
昨日:篇  今日:篇   总帖:篇   会员:
博主最大Lv63   
如何用HTML5操作WebSQL数据库     
下面通过本文给大家分享HTML5操作WebSQL数据库的实例代码,感兴趣的朋友一起看看吧

HTML代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

<!DOCTYPE html>

<html>

    <head lang="en">

        <meta charset="UTF-8">

        <title>列车时刻表查询</title>

        <meta name="viewport" content="width=device-width,initial-scale=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()">

        <p data-role="page" id="pageone">

            <p data-role="header" data-position="fixed">

                <h1>列车时刻表查询</h1>

            </p>

            <p 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="submit" onclick="saveData()">留言</button>

                <table data-role="table" data-mode="" class="ui-responsive" id="datatable">

                    <!--这里是留言板的显示区域-->

                </table>

            </p>

            <!--

                作者:ceet@vip.qq.com

                时间:2017-08-26

                描述:底部TAB

            -->

            <p data-role="footer" data-position="fixed">

                <p 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="popup" data-icon="star">收藏</a>

                        </li>

                        <li>

                            <a href="test.html" data-icon="comment">给我留言</a>

                        </li>

                    </ul>

                </p>

            </p>

            <!--收藏功能-->

            <p 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">Close</a>

              <p>收藏成功,暂且不做处理!.</p>

              <p>请点击右上角有个关闭按钮</p>

              <p><b>提示:</b> 你也可以点击弹窗的外部区域来关闭弹窗。</p>

            </p>

        </p>

    </body>

</html>

JS代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

/**

 * HTML5 操作本地WebSQL数据库

 * 作者:汪政

 * 时间:2017/08/26 15:03:19

 */

var datatable = null;

var db = openDatabase("MyData", "", "My Database", 1024 * 100);

//初始化函数方法

function init() {

    datatable = document.getElementById("datatable");

    showAllData();

}

//首先移除乱七八糟的东西

function 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中的数据

function showData(row) {

    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(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("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)", []);

        tx.executeSql("SELECT * FROM MsgData", [], function(tx, rs) {

            removeAllData();

            for(var i = 0; i < rs.rows.length; i++) {

                showData(rs.rows.item(i))

            }

        })

    })

}

//添加数据

function addData(name, message, time) {

    db.transaction(function(tx) {

        tx.executeSql("INSERT INTO MsgData VALUES (?,?,?)", [name, message, time], function(tx, rs) {

                alert("留言成功!");

            },

            function(tx, error) {

                alert(error.source + "::" + error.message);

            }

    )

    })

}

//调用

function saveData() {

    var name = document.getElementById("name").value;

    var memo = document.getElementById("memo").value;

    var time = new Date().getTime();

    addData(name, memo, time);

    showAllData();

}

我们有两个方法来进行软件设计:一个是让其足够的简单以至于让BUG无法藏身;另一个就是让其足够的复杂,让人找不到BUG。前者更难一些。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

如何让HTML5手机端弹出遮罩菜单特效

HTML5实现使用按钮控制背景音乐开关的方法

以上就是如何用HTML5操作WebSQL数据库的详细内容

 0  已被阅读了995次  楼主 2020-06-22 19:22:15
回复列表

回复:如何用HTML5操作WebSQL数据库

联系站长 友链申请桂ICP备19000949号-1     桂ICP备19000949号-1
您的IP:3.147.81.214,2024-05-16 12:54:17,Processed in 0.0427 second(s).
免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。
Powered by HadSky 7.12.9
已有0次打赏
(0) 分享
分享
取消
免责声明
1、本站资源,均来自网络,版权归原作者,所有资源和文章仅限用于学习和研究目的 。
2、不得用于商业或非法用途,否则,一切责任由该用户承担 !
如果觉得本文还不错请点个赞或者打赏点轻币哦~
拒绝伸手党,拿走请回复,尊重楼主,尊重你我他~

侵权删除请致信 E-Mail:207882320@qq.com