HTML5操作WebSQL数据库的实例代码


Posted in HTML / CSS onAugust 26, 2017

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()">
        <div data-role="page" id="pageone">
            <div data-role="header" data-position="fixed">
                <h1>列车时刻表查询</h1>
            </div>
            <div 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>
            </div>
            <!--
                作者:ceet@vip.qq.com
                时间:2017-08-26
                描述:底部TAB
            -->
            <div data-role="footer" data-position="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="popup" data-icon="star">收藏</a>
                        </li>
                        <li>
                            <a href="test.html" data-icon="comment">给我留言</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">Close</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", "", "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。前者更难一些。

总结

以上所述是小编给大家介绍的HTML5操作WebSQL数据库的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 #HTML / CSS
HTML5中的拖放实现详解
Aug 23 #HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 #HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 #HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 #HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 #HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 #HTML / CSS
You might like
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
JS实现简易日历效果
2021/01/25 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python3计算三角形的面积代码
2017/12/18 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
python如何运行js语句
2020/09/09 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
大学生创业策划书
2014/02/02 职场文书
小学生元旦感言
2014/02/26 职场文书
大学学风建设方案
2014/05/04 职场文书
社区护士演讲稿
2014/08/27 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
导游词之凤凰古城
2019/10/22 职场文书