`
superxielei
  • 浏览: 263138 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

使用本地数据库实现Web留言本

阅读更多

 

这个是《Html5与css3权威指南》中的一个例子,写出来备用。

 

<!DOCTYPE html>
<meta charset="UTF-8">
<title>使用本地数据库实现Web留言本</title>
<script>
var datatable = null;
var db = openDatabase("MyData","1.0","My Database",2*1024*1024);

function init()
{
	datatable = document.getElementById("datatable");
	showAllData();
}
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');
	th1.innerHTML = "姓名";
	th2.innerHTML = "留言";
	th3.innerHTML = "时间";
	
	tr.appendChild(th1);
	tr.appendChild(th2);
	tr.appendChild(th3);
	datatable.appendChild(tr);
}
function showAllData()
{
	db.transaction(function(tx){
		tx.executeSql('create table if not exists MsgData(name TEXT,message TEXT,time INTEGER)',[]);
		tx.executeSql('select * from MsgData',[],function(tx,rs){
			removeAllData();
			for(var i=0;i<rs.rows.length;i++){
				showData(rs.rows.item(i));
			}
		});
	});
}
function showData(row){
	var tr=document.createElement('tr');
	var td1 = document.createElement('td');
	td1.innerHTML = row.name;
	var td2 = document.createElement('td');
	td2.innerHTML = row.message;
	var td3 = document.createElement('td');
	var t = new Date();
	t.setTime(row.time);
	td3.innerHTML = t.toLocaleDateString() + " " + t.toLocaleTimeString();
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	datatable.appendChild(tr);
}
function addData(name,message,time) {
	db.transaction(function(tx){
		tx.executeSql('insert into MsgData values(?,?,?)',[name,message,time],function(tx,rs){
			alert("保存成功。");
		},function(tx,error){
			alert(error.source+"::"+error.message);
		});
	});
} // End of addData
function saveData() {
	var name = document.getElementById('name').value;
	var memo = document.getElementById('memo').value;
	var time = new Date().getTime();
	addData(name,memo,time);
	showAllData();
} // End of saveData
</script>
<body onload="init()">
	<h1>使用本地数据库实现Web留言本</h1>
	<table>
		<tr>
			<td>姓名</td>
			<td><input type="text" name="name" id="name" /></td>
		</tr>
		<tr>
			<td>留言</td>
			<td><input type="text" name="memo" id="memo" /></td>
		</tr>
		<tr>
			<td></td>
			<td>
				<input type="button" value="保存" onclick="saveData()" />
			</td>
		</tr>
	</table>
	<ht>
	<table id="datatable" border="1"></table>
	<p id="msg"></p>
</body>
 

 

分享到:
评论

相关推荐

    ASP.NET基于Web物物交换二手交易平台+源代码+文档说明+数据库(高分项目).zip

    本资源中的源码都是经过本地编译过可运行的,评审分达到95分以上。资源项目的难度比较适中,内容都是经过助教老师审定过的能够满足学习、使用需求,如果有需要的话可以放心下载使用。 系统功能: (1)账号资料管理...

    数据安全与网络安全-基于php+MySql实现简易留言板(完整源码+部署文档+环境安装)

    这些代码涵盖了前端页面、后端逻辑和数据库交互的实现。 部署文档: 提供详细的部署说明和操作指南,让用户能够轻松地在本地或服务器上部署这个留言板系统。文档中可能包括所需软件、环境配置、数据库设置以及系统...

    JAVA WEB 开发详解:XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part2

    本书语言生动、通俗易懂、讲解细致,大部分章节都提供了多个例子,而且很多例子都是目前web开发中经常使用的功能,具有相当的实用价值。本书不仅可以作为java web开发的学习用书,还可以作为从事java web开发的...

    JAVA WEB 开发详解:XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part3

    本书语言生动、通俗易懂、讲解细致,大部分章节都提供了多个例子,而且很多例子都是目前web开发中经常使用的功能,具有相当的实用价值。本书不仅可以作为java web开发的学习用书,还可以作为从事java web开发的...

    JAVA WEB 开发详解:XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part4

    本书语言生动、通俗易懂、讲解细致,大部分章节都提供了多个例子,而且很多例子都是目前web开发中经常使用的功能,具有相当的实用价值。本书不仅可以作为java web开发的学习用书,还可以作为从事java web开发的...

    夜孩子互联鬼故留言板

    在确认您有运行留言本的环境后,您需要做以下工作: 将解压后的文件拷贝到本地WEB目录中,IIS或者PWS默认Web目录为 C:inetpubwwwroot,比如您可以装到C:inetpubwwwroot ook目录下然后 敲入本地测试网址访问,...

    JAVA WEB 开发详解:XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part5

    本书语言生动、通俗易懂、讲解细致,大部分章节都提供了多个例子,而且很多例子都是目前web开发中经常使用的功能,具有相当的实用价值。本书不仅可以作为java web开发的学习用书,还可以作为从事java web开发的...

    Angel工作室LigerUi框架留言板源码 AngelMessageBoards.rar

    3、如果在vs中调式请选择另一个文件夹,本程序使用access和mssql数据兼容的模式 如果切换数据库请直接修改配置文件web.config 4、本留言板自带access数据所有省去了,安装mssql的麻烦。而且进过程序兼容性的修改...

    互动.NET单用户留言簿

    *留言簿默认使用的是ACCESS数据库,如果你想使用SQL2000数据库的话,请进入 GuestBook/SQLVER/目录按照“安装必读”及“安装演示”中的指示去做即可。 *如果空间是虚拟目录的话,还可在web.config文件中&lt;system....

    bbs留言板源码下载

    附加“车轮脚印留言板\DB_51aspx\"下数据库LiuYan到本地数据库中; 修改web.config,主要是修改服务器名称。 ; database=LiuYan; uid=sa; pwd=sa"/&gt; 功能介绍:点击LOGO可以回到主页Default.aspx;点击"我要留言...

    毕业设计-基于SpringBoot的在线拍卖系统设计与实现.zip

    本文中数据库服务器端采用了Mysql作为后台数据库,使Web与数据库紧密联系起来。在设计过程中,充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。 本系统的...

    ASP200问.EXE

    149.如何用XML制作留言本 第10章 专题应用 150.如何统计在线人数 152.如何统计用户在站点停留的时间 153.如何从服务器获得客户端时间 154.如何测试网站速度 156.如何制作防刷新计数器 157.如何实现ASP缓存技术 158...

    php网络开发完全手册

    6.3 本地文件的操作实例——小型留言本 96 6.3.1 留言发表模块 96 6.3.2 浏览模块 98 6.4 远程文件的操作实例 99 6.5 文件的上传与下载 99 6.5.1 文件的上传 99 6.5.2 文件的下载 100 6.6 小结 101 第7章 字符的处理...

    易梦整站程序 1.0.rar

    5) 安装调试时请保留留言本中至少一个留言数据,不然页面框架会外挤变形。 6) 在使用中还有什么疑问和难题,欢迎提出。 2.有关管理资料 主页后台登陆:admin.asp 用户名:emeng 密码:emeng888  部分后台...

    蓝丽留言版

    index.aspx 留言本的主页,输出类型为(XML),使用theindex.xsl文件作为目标样式表 其主要作用是“取出数据库内容,将得到数据整理成为Xml文件,来配合th eindex.xsl样式表中的样式进行正确的输出显示” theindex....

    DTcms V5.0 旗舰版MSSQL源码

    5、 将“DTcms.Web”项目下的aspx、html、plugins、upload三个文件夹拷贝到您本地发布目录,由于友情链接和留言插件已安装,所以还需将“DTcms.Web/bin”目录下的DTcms.Web.Plugin.Link.dll和DTcms.Web.Plugin....

    中网互连企业网站管理系统 2011.rar

    将解压后的文件拷贝到本地WEB目录中,IIS或者PWS默认Web目录为C:\inetpub\wwwroot, 比如您可以装到C:\inetpub\wwwroot\cnk\目录下 然后敲入本地测试网址访问,默认为:http://localhost/或者http://ip/,比如您装...

    从入门到精通HTML5——PDF——网盘链接

     教学录像:22分钟 ... 1.3.2 文件开始标签&lt;... 7  1.3.3 文件头部标签&lt;... 15.3.1 实现拖放的步骤 290  15.3.2 通过拖放显示欢迎信息 291  15.4 dataTransfer对象应用详解 293  15.4.1 使用effectAllowed...

Global site tag (gtag.js) - Google Analytics