【校招VIP】前端小白：怎么为你的网页增加评论功能？（一）- 校招VIP

转载声明：文章来源https://blog.csdn.net/weixin_51110161/article/details/115876175

前端小白：怎么为你的网页增加评论功能？

小编最近在学html+css+JavaScript，一步步从0开始建立完善专属于我自己的网页。我在我的网页里设置了一个部分是：我的周刊，不定时更新一些我自己感兴趣的时事。

这一天小编突发奇想，其实也不算奇想，没什么创意。当时小编想到何不在我的周刊里设立一个评论区功能呢？虽然此时我的小破站只是一个还在岸边停靠，没有驶向过海洋的小船（翻译成人话就是没上过服务器，只是一个本地网站），但是小编我着实兴奋了一会。

理论存在，即可实现！话不多说，我们开始！

一、工具：普通电脑记事本即可。

二、编程语言：HTML+CSS+JavaScript。

三、步骤：

1、建立一个HTML文件，用记事本或者其它你们喜欢用的前端软件打开。

2、建立一个HTML网页结构，如下代码（当前什么内容都没有，网页显示一片空白）。

<!DOCTYPE html>
 <html>
    <head>
        <meta charset = "utf-8" />

        <style>
            /*css样式表位置*/
        </style>

    </head>

    <body>
        <!--网页内容区-->
    </body>
    
    <script>
        //JavaScript位置
    </script>
</html>

3、往网页内容区放进去一个评论文本框和一个发送评论按钮。

<div>
            <h1>评论区</h1><hr>
            <textarea>输入文字</textarea>
            <button>发送评论</button>
        </div>

现在网页的样子就如下图：无样式，按钮无JavaScript效果

4、在添加JavaScript效果前，我先为网页内容区的标签添加id，为添加JavaScript效果做准备：

<div>
            <h1>评论区</h1><hr>
            <textarea id="typing">输入文字</textarea>
            <button id="btn">发送评论</button>
            <div id="commend"></div>
        </div>

5、添加一丢丢JavaScript效果：

document.getElementById("btn").onclick=function(){send()};//设置按钮触发事件（函数send（））
        function send(){
            var value= document.getElementById("typing").value;//获得文本框里的内容
            var p= document.createElement("p");//创建新元素，也即结点
            p.innerHTML='<hr>'+value;//往结点里塞内容
            document.getElementById("commend").prepend(p); 向指定内容（此处是id"commend"）里添加子节点，作为第一个结点。
        }

添加上面代码后，效果如下图：虽然有点简陋，但已基本实现评论功能。

再多亿些些JavaScript功能，再来个显示评论时间的功能吧：很简单，就一行代码

var g=new Date(); //获取时间

和send()函数结合，代码如下：

document.getElementById("btn").onclick=function(){send()};//设置按钮触发事件（函数send（））
        function send(){
            var g=new Date();//获取时间
            var value= document.getElementById("typing").value;//获得文本框里的内容
            var p= document.createElement("p");//创建新元素，也即结点
            p.innerHTML='<hr>'+value+'<br>'+g.toUTCString();//往结点里塞内容
            document.getElementById("commend").prepend(p); 向指定内容（此处是id"commend"）里添加子节点，作为第一个结点。
        }

现在效果如下图：

6、添加一丢丢CSS样式效果，并且调整了一下其它部分（本人大老粗一个，审美不行，请见谅）：

body{
                display: flex;
                flex-direction: column;
                align-items: center;
                background-color: rgb(117, 113, 113);
                color: white;
            }
            #main{
                flex: 1;
                width: 60%;
            }
            #typing{
                flex: 1;
                width: 60%;
                height: 20vh;
                border: red;
                font-size:xx-large;
            }
            #commend{
                flex: 1;
                width: 80%;
            }
            #btn{
                background-color: red;
            }
            p{
                background-color:black;
            }

如下图：

全部代码，我放在这里啦：

<!DOCTYPE html>
    <head>
        <meta charset = "utf-8" />

        <style>
            body{
                display: flex;
                flex-direction: column;
                align-items: center;
                background-color: rgb(117, 113, 113);
                color: white;
            }
            #main{
                flex: 1;
                width: 60%;
            }
            #typing{
                flex: 1;
                width: 60%;
                height: 20vh;
                border: red;
                font-size:xx-large;
            }
            #commend{
                flex: 1;
                width: 80%;
            }
            #btn{
                background-color: red;
            }
            p{
                background-color:black;
            }
        </style>

    </head>

    <body>
        <div id="main">
            <h1>评论区</h1><hr>
            <textarea id="typing">输入文字</textarea>
            <button id="btn">发送评论</button>
            <div id="commend"></div>
        </div>
    </body>

    <script>
        document.getElementById("btn").onclick=function(){send()};
        function send(){
            var g=new Date();
            var value= document.getElementById("typing").value;
            var p= document.createElement("p");
            p.innerHTML="用户："+value+'<hr>'+g.toUTCString();
            document.getElementById("commend").prepend(p);
        }
    </script>
</html>

四、总结

最后小编，还在想能不能实现评论文本保留的功能。但是上网一番了解后，才知道，实现这个要先实现服务器、数据库的功能。那评论区也只能先做到这一步了，没关系，我们来日方长！

如果有问题的话，可以私聊小编或者在csdn我的blog的评论区里和我讨论哦！如果有什么有趣的想法，小编洗耳恭听。