寡人写的第一个HTML5页面

好吧,其实是抄来的

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <title>HTML5本地存储之本地数据库篇</title>
    <style>
        .addDiv{
            border: 2px dashed #ccc;
            width:400px;
            text-align:center;
        }

        th {
            font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            border-top: 1px solid #C1DAD7;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: left;
            padding: 6px 6px 6px 12px;
        }
        td {
            border-right: 1px solid #C9DAD7;
            border-bottom: 1px solid #C9DAD7;
            background: #fff;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
        }
    </style>
</head>
<body onload="loadAll()">
    <div class="addDiv">
        <label for="user_name">姓名:</label>
        <input type="text" id="user_name" name="user_name" class="text"/>
        <br/>
        <label for="mobilephone">手机:</label>
        <input type="text" id="mobilephone" name="mobilephone"/>
        <br/>
        <label for="mobilephone">公司:</label>
        <input type="text" id="company" name="company"/>
        <br/>
        <input type="button" onclick="save()" value="新增记录"/>
    </div>
    <br/>
    <div id="list">
    </div>
</body>

<script language="javascript">
        //打开数据库
        var db = openDatabase(‘contactdb‘,‘‘,‘local database demo‘,204800);

        //保存数据
        function save(){
            var user_name = document.getElementById("user_name").value;
            var mobilephone = document.getElementById("mobilephone").value;
            var company = document.getElementById("company").value;
            //创建时间
            var time = new Date().getTime();
            db.transaction(function(tx){
                tx.executeSql(‘insert into contact values(?,?,?,?)‘,[user_name,mobilephone,company,time],onSuccess,onError);
            });
        }
         //sql语句执行成功后执行的回调函数
        function onSuccess(tx,rs){
            alert("操作成功");
            loadAll();
        }
        //sql语句执行失败后执行的回调函数
        function onError(tx,error){
            alert("操作失败,失败信息:"+ error.message);
        }

                //将所有存储在sqlLite数据库中的联系人全部取出来
        function loadAll(){
            var list = document.getElementById("list");
            db.transaction(function(tx){
                //如果数据表不存在,则创建数据表
                tx.executeSql(‘create table if not exists contact(name text,phone text,company text,createtime INTEGER)‘,[]);
                //查询所有联系人记录
                tx.executeSql(‘select * from contact‘,[],function(tx,rs){
                   if(rs.rows.length>0){
                        var result = "<table>";
                        result += "<tr><th>序号</th><th>姓名</th><th>手机</th><th>公司</th><th>添加时间</th><th>操作</th></tr>";
                        for(var i=0;i<rs.rows.length;i++){
                            var row = rs.rows.item(i);
                            //转换时间,并格式化输出
                            var time = new Date();
                            time.setTime(row.createtime);
                            var timeStr = time.format("yyyy-MM-dd hh:mm:ss");
                            //拼装一个表格的行节点
                            result += "<tr><td>"+(i+1)+"</td><td>"+row.name+"</td><td>"+row.phone+"</td><td>"+row.company+"</td><td>"+timeStr+"</td><td><input type=‘button‘ value=‘删除‘ onclick=‘del("+row.phone+")‘/></td></tr>";
                        }
                        list.innerHTML = result;
                   }else{
                        list.innerHTML = "目前数据为空,赶紧开始加入联系人吧";
                   }
                });
            });
        }

        Date.prototype.format = function(format)
        {
            var o = {
            "M+" : this.getMonth()+1, //month
            "d+" : this.getDate(),    //day
            "h+" : this.getHours(),   //hour
            "m+" : this.getMinutes(), //minute
            "s+" : this.getSeconds(), //second
            "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
            "S" : this.getMilliseconds() //millisecond
            }
            if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
            (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            for(var k in o)if(new RegExp("("+ k +")").test(format))
            format = format.replace(RegExp.$1,
            RegExp.$1.length==1 ? o[k] :
            ("00"+ o[k]).substr((""+ o[k]).length));
            return format;
        }

        //删除联系人信息
        function del(phone){
             db.transaction(function(tx){
                //注意这里需要显示的将传入的参数phone转变为字符串类型
                tx.executeSql(‘delete from contact where phone=?‘,[String(phone)],onSuccess,onError);
            });
        }
</script>
</html>

http://www.w3school.com.cn/html5/html_5_webstorage.asp

http://blog.csdn.net/hbcui1984/article/details/8471063

在windows7上,sqllite实际存储在下面的路径里,删除掉下面的文件就相当于清空了sql数据(SirBox是用户名)

C:\Users\SirBox\AppData\Local\Google\Chrome\User Data\Default\databases

http://my.oschina.net/u/590484/blog/70929

时间: 2024-10-16 07:31:11

寡人写的第一个HTML5页面的相关文章

写给“有钱大爷”、”美工殿下”、“前端文艺青年”的微信HTML5页面设计建议

我保证你一分钟就能看完这篇文章! 真的.. 角色解释: 需求方:有钱大爷 设计人员:美工殿下 前端工程师:前端文艺青年 一个HTML5页面从提出到完成上线的流程: 1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给予反馈 5.设计人员与H5人员根据反馈进行适当调整 6.发布推广 如何提出一个合理的微信HTML5页面设计诉求? 合理分析诉求与公司团队拥有的资源: 1.需求完成时间: 时间给的越多,项目做的

HTML5页面开发的基础性模板

分享一个HTML5页面开发的基础性模板,包含了两个版本: 开发版本 注释版本 开发版本 <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title></title> <meta name=&q

Web开发从零单排之一:在新浪云平台SAE上开发一个html5电子喜帖

需求描述: 本人大婚将至,女朋友说“现在都流行在微信上发电子请帖了,你不是技(cheng)术(xu)宅(yuan)嘛,不会连这个都搞不定吧” 本人嘴上说这等小事何足挂齿,但心里还是七上八下的,虽然自认为几年开发经验在工作上还算得心应手,但也因为工作项目局限,对Web开发特别是前端和建站技术接触不多 于是打开搜索引擎和女朋友一起看看现在市面上的服务,基本上都是给出一套模板,自己填上内容和照片后,生成电子请帖,而形式有网页也有单张图片的 收费也不贵,都在百元左右.但收费是小,面子是大啊,作为一个软件

如何判断一个APP页面是原生的还是H5页面

来源:http://www.25xt.com/appdesign/11851.html Hybrid APP指的是半原生半Web的混合类App.需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web . 原生是Native APP,H5就是Web App 在Hybrid 当中,如何快速的判断一个APP页面是原生的还是H5页面呢? 1.看断网的情况 把手机的网络断掉.然后点开页面.然后可以正常显示的东西就是原生写的. 显示404或则错误页面的是htm

只用table模仿一个静态页面

尝试只用table标签来模仿一个静态页面,这样做可以很好的增加对网页结构理解. 要尝试模仿的页面如下: 附上我自己写的代码,因为只是用了HTML,没有用到CSS和js,所以有些样式写出来和原图有些出入 <!DOCTYPE html> <html> <head> <title>只用table来模仿一个网页</title> <meta charset="utf-8"> </head> <body>

4个小时实现一个HTML5音乐播放器

技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐播放器就要非常了解在Web中音频播放的方式,通常都采用HTML5的audio标签关于audio标签,它有大量的属性.方法和事件,在这里我就做一个大致的介绍. 属性:src:必需,音频来源:controls:常见,设置后显示浏览器默认的audio控制面板,不设置默认隐藏audio标签:autoplay

python使用Django制作第一个web页面

第一步:打开pycharm,点击File>New File 选择Django,填写完点击Create创建如下图: 第二步:项目名和应用名都写的web,目录列表如下: 第三步:将web目录下面的view.py改成 from django.http import HttpResponse def hello(request): return HttpResponse("<h3>使用Django的第一个web页面</h3><hr>") 第四步:将ur

android创建一个细节页面,以及argument的应用

大家好..以前我也好奇过有没有一些设计模式可以用来创建一个细节页面,直到最近我看了一些设计模式相关的博文和书后,我终于发现了以下的应用. 下面我们介绍一个Listview 点击后出现一个detail 页面的功能,功能简单,但是我们看的是思想. 首先我们实现自定义的ListView,ListItem 里面有一个TextView,一个EditText,一个Checkbox,对应存放数据的是一个Crime的类.ListView里面有好多个ListItem,而对应的是CrimeList 类,为了方便创建

Android进入一个新页面,EditText失去焦点并禁止弹出键盘

android在进入一个新页面后,edittext会自动获取焦点并弹出软键盘,这样并不符合用户操作习惯. 在其父控件下,添加如下的属性,就可以完美解决,使其进入页面后不主动获取焦点,并且不弹出软键盘: android:focusable="true"   android:focusableInTouchMode="true" 代码如下: 1 <ScrollView 2 android:layout_width="match_parent"