How to use html to implement message board style? (code example)-HTML Tutorial-php.cn

How to use html to implement message board style? (code example)

藏色散人

Release： 2018-08-11 15:52:37

Original

20598 people have browsed it

This article mainly introduces you to a very simple HTML message board and related code operations of html message list style. Message boards are an essential part of some portals or forums, etc.

The specific code example of the HTML message board is as follows:

<!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>

Copy after login

The effect of the above HTML message board is as follows:

How to use html to implement message board style? (code example)

Note: saveStorage() gets the value of textarea
getTime() gets the current timestamp, setItem() uses the timestamp as the key value, and the value of textarea is saved in the local database as the key value

localStorage: the new label that appears in html5

html5 local storage

Basic statement: window.localStorage;

Get: localStorage.getItem(key);

Add: localStorage.setItem(key,value);

Modify: localStorage.key = "";

Delete: localStorage.removeItem(key);

Clear: localStorage.clear();

[Related article recommendations]

How to simply create a message board with php

Detailed introduction to the code for php to implement the message board function

The above is the detailed content of How to use html to implement message board style? (code example). For more information, please follow other related articles on the PHP Chinese website!