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