Home >Web Front-end >HTML Tutorial >How to use html to implement message board style? (code example)

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

藏色散人Original: 2018-08-11 15:52:3720624browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement html video insertion and display in the page? (example)Next article：How to implement html video insertion and display in the page? (example)

See more

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

Related articles