HTML5+CSS3 制作简单留言簿
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML5+CSS3
在HTML 5之前，要制作一个留言簿需要用将表单数据提交到数据库，再从数据库中读取出来。而在HTML 5中，用户可以直接通过本地存储的优势创建简单的留言簿。
操作步骤：
（1）创建index.html文件，并在<body>标签中插入<h1>和<form>标签，以及标签内容。
<h1>留言簿</h1>
showAllData()
db.transaction(function(tx){
tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)',[]);
})
getE('clear').onclick = function(){
db.transaction(function(tx){
tx.executeSql('DROP TABLE MsgData',[]);
})
showAllData()
}
getE('save').onclick = function(){
saveData();
return false;
}
function getE(ele){
<input type="submit" id="save" value="发表留言"/>
<input type="button" id="clear" value="清除留言"/>
</p>
</form>
（2）在<style>标签中，添加对<form>表单的样式设置，如文本、定位、label标签样式、input样式等。
}
}
function showData(row){
var dt = document.createElement('dt');
dt.innerHTML = '<time>' + row.time + '</time>' + '<address>' + + '</address>';
margin-right: 50px;
}
.form_item input[type="submit"]:hover {
position: relative;
top:1px;
}
（3）在<form>标签下面，添加对本地存储的JavaScript代码。并将表单提交的内容，添加到本地存储数据库中，然后，再读取数据，并显示到网页中。
tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)',[]);
tx.executeSql('SELECT * FROM MsgData',[],function(tx,result){
line-height: 24px;
border:1px solid #ff6600;
border-radius:4px;
background:#ff6600;
outline:none;
color:#fff;
cursor: pointer;
}
.form_item input[type="submit"] {
datalist.id = 'datalist';
document.body.appendChild(datalist);
}
var result = getE('result');
var db = openDatabase('myData','1.0','test database',1024*1024);
return document.getElementById(ele);
}Hale Waihona Puke function removeAllData(){
for (var i = datalist.children.length-1; i >= 0; i--){
datalist.removeChild(datalist.children[i]);
var dd = document.createElement('dd');
dd.innerHTML = row.msg;
datalist.appendChild(dt);
datalist.appendChild(dd);
}
function showAllData(){
db.transaction(function(tx){
height:24px;
line-height: 24px;
}
.form_item textarea {
vertical-align: top;
}
.form_item input[type="submit"], input[type="button"] {
width: 80px;
height:24px;
<form action="#" method="get" accept-charset="utf-8">
<p class="form_item">
<label for="">昵称：</label>
<input type="text" name="" value="" id="name" required/>
</p>
<p class="form_item">
<label for="">留言：</label>
<textarea rows="3" cols="30" name="" value="" id="msg" required></textarea>
</p>
<p class="form_item">
.form_item {
min-height: 30px;
margin-top: 5px;
text-indent:0;
}
.form_item label {
display: block;
line-height: 24px;
}
.form_item input[type="text"] {
width: 180px;
<script type="text/javascript" charset="utf-8">
(function(){
var datalist = getE('datalist');
if(!datalist){
datalist = document.createElement('dl');
datalist.className = 'datalist';
在HTML 5之前，要制作一个留言簿需要用将表单数据提交到数据库，再从数据库中读取出来。而在HTML 5中，用户可以直接通过本地存储的优势创建简单的留言簿。
操作步骤：
（1）创建index.html文件，并在<body>标签中插入<h1>和<form>标签，以及标签内容。
<h1>留言簿</h1>
showAllData()
db.transaction(function(tx){
tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)',[]);
})
getE('clear').onclick = function(){
db.transaction(function(tx){
tx.executeSql('DROP TABLE MsgData',[]);
})
showAllData()
}
getE('save').onclick = function(){
saveData();
return false;
}
function getE(ele){
<input type="submit" id="save" value="发表留言"/>
<input type="button" id="clear" value="清除留言"/>
</p>
</form>
（2）在<style>标签中，添加对<form>表单的样式设置，如文本、定位、label标签样式、input样式等。
}
}
function showData(row){
var dt = document.createElement('dt');
dt.innerHTML = '<time>' + row.time + '</time>' + '<address>' + + '</address>';
margin-right: 50px;
}
.form_item input[type="submit"]:hover {
position: relative;
top:1px;
}
（3）在<form>标签下面，添加对本地存储的JavaScript代码。并将表单提交的内容，添加到本地存储数据库中，然后，再读取数据，并显示到网页中。
tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)',[]);
tx.executeSql('SELECT * FROM MsgData',[],function(tx,result){
line-height: 24px;
border:1px solid #ff6600;
border-radius:4px;
background:#ff6600;
outline:none;
color:#fff;
cursor: pointer;
}
.form_item input[type="submit"] {
datalist.id = 'datalist';
document.body.appendChild(datalist);
}
var result = getE('result');
var db = openDatabase('myData','1.0','test database',1024*1024);
return document.getElementById(ele);
}Hale Waihona Puke function removeAllData(){
for (var i = datalist.children.length-1; i >= 0; i--){
datalist.removeChild(datalist.children[i]);
var dd = document.createElement('dd');
dd.innerHTML = row.msg;
datalist.appendChild(dt);
datalist.appendChild(dd);
}
function showAllData(){
db.transaction(function(tx){
height:24px;
line-height: 24px;
}
.form_item textarea {
vertical-align: top;
}
.form_item input[type="submit"], input[type="button"] {
width: 80px;
height:24px;
<form action="#" method="get" accept-charset="utf-8">
<p class="form_item">
<label for="">昵称：</label>
<input type="text" name="" value="" id="name" required/>
</p>
<p class="form_item">
<label for="">留言：</label>
<textarea rows="3" cols="30" name="" value="" id="msg" required></textarea>
</p>
<p class="form_item">
.form_item {
min-height: 30px;
margin-top: 5px;
text-indent:0;
}
.form_item label {
display: block;
line-height: 24px;
}
.form_item input[type="text"] {
width: 180px;
<script type="text/javascript" charset="utf-8">
(function(){
var datalist = getE('datalist');
if(!datalist){
datalist = document.createElement('dl');
datalist.className = 'datalist';