转载声明:文章来源https://blog.csdn.net/weixin_51110161/article/details/115876175
前端小白:怎么为你的网页增加评论功能?
小编最近在学html+css+JavaScript,一步步从0开始建立完善专属于我自己的网页。我在我的网页里设置了一个部分是:我的周刊,不定时更新一些我自己感兴趣的时事。
这一天小编突发奇想,其实也不算奇想,没什么创意。当时小编想到何不在我的周刊里设立一个评论区功能呢?虽然此时我的小破站只是一个还在岸边停靠,没有驶向过海洋的小船(翻译成人话就是没上过服务器,只是一个本地网站),但是小编我着实兴奋了一会。
理论存在,即可实现!话不多说,我们开始!
一、工具: 普通电脑记事本即可。
二、编程语言:HTML+CSS+JavaScript。
三、步骤:
1、建立一个HTML文件,用记事本或者其它你们喜欢用的前端软件打开。
2、建立一个HTML网页结构,如下代码(当前什么内容都没有,网页显示一片空白)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <style> /*css样式表位置*/ </style> </head> <body> <!--网页内容区--> </body> <script> //JavaScript位置 </script> </html> |
3、往网页内容区放进去一个评论文本框和一个发送评论按钮。
1 2 3 4 5 | <div> <h1>评论区</h1><hr> <textarea>输入文字</textarea> <button>发送评论</button> </div> |
现在网页的样子就如下图:无样式,按钮无JavaScript效果
4、在添加JavaScript效果前,我先为网页内容区的标签添加id,为添加JavaScript效果做准备:
1 2 3 4 5 6 | <div> <h1>评论区</h1><hr> <textarea id= "typing" >输入文字</textarea> <button id= "btn" >发送评论</button> <div id= "commend" ></div> </div> |
5、添加一丢丢JavaScript效果:
1 2 3 4 5 6 7 | 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功能,再来个显示评论时间的功能吧:很简单,就一行代码
1 | var g= new Date(); //获取时间 |
和send()函数结合,代码如下:
1 2 3 4 5 6 7 8 | 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样式效果,并且调整了一下其它部分(本人大老粗一个,审美不行,请见谅):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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; } |
如下图:
全部代码,我放在这里啦:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!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的评论区里和我讨论哦!如果有什么有趣的想法,小编洗耳恭听。
帖子还没人回复快来抢沙发