用HTML5本地数据库制作联系人

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>用HTML5本地数据库制作联系人</title>
<style type="text/css">
/*
    -----CSS Docuemnt-----
    Version: 1.0
     Author: kingwell
      Email: jinhua.leng#gmail.com
       Date: 2012-5-16

    Global Style  Careful Modification
-----Copyright (c) 2012, xxxx Inc.  All rights reserved. V1.2-----

    -----base.css
*/

/*-- Reset Start --*/
body{background:#FAFAFA; color:#333; font: normal normal normal 12px/1.5 Arial, Helvetica, sans-serif; margin:0; padding:0;}
a,abbr,acronym,address,applet,article,b,big,blockquote,button,canvas,caption,center,cite,code,dd,del,dfn,div,dl,dt,em,embed,fieldset,font,form,h1,h2,h3,h4,h5,h6,hr,html,nav,i,iframe,img,ins,input,kbd,label,legend,li,menu,object,ol,p,pre,q,s,samp,small,span,section,strike,strong,sub,sup,table,textarea,tbody,td,tfoot,th,thead,tr,tt,u,ul,var{margin:0;padding:0;}
table{border-collapse:collapse; border-spacing:0}
fieldset,img{border:none}
q:before,q:after{content:''}
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal}
li{list-style:none}ol{padding-left:20px}ol li{list-style-type:decimal;}
sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}strong{font-weight:bold;}
caption,th{text-align:left}

.clear-float,.cf{clear:both; line-height:0; height:0; overflow:hidden}
.cl{clear:left}.cr{clear:right;}
::selection{background:orange; color:white}
.clearAfter:after{clear:both; content:"."; display:block; visibility:hidden; height:0; line-height:0}
input,textarea,select,button{font-family:Arial; font-size:12px; outline:none}

a{text-decoration:none; color:#333}
a:link{}
a:visited{}
a:hover{text-decoration:underline; color:#333}
a:active{}
/*-- Reset End--*/


/*-- Border --*/
.bn{border:none!important}
.bln{border-left:none}
.brn{border-right:none}
.btn{border-top:none}
.bbn{border-bottom:none}

.bgn{background:none!important}
.bgcn{background-color:transparent!important}
.bgin{background-image:none!important}

/*-- Float --*/
.fl{float:left; _display:inline}
.fr{float:right; _display:inline}
.fn{float:none}

/* Position */
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.static{position:static}
.r0{right:0}
.r1{right:1px}
.r2{right:2px}
.r3{right:3px}
.r4{right:4px}
.r5{right:5px}

.t0{top:0}
.t1{top:1px}
.t2{top:2px}
.t3{top:3px}
.t4{top:4px}
.t5{top:5px}
.t6{top:6px}
.t7{top:7px}
.t8{top:8px}
.t9{top:9px}
.t10{top:10px}

.r0{right:0}
.r1{right:1px}
.r2{right:2px}
.r3{right:3px}
.r4{right:4px}
.r5{right:5px}
.r6{right:6px}
.r7{right:7px}
.r8{right:8px}
.r9{right:9px}
.10{right:10px}

.b0{bottom:0}
.b1{bottom:1px}
.b2{bottom:2px}
.b3{bottom:3px}
.b4{bottom:4px}
.b5{bottom:5px}
.b6{bottom:6px}
.b7{bottom:7px}
.b8{bottom:8px}
.b9{bottom:9px}
.10{bottom:10px}

.l0{left:0}
.l1{left:1px}
.l2{left:2px}
.l3{left:3px}
.l4{left:4px}
.l5{left:5px}
.l6{left:6px}
.l7{left:7px}
.l8{left:8px}
.l9{left:9px}
.110{left:10px}



/*-- Display --*/
.none,.n{display:none}
.b,.block,.show{display:block}
.dib,.ib{display:inline-block; *display:inline; *zoom:1}
.dil,.il{display:inline}
.h{overflow:hidden}
.v{overflow:visible}

/* align*/
.ac,.center{text-align:center}
.al{text-align:left}
.ar{text-align:right}
.vm{vertical-align:middle}
.vt{vertical-align:top}
.vb{vertical-align:bottom}



/*-- Color --*/
.mc{color:#F00!important}
.red{color:red}
.green{color:green}
.orange{color:orange}
.error{color:red}
.right{color:green}

.c0{color:#000}
.c1{color:#111}
.c2{color:#222}
.c3{color:#333}
.c4{color:#444}
.c5{color:#555}
.c6{color:#666}
.c7{color:#777}
.c8{color:#888}
.c9{color:#999}
.ca{color:#AAA}
.cb{color:#BBB}
.cc{color:#CCC}
.cd{color:#DDD}
.ce{color:#EEE}
.cf{color:#FFF}

.nbg{background:none!important}
.nbgc{background-color:translate}
.nbgi{background-image:none}
.bgw{background-color:#FFF}
.bgb{background-color:#000}



/*--Others--*/
.noscript{background:#FFF9D9; border:1px solid orange; box-shadow:5px 5px 5px rgba(0,0,0,0.5); position:absolute; width:500px; left:50%; margin-left:-250px; top:100px;}
.hr{border-top:1px solid #CCC; border-bottom:1px solid #FFF; margin:5px auto;}
.zoom{*zoom:1}
.shadow{background:white;box-shadow:0 0 2px #CCC}

.cp{cursor:pointer}
.cd{cursor:default}
.lighter{font-weight:lighter}
.fb,.s{font-weight:bold}

.decimal li{list-style-type:decimal}
.disc li{list-style-type:disc}
.lino{list-style-type:none}

.ellipsis{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.u{text-decoration:underline}
.nu{text-decoration:none!important}
.del{text-decoration:line-through}


.link{text-decoration:underline;}

/*-- Margin --*/

.ma{margin:auto}
.m0{margin:0!important}
.m1{margin:1px}
.m2{margin:2px}
.m3{margin:3px}
.m4{margin:4px}
.m5{margin:5px}
.m6{margin:6px}
.m7{margin:7px}
.m8{margin:8px}
.m9{margin:9px}
.ma5{margin:5px auto}
.ma10{margin:10px auto}
.ma15{margin:15px auto}
.ma20{margin:20px auto}

.mlr5tb10{margin:5px 10px}
.mlr10tb5{margin:10px 5px}

.m5{margin:5px}
.mt5{margin-top:5px}
.mr5{margin-right:5px}
.mb5{margin-bottom:5px}
.ml5{margin-left:5px}
.mtb5{margin-top:5px; margin-bottom:5px}
.mlr5{margin-left:5px; margin-right:5px}

.m10{margin:10px}
.mt10{margin-top:10px}
.mr10{margin-right:10px}
.mb10{margin-bottom:10px}
.ml10{margin-left:10px}
.mtb10{margin-top:10px; margin-bottom:10px}
.mlr10{margin-left:10px; margin-right:10px}

.m15{margin:15px}
.mt15{margin-top:15px}
.mr15{margin-right:15px}
.mb15{margin-bottom:15px}
.ml15{margin-left:15px}
.mtb15{margin-top:15px; margin-bottom:15px}
.mlr15{margin-left:15px; margin-right:15px}



/*-- Padding --*/
.p0{padding:0!important}
.p1{padding:1px}
.p2{padding:2px}
.p3{padding:3px}
.p4{padding:4px}
.p5{padding:5px}
.pt5{padding-top:5px}
.pr5{padding-right:5px}
.pb5{padding-bottom:5px}
.pl5{padding-left:5px}
.ptb5{padding-top:5px; padding-bottom:5px}
.plr5{padding-left:5px; padding-right:5px}

.p10{padding:10px}
.pt10{padding-top:10px}
.pr10{padding-right:10px}
.pb10{padding-bottom:10px}
.pl10{padding-left:10px}
.ptb10{padding-top:10px; padding-bottom:10px}
.plr10{padding-left:10px; padding-right:10px}

.p15{padding:15px}
.pt15{padding-top:15px}
.pr15{padding-right:15px}
.pb15{padding-bottom:15px}
.pl15{padding-left:15px}
.ptb15{padding-top:15px; padding-bottom:15px}
.plr15{padding-left:15px; padding-right:15px}

.p20{padding:20px}
.pt20{padding-top:20px}
.pr20{padding-right:20px}
.pb20{padding-bottom:20px}
.pl20{padding-left:20px}
.ptb20{padding-top:20px; padding-bottom:20px}
.plr20{padding-left:20px; padding-right:20px}



/*-- Width --*/
.wp1{width:1%}
.wp2{width:2%}
.wp3{width:3%}
.wp4{width:4%}
.wp5{width:5%}
.wp6{width:6%}
.wp7{width:7%}
.wp8{width:8%}
.wp9{width:9%}
.wp10{width:10%}
.wp15{width:15%}
.wp20{width:20%}
.wp25{width:25%}
.wp30{width:30%}
.wp33{width:33.3333%}
.wp35{width:35%}
.wp40{width:40%}
.wp45{width:45%}
.wp46{width:46%}
.wp47{width:47%}
.wp48{width:48%}
.wp49{width:49%}
.wp50{width:50%}
.wp55{width:55%}
.wp60{width:60%}
.wp65{width:65%}
.wp70{width:70%}
.wp75{width:75%}
.wp80{width:80%}
.wp85{width:85%}
.wp90{width:90%}
.wp95{width:95%}
.wp100,.w{width:100%}

.w10{width:10px}
.w15{width:15px}
.w20{width:20px}
.w25{width:25px}
.w30{width:30px}
.w35{width:35px}
.w40{width:40px}
.w45{width:45px}
.w50{width:50px}
.w55{width:55px}
.w60{width:60px}
.w70{width:70px}
.w80{width:80px}
.w90{width:90px}
.w100{width:100px}
.w110{width:110px}
.w120{width:120px}
.w130{width:130px}
.w140{width:140px}
.w150{width:150px}
.w160{width:160px}
.w170{width:170px}
.w180{width:180px}
.w190{width:190px}
.w200{width:200px}
.w250{width:250px}
.w300{width:300px}
.w400{width:400px}
.w500{width:500px}

/*-- Height --*/
.h20{height:20px}
.h25{height:25px}
.h30{height:30px}
.h40{height:40px}
.h50{height:50px}
.h100{height:100px}
.h200{height:200px}
.h300{height:300px}
.h400{height:400px}
.h500{height:500px}
.hp100{height:100%}

/*-- Indent --*/
.i5{text-indent:5px}
.i10{text-indent:10px}
.i15{text-indent:15px}
.i20{text-indent:20px}
.i25{text-indent:25px}
.i30{text-indent:30px}

/*-- Font --*/
.f0{font-size:0;}
.f10{font-size:10px}
.f12{font-size:12px}
.f14{font-size:14px}
.f16{font-size:16px}
.f18{font-size:18px}
.f20{font-size:20px}
.fp100{font-size:100%}
.fp150{font-size:150%}
.fp200{font-size:200%}

/*-- LineHeight --*/
.lh1{line-height:100%}
.lh120{line-height:120%}
.lh2{line-height:200%}
.lh3{line-height:300%}
.lh4{line-height:400%}
.lh5{line-height:500%}

.lh20{line-height:20px}
.lh25{line-height:25px}
.lh30{line-height:30px}
.lh35{line-height:35px}

/*---- 上面是base.css文件 ----*/




/*---- 联系人样式开始 ----*/
body{font-size:12px; padding:20px; background:#f2f2f2; font-family:'微软雅黑'}
h1{font-size:30px; font-weight:bold; font-family:'times new roman'}
td,th{padding:5px}
input[type=text],textarea{border:1px solid #DDD; padding:3px 5px;}
input[type=text]:focus,textarea:focus,input[type=button]:focus,button:focus{border:1px solid orange; box-shadow:0 0 5px orange}
input[type=button],button{padding:3px 5px; color:#333; border:1px solid #EEE; background:#DDD}

.datatable{width:400px; border:1px solid #AAA}
#datatable{background:#FFF;}/*尽量不要使用ID应用样式,这里是测试*/
#datatable th{background-color:#DADADA}
#datatable td{}
#datatable tr:hover{background:#F0F0F0}
#warp{width:50%; margin:auto; background:#FFF; color:#565656; box-shadow:0 0 10px rgba(0,0,0,0.3)}
#warp h1{background:#3969AD; height:30px; line-height:30px; color:#FFF; font-size:14px; padding:0 10px; font-weight:lighter}
.warpBody{border:1px solid #CCC; border-top:none}
.datatable{width:100%; border:none; background:#FAFAFA!important}
.datatable th{font-weight:lighter; font-size:14px; background-color:#EFEFEF!important;}
.datatable td,.datatable th{padding:5px; padding-bottom:7px; background-image:url(images/line_1.png); background-repeat:repeat-x; background-position:0 bottom;}
.datatable td{}
.datatable tr:hover{background:#F8F8F8}
input[type=button],button{width:61px; height:25px; padding:0; color:#666; background-image:url(images/btn_01.png); background-repeat:no-repeat; background-position:0 0; border:none}
input[type=button]:hover,button:hover{background-position:0 -25px;}
.labelName{font-size:150%}
#warp input[type=text]{padding:8px}

/*---- 联系人样式结束 ----*/

</style>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript">

function begin() {
    if(typeof openDatabase === 'undefined')return;
    var datatable = null;
    var db = openDatabase('contacts', '1.001', '联系人数据库', 1024000);
    function init() {
        datatable = $('datatable');
        showAllData();
        $('add').addEventListener('click', saveData);
        $('clearAll').addEventListener('click', clearAll);
    }
    function saveData() {
        var name = $("name").value;
        var tel = $("tel").value;
        var qq = $("qq").value;
        var time = new Date().getTime();
        if (!name || !tel || !qq) {
            tip("数据不能为空!", '', '', 'red');
            var input = $("addBox").getElementsByTagName('input');
            for (var i = 0; i < input.length; i++) {
                if (input[i] && input[i].value === "") {
                    input[i].focus();
                    break;
                }
            }
        } else {
            addData(name, tel, time, qq);
            $("name").value = "";
            $("tel").value = "";
            $("qq").value = "";
        }
    }
    function showData(row) {
        var tr = document.createElement('tr');
        var td1 = document.createElement('td');
        var td2 = document.createElement('td');
        var td3 = document.createElement('td');
        var td4 = document.createElement('td');
        var td5 = document.createElement('td');
        var t = new Date();
        if (row.nodata) {
            td1.innerHTML = row.nodata;
            td1.setAttribute("colspan", 5);
            tr.appendChild(td1);
        } else {
            t.setTime(row.time);
            td1.innerHTML = row.name;
            td2.innerHTML = row.tel;
            td3.innerHTML = row.qq ? row.qq : '';
            td4.innerHTML = t.toLocaleDateString() + ' ' + t.toLocaleTimeString();
            td4.className = 'cc';
            td5.addEventListener('click', function () {
                deleteData(row.name);
            });
            td5.className = 'ac c9 cp';
            td5.innerHTML = '删除';
            td5.title = '删除联系人';
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            tr.appendChild(td5);
        }
        datatable.appendChild(tr);
    }
    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');
        var th4 = document.createElement('th');
        var th5 = document.createElement('th');
        th1.innerHTML = '姓名';
        th1.className = 'wp10';
        th2.innerHTML = '电话';
        th2.className = 'wp10';
        th3.innerHTML = 'QQ';
        th3.className = 'wp10';
        th4.innerHTML = '时间';
        th4.className = 'wp60';
        th5.innerHTML = '操作';
        th5.className = 'wp10 ac';
        tr.appendChild(th1);
        tr.appendChild(th2);
        tr.appendChild(th3);
        tr.appendChild(th4);
        tr.appendChild(th5);
        datatable.appendChild(tr);
    }
    function showAllData() {
        db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS MyContact(name TEXT,tel TEXT,time INTEGER,qq TEXT)', []);
            tx.executeSql('SELECT * FROM MyContact', [], function (tx, rs) {
                removeAllData();
                if (rs.rows.length === 0) {
                    showData({
                        nodata : '暂时没有任何记录!'
                    });
                } else {
                    $('contactCount').innerHTML = rs.rows.length;
                    for (var i = 0; i < rs.rows.length; i++) {
                        showData(rs.rows.item(i));
                    }
                }
            });
        });
    }
    function addData(name, tel, time, qq) {
        db.transaction(function (tx) {
            tx.executeSql('INSERT INTO MyContact VALUES(?,?,?,?)', [name, tel, time, qq], function (tx, rs) {
                showAllData();
                tip("成功添加一条联系人!");
            }, function (tx, error) {
                //alert(error.source + '::' + error.message);
                document.write(error.message);
            });
        });
    }
    function deleteData(str) {
        if (confirm('确定删除些联系人 ' + str + ' 吗?')) {
            db.transaction(function (tx) {
                tx.executeSql('delete from MyContact where name=?', [str], function (tx, rs) {
                    showAllData();
                }, function (tx, error) {
                    alert(error.message);
                });
            });
        }
    }
    function clearAll() {
        if (confirm("您确定要删除所有联系人吗?")) {
            db.transaction(function (tx) {
                tx.executeSql('delete from MyContact', [], function (tx, rs) {
                    showAllData();
                }, function (tx, error) {
                    alert(error.message);
                });
            });
        }
    }
    function updataData() {
        db.transaction(function (tx) {
            tx.executeSql('UPDATE MyContact SET name=? where name=?', ['a0', 'a'], function (tx, rs) {}, function (tx, error) {
                alert(error.message)
            });
        });

    }
    updataData();
    function deleteTable() {
        db.transaction(function (tx) {
            tx.executeSql('drop table MyContact');
        });
    }
    window.addEventListener('load', function () {
        init();
    });

}

begin();
</script>
</head>
<body>
<h1>用HTML5本地数据库制作联系人</h1>
<div class="c9">使用Chrome或Opera才能看到效果</div>
<div id="warp">
    <h1>联系人列表</h1>
    <div class="warpBody">
        <table class="wp100">
            <tr id="addBox">
                <td colspan="4">
                <label for="name" class="ib m5 wp100"><span class="labelName">姓名:</span><br /><input type="text" name="name" id="name" class="wp95" /></label><br />
                <label for="tel" class="ib m5 wp100"><span class="labelName">电话:</span><br /><input type="text" name="tel" id="tel" class="wp95" /></label><br />
                <label for="qq" class="ib m5 wp100"><span class="labelName">QQ:</span><br /><input type="text" name="qq" id="qq" class="wp95" /></label><br />
                <label for="info" class="ib m5 wp100"><span class="labelName">备注:</span><br /><textarea name="info" id="" cols="30" rows="10" id="info" class="wp95"></textarea></label><br />
                <button id="add" class="ib m5">添加</button>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                <label for="" class="ib m5 wp100"><input type="text" name="" id="search" class="wp50" /></label>
                <button id="searchButton" class="ib m5">搜索</button>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="" style="line-height:25px; height:25px;"><div id="tip"></div></td>
                <td class="ar"><span id="contactCount" class="c6 m5">0</span>位联系人</td>
            </tr>
            
        </table>                    
        <table id="datatable" class="datatable"></table>
        <span id="clearAll" class="ar p10 cp">消除所有数据</span>
    </div>
</div>

</body>
</html>

 

posted @ 2013-03-20 15:16  kingwell  阅读(3941)  评论(1编辑  收藏  举报