用HTML5本地数据库制作联系人
编程技术 / houtizong 发布于 2年前 92
<!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>
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
