Native js implements methods to submit comments and display the effects of comments (code example)-JS Tutorial-php.cn

Native js implements methods to submit comments and display the effects of comments (code example)

青灯夜游

Release： 2018-10-25 15:20:32

forward

3204 people have browsed it

The content of this article is to introduce the method of submitting comments and displaying the effect of comments in native js (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

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

Copy after login

Rendering:

Native js implements methods to submit comments and display the effects of comments (code example)

The above is the detailed content of Native js implements methods to submit comments and display the effects of comments (code example). For more information, please follow other related articles on the PHP Chinese website!