本篇文章主要给大家介绍一个非常简单的html留言板及html 留言列表样式的相关代码操作。留言板是一些门户网站或者论坛等等必不可少的一部分。
html留言板具体代码示例如下：
<!doctype html><html><head> <meta charset="utf-8"> <title>网页留言板版源码示例</title></head><body><h1>简易留言板</h1><textarea id="memo" cols="60" rows="10"></textarea><input type="button" value="追加内容" onclick="savestorage('memo')" /><input type="button" value="初始化" onclick="clearstorage('msg')" /><hr /><p id="msg"></p><script type="text/javascript"> function savestorage(id) { var data = document.getelementbyid(id).value; var time = new date().gettime(); localstorage.setitem(time,data); console.log("数据已保存"); loadstorage('msg'); } function loadstorage(id) { var result = '<table border="1">'; for(var i = 0; i < localstorage.length; i++) { var kes = localstorage.key(i); var value = localstorage.getitem(kes); var date = new date(); date.settime(kes); var datestr = date.togmtstring(); result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>' } result += '</table>';var target = document.getelementbyid(id); target.innerhtml = result; } function clearstorage() { localstorage.clear(); console.log("清除完毕"); }</script></body></html>
上述html留言板效果如下图：
注：savestorage() 获取textarea的value值
gettime()获取当前时间戳、setitem()将时间戳作为键值，textarea的value值作为键值的内容保存在本地数据库
localstorage:html5出现的新标签
html5本地存储
基本语句: window.localstorage;
获取: localstorage.getitem(key);
添加: localstorage.setitem(key,value);
修改: localstorage.key = ;
删除: localstorage.removeitem(key);
清除: localstorage.clear();
【相关文章推荐】
如何用php简单制作留言板
php实现留言板功能的代码详细介绍
以上就是html怎么操作来实现留言板样式？（代码示例）的详细内容。