手机html留言板模块,html的留言板制作（js）

记事本

*{margin:0; padding:0;}

body,input{font-size:14px; line-height:24px; color:#333; font-family:Microsoft yahei, Song, Arial, Helvetica, Tahoma, Geneva;}

h1{margin-bottom:15px; height:100px; line-height:100px; text-align:center; font-size:24px; color:#fff; background:black;}

#content #post,#comment p{zoom:1;}

#content #post:after,#comment p:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';}

.transition{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; -ms-transition:all 0.5s linear; transition:all 0.5s linear;}

#content{margin:0auto; width:960px; overflow:hidden;}

#content #post{margin-bottom:15px; padding-bottom:15px; border-bottom:1px #d4d4d4 dashed;

height: 556px;

}

#content #post textarea{display:block; margin-bottom:10px; padding:5px; width:948px; height:390px; border:1px #d1d1d1 solid; border-radius:5px; resize:none; outline:none;}

#content #post textarea:hover{border:1px #9bdf70 solid; background:#f0fbeb;}

#content #post #postBt,#content #post #clearBt{margin-left:5px; padding:3px; float:right;}

#comment{overflow:hidden;}

#comment p{margin-bottom:10px; padding:10px; border-radius:5px;}

#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; float:left;}*/#comment p .right{text-align:right;}

#comment p .msg{width:738px;}

#comment p .datetime{width:200px; color:#999; text-align:right;}

varnamed;

function delete1(id)

{

localStorage.removeItem(id);this.Storage.writeData();

}

function prom() {var name = prompt("请输入您的名字", "");//将输入的内容赋给变量 name ，

named =name;//这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值

if (named)//如果返回的有内容

{

alert("欢迎您：" +name)

document.getElementById("shangtian").style.display = "none";

document.getElementById("ritian").value =named;

}else{

document.getElementById("ritian").value = "匿名发言者";

}

}var Storage ={

saveData:function()//保存数据

{var data = document.querySelector("#post textarea");if(data.value != "")

{var time = new Date().getTime() + Math.random() * 5;//getTime是Date对象中的方法，作用是返回 1970年01月01日至今的毫秒数

if(named) {

localStorage.setItem(time, data.value+ "|" + named + "|" + this.getDateTime());//将毫秒数存入Key值中，可以降低Key值重复率

}else{

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 += "

" + data[0] + "" + data[1] + "" + data[2]+"

";

dataHtml += "" + data[1] + "" + data[2] + "

" + data[0] + "" + "

";

}

document.getElementById("comment").innerHTML =dataHtml;

},

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;

}returnnum;

}var d = newDate();return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + " " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" +isZero(d.getSeconds());

}

}

window.οnlοad=function()

{

Storage.writeData();//当打开页面的时候，先将localStorage中的数据输出一边，如果没有数据，则输出空

document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件，作用是将localStorage中的数据输出

document.getElementById("clearBt").onclick = function(){Storage.clearData();}//清空所有已保存的数据

}

留言板

昵称：