h5带mysql数据库的留言板_html5实现留言板的代码实例分享

html5实现留言板的代码实例分享

HTML5--JS API-本地存储 Web留言板

*{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:#0051a1;}

#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:0 auto; width:960px; overflow:hidden;}

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

#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 .msg{width:738px;}

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

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日至今的毫秒数

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

";

}

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;

}

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();}//清空所有已保存的数据

}

HTML5--JS API-本地存储 Web留言板

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供一些思路和代码示例。 首先,我们可以在HTML中创建一个表单,用于用户输入留言内容和提交留言: ```html <form> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br> <label for="message">留言:</label> <textarea id="message" name="message"></textarea><br> <button type="submit" onclick="addComment()">提交</button> </form> ``` 然后,我们可以使用JavaScript来处理表单的提交事件,并将留言内容添加到留言板中: ```javascript const comments = []; // 用于存储留言的数组 function addComment() { const name = document.getElementById("name").value; const message = document.getElementById("message").value; const comment = { name, message }; comments.push(comment); renderComments(); } function renderComments() { const container = document.getElementById("comments"); container.innerHTML = ""; // 清空留言板 comments.forEach(comment => { const div = document.createElement("div"); const name = document.createElement("h5"); const message = document.createElement("p"); name.innerText = comment.name; message.innerText = comment.message; div.appendChild(name); div.appendChild(message); container.appendChild(div); }); } ``` 最后,我们需要在HTML中创建一个容器,用于显示留言板: ```html <div id="comments"></div> ``` 完整的代码示例: ```html <!DOCTYPE html> <html> <head> <title>留言板</title> </head> <body> <form> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br> <label for="message">留言:</label> <textarea id="message" name="message"></textarea><br> <button type="submit" onclick="addComment()">提交</button> </form> <div id="comments"></div> <script> const comments = []; // 用于存储留言的数组 function addComment() { const name = document.getElementById("name").value; const message = document.getElementById("message").value; const comment = { name, message }; comments.push(comment); renderComments(); } function renderComments() { const container = document.getElementById("comments"); container.innerHTML = ""; // 清空留言板 comments.forEach(comment => { const div = document.createElement("div"); const name = document.createElement("h5"); const message = document.createElement("p"); name.innerText = comment.name; message.innerText = comment.message; div.appendChild(name); div.appendChild(message); container.appendChild(div); }); } </script> </body> </html> ``` 这样,用户就可以在网页上输入留言并提交,留言板会自动更新显示最新的留言。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值