Comment exploiter une base de données WebSQL avec HTML5-tutoriel HTML-php.cn

Comment exploiter une base de données WebSQL avec HTML5

不言

Libérer： 2018-06-09 17:19:52

original

2423 Les gens l'ont consulté

L'article suivant partagera avec vous l'exemple de code d'une base de données WebSQL d'exploitation HTML5. Les amis intéressés peuvent y jeter un œil

Code HTML :

<!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>

Copier après la connexion

Code JS :

/**
 * 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();
}

Copier après la connexion

Nous avons deux façons pour le faire Lors de la conception d'un logiciel : l'une consiste à le rendre suffisamment simple pour que les bogues ne puissent pas se cacher ; l'autre est de le rendre suffisamment complexe pour que personne ne puisse trouver de bogues. Le premier est plus difficile.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment créer des effets de menu de masque contextuel de téléphone mobile HTML5

Implémentations HTML5 à l'aide de boutons pour contrôler la musique de fond Méthode de changement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!