html怎么操作来实现留言板样式？（代码示例）

互联网 18-8-11

本篇文章主要给大家介绍一个非常简单的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留言板效果如下图：