Wie verwende ich HTML, um den Message-Board-Stil zu implementieren? (Codebeispiel)-HTML-Tutorial-php.cn

Wie verwende ich HTML, um den Message-Board-Stil zu implementieren? (Codebeispiel)

藏色散人

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

Original

20591 Leute haben es durchsucht

Dieser Artikel führt Sie hauptsächlich in ein sehr einfaches HTML-Messageboard und verwandte Codeoperationen im HTML-Nachrichtenlistenstil ein. Message Boards sind ein wesentlicher Bestandteil einiger Portale oder Foren usw.

Das spezifische Codebeispiel des HTML-Messageboards ist wie folgt:

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

Nach dem Login kopieren

Die Wirkung des obigen HTML-Messageboards ist wie folgt:

Wie verwende ich HTML, um den Message-Board-Stil zu implementieren? (Codebeispiel)

Hinweis: saveStorage() ruft den Wert des Textbereichs ab
getTime() ruft den aktuellen Zeitstempel ab, setItem() verwendet den Zeitstempel als Schlüsselwert und den Wert des textarea wird in der lokalen Datenbank als Schlüsselwert gespeichert

localStorage: ein neues Tag, das in HTML5 erscheint

HTML5-Lokalspeicher

Grundlegende Anweisung: window.localStorage;

Get: localStorage.getItem(key);

Hinzufügen: localStorage.setItem(key,value);

Ändern: localStorage.key = "";

Löschen: localStorage.removeItem(key);

Löschen: localStorage.clear();

[Empfehlungen für verwandte Artikel]

Wie man es einfach macht ein Message Board mit PHP

Detaillierte Einführung in den PHP-Code zur Implementierung der Message Board-Funktion

Das obige ist der detaillierte Inhalt vonWie verwende ich HTML, um den Message-Board-Stil zu implementieren? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!