Home > Article > Web Front-end > 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:3720576browse
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('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>The effect of the above HTML message board is as follows:
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!