Comment utiliser HTML pour implémenter le style du forum de discussion ? (exemple de code)-tutoriel HTML-php.cn

Comment utiliser HTML pour implémenter le style du forum de discussion ? (exemple de code)

藏色散人

Libérer： 2018-08-11 15:52:37

original

20591 Les gens l'ont consulté

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(&#39;memo&#39;)" />
<input type="button" value="初始化" onclick="clearStorage(&#39;msg&#39;)" />
<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(&#39;msg&#39;);
    }

    function loadStorage(id) {
        var result = &#39;<table border="1">&#39;;
        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 += &#39;<tr><td>&#39; + value + &#39;</td><td>&#39; + datestr + &#39;</td></tr>&#39;
        }
        result += &#39;</table>&#39;;
var target = document.getElementById(id);
        target.innerHTML = result;
    }

    function clearStorage() {
        localStorage.clear();
        console.log("清除完毕");
    }
</script>
</body>
</html>

Copier après la connexion

L'effet du babillard HTML ci-dessus est le suivant :

Comment utiliser HTML pour implémenter le style du forum de discussion ? (exemple de code)

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!