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