ネイティブ js は、コメントを送信し、コメントの効果を表示するメソッドを実装します (コード例)-jsチュートリアル-php.cn

ネイティブ js は、コメントを送信し、コメントの効果を表示するメソッドを実装します (コード例)

青灯夜游

リリース： 2018-10-25 15:20:32

転載

3175 人が閲覧しました

この記事の内容は、ネイティブjsでコメントを投稿しコメントの効果を表示する方法（コード例）を紹介するものです。困っている友人は参考にしていただければ幸いです。

<!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>

ログイン後にコピー

レンダリング:

ネイティブ js は、コメントを送信し、コメントの効果を表示するメソッドを実装します (コード例)