<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>留言板</title>
<style type="text/css">
*{margin:0; padding:0;}
#comment {margin-top:30px;overflow:hidden;}
#comment p
{
margin-bottom:10px; padding:10px; border-radius:5px;
font-size:14px; line-height:24px; color:#333; font-family:Microsoft yahei, Song, Arial, Helvetica, Tahoma, Geneva;
}
#comment p:nth-child(odd){border:1px solid #e3e197; background:#ffd;}
#comment p:nth-child(even){border:1px solid #adcd3c; background:#f2fddb;}
#comment p span{display:inline;}
#comment p .msg{width:738px;float:left;}
#comment p .datetime{width:200px; color:#999; text-align:right;}
#content #content:after,#comment p:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';}
#content
{
margin-top:150px;
}
#tip
{
display:block;
margin-bottom:15px;
}
.dark-matter
{
margin-left: auto;
margin-right: auto;
max-width: 500px;
background: #555;
padding: 20px 30px 20px 30px;
font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #D3D3D3;
text-shadow: 1px 1px 1px #444;
border: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.dark-matter h1 {
padding: 0px 0px 10px 40px;
display: block;
border-bottom: 1px solid #444;
margin: -10px -30px 30px -30px;
}
.dark-matter h1>span {
display: block;
font-size: 11px;
}
.dark-matter label {
display: block;
margin: 0px 0px 5px;
}
.dark-matter label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
margin-top: 10px;
font-weight: bold;
}
.dark-matter input[type="text"], .dark-matter input[type="email"], .dark-matter textarea, .dark-matter select {
border: none;
color: #525252;
height: 25px;
line-height:15px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 5px 0px 5px 5px;
width: 70%;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
background: #DFDFDF;
}
.dark-matter select {
background: #DFDFDF url('down-arrow.png') no-repeat right;
background: #DFDFDF url('down-arrow.png') no-repeat right;
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
height: 35px;
color: #525252;
line-height: 25px;
}
.dark-matter textarea{
height:100px;
padding: 5px 0px 0px 5px;
width: 70%;
display:block;
}
.dark-matter input[type="button"] {
background: #FFCC02;
border: none;
padding: 10px 25px 10px 25px;
color: #585858;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-shadow: 1px 1px 1px #FFE477;
font-weight: bold;
box-shadow: 1px 1px 1px #3D3D3D;
-webkit-box-shadow:1px 1px 1px #3D3D3D;
-moz-box-shadow:1px 1px 1px #3D3D3D;
}
.dark-matter input[type="button":hover {
color: #333;
background-color: #EBEBEB;
}
</style>
<script type="text/javascript">
var Storage =
{
saveData:function()//保存数据
{
var data = document.querySelector("#content textarea");
if(data.value != "")
{
var time = new Date().getTime() + Math.random() * 5;//getTime是Date对象中的方法，作用是返回 1970年01月01日至今的毫秒数
localStorage.setItem(time, data.value + "|" + this.getDateTime());//将毫秒数存入Key值中，可以降低Key值重复率
data.value = "";
this.writeData();
}
else
{
alert("请填写您的留言！");
}
},
writeData:function()//输出数据
{
var dataHtml = "", data = "";
for(var i = localStorage.length-1; i >= 0; i--)//效率更高的循环方法
{
data = localStorage.getItem(localStorage.key(i)).split("|");
dataHtml += "<p><span class=\"msg\">" + data[0] + "</span><span class=\"datetime\">" + data[1] + "</span></p>";
}
document.getElementById("comment").innerHTML = dataHtml;
document.getElementById("tip").innerHTML = "你还可以输入140字";
},
clearData:function()//清空数据
{
if(localStorage.length > 0)
{
if(window.confirm("清空后不可恢复，是否确认清空？"))
{
localStorage.clear();
this.writeData();
}
}
else
{
alert("没有需要清空的数据！");
}
},
getDateTime:function()//获取日期时间，例如 2012-03-08 12:58:58
{
var isZero = function(num)//私有方法，自动补零
{
if(num < 10)
{
num = "0" + num;
}
return num;
}
var d = new Date();
return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + " " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds());
}
}
window.onload = function()
{
Storage.writeData();//当打开页面的时候，先将localStorage中的数据输出一边，如果没有数据，则输出空
document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件，作用是将localStorage中的数据输出
document.getElementById("clearBt").onclick = function(){Storage.clearData();}//清空所有已保存的数据
}
function get()
{
var data = document.querySelector("#content textarea");
var len = data.value.length;
var remain = 140-len;
if(remain<0)
{
document.getElementById("tip").innerHTML = "超过字数限制";
}
else document.getElementById("tip").innerHTML = "你还可以输入"+ remain +"字";
}
</script>
</head>
<body>
<div id="content">
<div id = "main" class = "dark-matter">
<h1>Contact Form</h1>
<p>Your Name : </p>
<input type = "text"></input>
<p>Comment :</p>
<textarea id = "in" onkeyup="get()" maxlength="140"></textarea>
<strong id = "tip">请输入你的评论</strong>
<input id="postBt" type="button" value="发表评论"/>
<input id="clearBt" type="button" value="清空所有已保存的数据"/>
</div>
<div id="comment"></div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>留言板</title>
<style type="text/css">
*{margin:0; padding:0;}
#comment {margin-top:30px;overflow:hidden;}
#comment p
{
margin-bottom:10px; padding:10px; border-radius:5px;
font-size:14px; line-height:24px; color:#333; font-family:Microsoft yahei, Song, Arial, Helvetica, Tahoma, Geneva;
}
#comment p:nth-child(odd){border:1px solid #e3e197; background:#ffd;}
#comment p:nth-child(even){border:1px solid #adcd3c; background:#f2fddb;}
#comment p span{display:inline;}
#comment p .msg{width:738px;float:left;}
#comment p .datetime{width:200px; color:#999; text-align:right;}
#content #content:after,#comment p:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';}
#content
{
margin-top:150px;
}
#tip
{
display:block;
margin-bottom:15px;
}
.dark-matter
{
margin-left: auto;
margin-right: auto;
max-width: 500px;
background: #555;
padding: 20px 30px 20px 30px;
font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #D3D3D3;
text-shadow: 1px 1px 1px #444;
border: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.dark-matter h1 {
padding: 0px 0px 10px 40px;
display: block;
border-bottom: 1px solid #444;
margin: -10px -30px 30px -30px;
}
.dark-matter h1>span {
display: block;
font-size: 11px;
}
.dark-matter label {
display: block;
margin: 0px 0px 5px;
}
.dark-matter label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
margin-top: 10px;
font-weight: bold;
}
.dark-matter input[type="text"], .dark-matter input[type="email"], .dark-matter textarea, .dark-matter select {
border: none;
color: #525252;
height: 25px;
line-height:15px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 5px 0px 5px 5px;
width: 70%;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
background: #DFDFDF;
}
.dark-matter select {
background: #DFDFDF url('down-arrow.png') no-repeat right;
background: #DFDFDF url('down-arrow.png') no-repeat right;
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
height: 35px;
color: #525252;
line-height: 25px;
}
.dark-matter textarea{
height:100px;
padding: 5px 0px 0px 5px;
width: 70%;
display:block;
}
.dark-matter input[type="button"] {
background: #FFCC02;
border: none;
padding: 10px 25px 10px 25px;
color: #585858;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-shadow: 1px 1px 1px #FFE477;
font-weight: bold;
box-shadow: 1px 1px 1px #3D3D3D;
-webkit-box-shadow:1px 1px 1px #3D3D3D;
-moz-box-shadow:1px 1px 1px #3D3D3D;
}
.dark-matter input[type="button":hover {
color: #333;
background-color: #EBEBEB;
}
</style>
<script type="text/javascript">
var Storage =
{
saveData:function()//保存数据
{
var data = document.querySelector("#content textarea");
if(data.value != "")
{
var time = new Date().getTime() + Math.random() * 5;//getTime是Date对象中的方法，作用是返回 1970年01月01日至今的毫秒数
localStorage.setItem(time, data.value + "|" + this.getDateTime());//将毫秒数存入Key值中，可以降低Key值重复率
data.value = "";
this.writeData();
}
else
{
alert("请填写您的留言！");
}
},
writeData:function()//输出数据
{
var dataHtml = "", data = "";
for(var i = localStorage.length-1; i >= 0; i--)//效率更高的循环方法
{
data = localStorage.getItem(localStorage.key(i)).split("|");
dataHtml += "<p><span class=\"msg\">" + data[0] + "</span><span class=\"datetime\">" + data[1] + "</span></p>";
}
document.getElementById("comment").innerHTML = dataHtml;
document.getElementById("tip").innerHTML = "你还可以输入140字";
},
clearData:function()//清空数据
{
if(localStorage.length > 0)
{
if(window.confirm("清空后不可恢复，是否确认清空？"))
{
localStorage.clear();
this.writeData();
}
}
else
{
alert("没有需要清空的数据！");
}
},
getDateTime:function()//获取日期时间，例如 2012-03-08 12:58:58
{
var isZero = function(num)//私有方法，自动补零
{
if(num < 10)
{
num = "0" + num;
}
return num;
}
var d = new Date();
return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + " " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds());
}
}
window.onload = function()
{
Storage.writeData();//当打开页面的时候，先将localStorage中的数据输出一边，如果没有数据，则输出空
document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件，作用是将localStorage中的数据输出
document.getElementById("clearBt").onclick = function(){Storage.clearData();}//清空所有已保存的数据
}
function get()
{
var data = document.querySelector("#content textarea");
var len = data.value.length;
var remain = 140-len;
if(remain<0)
{
document.getElementById("tip").innerHTML = "超过字数限制";
}
else document.getElementById("tip").innerHTML = "你还可以输入"+ remain +"字";
}
</script>
</head>
<body>
<div id="content">
<div id = "main" class = "dark-matter">
<h1>Contact Form</h1>
<p>Your Name : </p>
<input type = "text"></input>
<p>Comment :</p>
<textarea id = "in" onkeyup="get()" maxlength="140"></textarea>
<strong id = "tip">请输入你的评论</strong>
<input id="postBt" type="button" value="发表评论"/>
<input id="clearBt" type="button" value="清空所有已保存的数据"/>
</div>
<div id="comment"></div>
</div>
</body>
</html>
