ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML を使用して掲示板スタイルを実装するにはどうすればよいですか? (コード例)
この記事では主に、非常に単純な 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 サイトの他の関連記事を参照してください。