Maison > Article > interface Web > Comment utiliser HTML pour implémenter le style du forum de discussion ? (exemple de code)
Comment utiliser HTML pour implémenter le style du forum de discussion ? (exemple de code)
- 藏色散人original
- 2018-08-11 15:52:3720571parcourir
Cet article vous présente principalement un forum de messages HTML très simple et les opérations de code associées du style de liste de messages HTML. Les forums de discussion sont un élément essentiel de certains portails ou forums, etc.
L'exemple de code spécifique du babillard HTML est le suivant :
<!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>L'effet du babillard HTML ci-dessus est le suivant :
Remarque : saveStorage() obtient la valeur de la zone de texte
getTime() obtient l'horodatage actuel, setItem() utilise l'horodatage comme valeur clé et la valeur de la zone de texte est enregistrée dans la base de données locale en tant que valeur clé
localStorage : une nouvelle balise apparaissant dans html5
stockage local html5
Instruction de base : window.localStorage;
Obtenir : localStorage.getItem(key);
Ajouter : localStorage.setItem(key,value);
Modifier : localStorage.key = "";
Supprimer : localStorage.removeItem(key);
Effacer : localStorage.clear();
[Recommandations d'articles connexes]
Comment créez simplement un forum de messages avec php
Introduction détaillée au code de php pour implémenter la fonction de forum de messages
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!