Heim > Artikel > Web-Frontend > Wie verwende ich HTML, um den Message-Board-Stil zu implementieren? (Codebeispiel)
Wie verwende ich HTML, um den Message-Board-Stil zu implementieren? (Codebeispiel)
- 藏色散人Original
- 2018-08-11 15:52:3720518Durchsuche
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('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>Die Wirkung des obigen HTML-Messageboards ist wie folgt:
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!