Rumah > Artikel > hujung hadapan web > html怎么操作来实现留言板样式？（代码示例）

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

藏色散人asal: 2018-08-11 15:52:3720576semak imbas

本篇文章主要给大家介绍一个非常简单的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(&#39;memo&#39;)" />
<input type="button" value="初始化" onclick="clearStorage(&#39;msg&#39;)" />
<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(&#39;msg&#39;);
    }

    function loadStorage(id) {
        var result = &#39;<table border="1">&#39;;
        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 += &#39;<tr><td>&#39; + value + &#39;</td><td>&#39; + datestr + &#39;</td></tr>&#39;
        }
        result += &#39;</table>&#39;;
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实现留言板功能的代码详细介绍

Atas ialah kandungan terperinci html怎么操作来实现留言板样式？（代码示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：如何在页面中实现html视频插入显示？（示例）Artikel seterusnya：html页面中友情链接怎么进行添加设置？（代码示例）

Artikel berkaitan

Lihat lagi