寡人写的第一个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.asphttp://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
寡人写的第一个HTML5页面的更多相关文章
- 写给“有钱大爷”、”美工殿下”、“前端文艺青年”的微信HTML5页面设计建议
============================== 2018更新 iphone X 的设计内容 ============================== 我保证你一分钟就 ...
- 微信HTML5页面设计建议
一个HTML5页面从提出到完成上线的流程:> 1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给 ...
- HTML5页面开发的基础性模板
分享一个HTML5页面开发的基础性模板,包含了两个版本: 开发版本 注释版本 开发版本 <!DOCTYPE html> <html> <head> <meta ...
- 12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面
上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...
- JS事件 加载事件（onload）注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。 2. 此节的加载页面，可理解为打开一个新页面时。
加载事件(onload) 事件会在页面加载完成后,立即发生,同时执行被调用的程序. 注意:1. 加载页面时,触发onload事件,事件写在<body>标签内. 2. 此节的加载页面,可理解 ...
- 用Phaser来制作一个html5游戏——flappy bird （二）
在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一 ...
- 我的第一个html页面
<!DOCTYPE html><meta charset="UTF-8"><title>第一个html5界面</title>< ...
- 转：HTML5页面如何在手机端浏览器调用相机、相册功能
HTML5页面如何在手机端浏览器调用相机.相册功能 开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file&q ...
- Web开发从零单排之一：在新浪云平台SAE上开发一个html5电子喜帖
需求描述: 本人大婚将至,女朋友说“现在都流行在微信上发电子请帖了,你不是技(cheng)术(xu)宅(yuan)嘛,不会连这个都搞不定吧” 本人嘴上说这等小事何足挂齿,但心里还是七上八下的,虽然自认 ...
随机推荐
- Android（java）学习笔记159：Dalivk虚拟机的初始化过程
1.初始化下面系统函数(调用dvmStartup函数初始化所有相关的函数) 开始学习虚拟机的初始化过程,先从dvmStartup函数开始,这个函数实现所有开始虚拟机的准备工作: dvmAllocTra ...
- TextView使用的方式
第一种改变TextView的方式 // TextView tv=new TextView(this); // tv.setText("Hello,Android&quo ...
- bash调试执行
bash -x 调试执行 bash -n 测试语法
- Hessian
一．远程通讯协议的基本原理 网络通信需要做的就是将流从一台计算机传输到另外一台计算机,基于传输协议和网络 IO 来实现,其中传输协议比较出名的有 http . tcp . udp 等等, http . ...
- JVM笔记4：Java内存分配策略
简单来说,对象内存分配主要是在堆中分配.但是分配的规则并不是固定的,取决于使用的收集器组合以及JVM内存相关参数的设定 以下介绍几条基本规则(使用的ParNew+Serial Old收集器组合): 一 ...
- JAVA锁的可重入性
机制:每个锁都关联一个请求计数器和一个占有他的线程,当请求计数器为0时,这个锁可以被认为是unhled的,当一个线程请求一个unheld的锁时,JVM记录锁的拥有者,并把锁的请求计数加1,如果同一个线 ...
- 通过jQuery的attr修改onclick值的的解决方法
好了,直接给大家贴上js代码吧 var js = "alert('B:' + this.id); return false;"; var newclick = eval(" ...
- <input> 标签
HTML5 中的新属性. 属性 值 描述 accept mime_type 规定通过文件上传来提交的文件的类型. align left right top middle bottom 不赞成使用. ...
- Help View修复
好吧,手贱把ProgramData里关于Help View的某些数据删除了 (在任何情况下都不要删除此文件夹中的任何数据).即使卸载后重新安装也出现错误,可以参考的http://social.msdn ...
- 堆排序算法（C#实现）
在软件设计相关领域,“堆(Heap)”的概念主要涉及到两个方面: 一种是数据结构,逻辑上是一颗完全二叉树,存储上是一个数组对象(二叉堆). 另一种是垃圾收集存储区,是软件系统可以编程的内存区域. 本文 ...