Native js implémente des méthodes pour soumettre des commentaires et afficher les effets des commentaires (exemple de code)-js tutoriel-php.cn

Native js implémente des méthodes pour soumettre des commentaires et afficher les effets des commentaires (exemple de code)

青灯夜游

Libérer： 2018-10-25 15:20:32

avant

3174 Les gens l'ont consulté

Ce que cet article vous apporte, c'est de présenter la méthode de soumission des commentaires et d'afficher l'effet des commentaires en js natif (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>

        #box{
            width: 900px;
            margin: 0 auto;
        }
        #text{
            width: 900px;
            height: 400px;
            margin: 0 auto;
            background-color: #fbe1c8;
            margin-top: 60px;
            outline: none;
            border-radius: 8px;
            border:2px solid #e59a56;
            overflow: hidden;
        }
        #tup{
            float: right;
            display: block;
            margin-top: 10px;
            margin-left: 20px;
            width: 60px;
            height: 36px;
            background-color: #e69b57;
            font-size: 18px;
            line-height: 36px;
            border-radius: 6px;
            text-align: center;
            color: #ffffff;
            cursor:pointer;
        }
        #wad{
            margin-top: 60px;
            width: 880px;
        }
        #wad p{
            font-size: 18px;
            line-height: 24px;
            border-bottom: 1px dashed #e69b57;
            word-wrap: break-word;
        }

    </style>
</head>
<body>
    <div id="box">
        <div id="text" contenteditable="true"></div>
        <span id="tup">提交</span>
        <div id="wad"></div>
    </div>
    <script>
        let Text = document.getElementById(&#39;text&#39;),
            Tup = document.getElementById("tup"),
            Pl = document.getElementById("wad");
        Tup.onclick = function(){
                Li = "<p>" + Text.innerHTML + "</p>";
                Text.innerHTML = "";
                Pl.innerHTML += Li ;
            }

    </script>
</body>
</html>

Copier après la connexion

Rendu :

Native js implémente des méthodes pour soumettre des commentaires et afficher les effets des commentaires (exemple de code)