首页 >web前端 >js教程 >原生js实现提交评论，显示评论的效果的方法（代码示例）

原生js实现提交评论，显示评论的效果的方法（代码示例）

青灯夜游转载: 2018-10-25 15:20:323200浏览

本篇文章给大家带来的内容是介绍原生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实现提交评论，显示评论的效果的方法（代码示例）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文转载于：cnblogs.com。如有侵权，请联系admin@php.cn删除

上一篇：vue使用原生js实现滚动页面跟踪导航高亮下一篇：es6中Set和Map的对比介绍（附代码）

查看更多