Index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>网页制作练习</title>
<script src="Webjs3.js"></script>
<script src="Sqljs3.js"></script>
<style type="text/css">
div{
width: 800px
margin-top:0px; width:510px; height:200px; margin-right:auto; margin-left:auto;
}
[title=te]{
/*属性和值选择器*/
color: aliceblue;
}
</style>
</head>
<body background="雪花2.jpg" οnlοad="init()" >
<table>
<tr>
<td>姓名: </td>
<td><input type="text" id="name1"></td>
</tr>
<tr>
<td>E-mail: </td>
<td><input type="text" id="email1"> </td>
</tr>
<tr>
<td>电话号码: </td>
<td><input type="text" id="tel1"></td>
</tr>
<tr>
<td>备注: </td>
<td><input type="text" id="memo1"> </td>
</tr>
<tr>
<td></td>
<td><input type="button" value="保存" οnclick="saveStorage()"></td>
</tr>
</table>
<hr>
<p>
检索:
<input type="text" id="find1">
<input type="button" value="检索" οnclick="findStorage('msg1')">
</p>
<p id="msg1"></p>
<div >
<br> <br> <br> <br> <br> <br> <br>
<iframe src="framea.html" frameborder="0" width="100%" height="500px">
Frametotal<br />
</iframe>
<br> <br> <br> <br> <br>
</div>
<br> <br> <br> <br> <br><br> <br> <br> <br> <br><br> <br> <br> <br> <br><br> <br> <br> <br> <br><br> <br> <br> <br> <br>
<form action="http://localhost/service.php" method="get">
用户名:
<input type="text" name="yonghu">
密码 :
<input type="password" name="mima">
<input type="submit" value="确定">
</form>
<br><br><br><br><br>
SQL实现Web留言板<br>
<table>
<tr>
<td>姓名: </td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>留言: </td>
<td><input type="text" id="memo"></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="保存" οnclick="saveData()" >
</td>
<td>
<input type="button" value="删除某个表" οnclick="dropTable()">
</td>
</tr>
</table>
<hr>
<table id="datatable" border="1"></table>
<p id="msg"><a></a></p>
</body>
</html>
framea.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>FrameA</title>
<style type="text/css">
body{
margin: 0px;
}
div#containor{
width: 500px;
height:200px;
background-color: palegreen;
}
div#title{
width: 500px;
height: 50px;
background-color: beige;
}
div#menu{
width: 50%;
height: 200px;
background-color: aquamarine;
float: left;
}
div#bottom{
width: 50%;
height: 200px;
background-color: dodgerblue;
float: left;
}
div#frame{
width:500px ;
float: left;
}
</style>
</head>
<body >
<div id="containor" >
<div id="title">头部</div>
<div id="menu">菜单</div>
<div id="bottom">底部</div>
<div id="frame">框架
<iframe src="frameb.html" frameborder="0" width="500px" height="350px" >
Framea<br>
</iframe>
</div>
</div>
</body>
</html>
frameb.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>FrameB</title>
<script src="Webjs1.js"></script>
<script src="Webjs2.js"></script>
<link href="Css1.css" type="text/css">
</head>
<body bgcolor="#8a2be2" >
WebStorage制作Web留言板<br>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" οnclick="saveStorage2('input')">
<input type="button" value="读取数据" οnclick="loadStorage2('msg')">
<br> <br> <br>
<textarea id="memo" cols="60" rows="10"></textarea><br>
<input type="button" value="保存" οnclick="saveStorage3('memo')">
<input type="button" value="显示" οnclick="loadStorage3('msg')">
<input type="button" value="清除数据" οnclick="clearStorage()">
<br> <br>
<a href="index2.html" target="_blank">返回index首页</a>
</body>
</html>
Webjs1.js:
/**
* Created by Vodka on 2017/2/26.
*/
function saveStorage1(id){
var target = document.getElementById(id);
var str = target.value;
//保存数据的方法 key value
sessionStorage.setItem("message",str);
}
function loadStorage1(id){
var target = document.getElementById(id);
//读取数据
var msg = sessionStorage.getItem("message");
target.innerHTML = msg;
}
function saveStorage2(id){
var target = document.getElementById(id);
var str = target.value;
//保存数据的方法 key value
localStorage.setItem("message",str);
}
function loadStorage2(id){
var target = document.getElementById(id);
//读取数据
var msg = localStorage.getItem("message");
target.innerHTML = msg;
}
Webjs2.js:
/**
* Created by Vodka on 2017/2/26.
*/
function saveStorage3(id){
var data = document.getElementById(id).value;
var time = new Date().getTime();
localStorage.setItem(time,data);
alert("数据已储存");
loadStorage('msg');
}
function loadStorage3(id){
var result = "<table border ='1'>";
for(var i=0;i<localStorage.length;i++){
var key = localStorage.key(i);
var value = localStorage.getItem(key);
var date = new Date();
date.setTime(key);
result += "<tr><td>"+value+"</td><td>"+date+"</td></tr>";
}
result += "</table>";
var target = document.getElementById(id);
target.innerHTML = result;
}
function clearStorage(){
localStorage.clear();
alert("数据已删除");
loadStorage('msg');
}
Webjs3.js:
/**
* Created by Vodka on 2017/2/26.
*/
function saveStorage(){
var data = new Object;
data.name1 = document.getElementById("name1").value;
data.email1 = document.getElementById("email1").value;
data.tel1 = document.getElementById("tel1").value;
data.memo1 = document.getElementById("memo1").value;
var str = JSON.stringify(data);
localStorage.setItem(data.name1,str);
alert("数据已储存");
}
function findStorage(id){
var find=document.getElementById('find1').value;
var str = localStorage.getItem(find);
var data = JSON.parse(str);
var result = "姓名:"+data.name1+"<br>";
result += "E-mail:"+data.email1+"<br>";
result += "电话:"+data.tel1+"<br>";
result += "备注:"+data.memo1+"<br>";
target = document.getElementById(id);
target.innerHTML = result;
}
Sqljs3.js:
/**
* Created by Vodka on 2017/2/26.
*/
var datatable = null;
var db = openDatabase("MyData","","My Database",1024*100);
function init(){
datatable = document.getElementById("datatable");
}
//删除html中table下的所有的子节点
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 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 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 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);
}
)
})
}
//保存table中提交的数据
function saveData(){
var name = document.getElementById("name").value;
var memo = document.getElementById("memo").value;
var time = new Date().getTime();
addData(name,memo,time);
showAllData();
}
//删除某一个表
function dropTable(){
var tableName = window.prompt("请输入要删除的表名称:","");
db.transaction(function(tx){
tx.executeSql("drop table"+tableName+"",[],function(tx,rs){
alert("表删除成功!");
},function(tx,error){
alert(error.source+"::"+error.message);
});
})
}
Css1.css:
body{
background-image: url("雪花2.jpg");
}
/*派生选择器*/
table tr{
color: #FF0000;
}
/* id选择器 带有# */
#p a{
color: lightgreen;
background-image: url("飞哥.jpg");
background-repeat: no-repeat;
/*背景是否平铺填满*/
background-position: 0px 0px;
/*设置背景位置*/
background-attachment: fixed;
/*设置背景是否随着页面滚动*/
text-align : right;
/*左右对齐方式*/
text-indent: -2em;
/*首行缩进设置*/
padding-left:2em ;
/*内边框距左距离设置*/
text-transform: uppercase;
/*字母大小写设置*/
text-shadow: 5px 5px 1px #FF0000;
/*距左距离、距上距离、清晰度设置、背景颜色*/
width: 100px;
text-wrap: normal;
/*自动换行设置(英文不会拆开)*/
font-size: 40px;
/*字体大小*/
font-family:fantasy ;
/*字体种类*/
}
/* 类选择器 带有. (用的最多)*/
.pclass{
color: antiquewhite;
}
@font-face {
font-family: myfont;
src: url("");
}
/*元素选择器 无.或# */
a:link{
/*普通的未被访问的连接*/
color: black;
text-decoration: none;
}
a:visited{
/*已经访问过的连接*/
color: darkblue;
}
a:hover{
/*鼠标位于连接上方*/
color: chartreuse;
}
a:active{
/*连接被点击时*/
color: chartreuse;
}
ul li{
list-style-image: url("蓝飘.gif");
}
/*class可以重复 id不能重复*/
ul.ul1{
list-style-position: inside;
}
#tb,tr,th,td{
border: 1px solid blue;
text-align: center;
}
#tb{
width: auto;
height: auto;
border-collapse: collapse;
}
p{
outline-style:groove;
outline-color: gold;
outline-width: 1px;
}