ホームページ > 記事 > ウェブフロントエンド > HTML を使用して掲示板スタイルを実装するにはどうすればよいですか? (コード例)
HTML を使用して掲示板スタイルを実装するにはどうすればよいですか? (コード例)
- 藏色散人オリジナル
- 2018-08-11 15:52:3720570ブラウズ
この記事では主に、非常に単純な 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('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>上記の HTML メッセージ ボードの効果は次のとおりです:
注: saveStorage() は textarea の値を取得します
getTime() は現在のタイムスタンプを取得し、setItem( ) タイムスタンプをキー値として、textarea 値をキー値のコンテンツとしてローカル データベースに保存します
localStorage: html5
html5 ローカル ストレージに表示される新しいラベル
Basicステートメント: window.localStorage;
取得: localStorage.getItem(key);
以上がHTML を使用して掲示板スタイルを実装するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。