네이티브 js는 댓글을 제출하고 댓글의 효과를 표시하는 메서드를 구현합니다(코드 예).-JS 튜토리얼-php.cn

네이티브 js는 댓글을 제출하고 댓글의 효과를 표시하는 메서드를 구현합니다(코드 예).

青灯夜游

풀어 주다： 2018-10-25 15:20:32

앞으로

3191명이 탐색했습니다.

본 글의 내용은 네이티브 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는 댓글을 제출하고 댓글의 효과를 표시하는 메서드를 구현합니다(코드 예).