前端小白：怎么为你的网页增加评论功能？（一） |
您所在的位置：网站首页 › 去拉萨说说评论怎么写 › 前端小白：怎么为你的网页增加评论功能？（一） |
前端小白：怎么为你的网页增加评论功能？（一）
|
前端小白：怎么为你的网页增加评论功能？
小编最近在学html+css+JavaScript，一步步从0开始建立完善专属于我自己的网页。我在我的网页里设置了一个部分是：我的周刊，不定时更新一些我自己感兴趣的时事。 这一天小编突发奇想，其实也不算奇想，没什么创意。当时小编想到何不在我的周刊里设立一个评论区功能呢？虽然此时我的小破站只是一个还在岸边停靠，没有驶向过海洋的小船（翻译成人话就是没上过服务器，只是一个本地网站），但是小编我着实兴奋了一会。 理论存在，即可实现！话不多说，我们开始！ 一、工具： 普通电脑记事本即可。 二、编程语言：HTML+CSS+JavaScript。 三、步骤： 1、建立一个HTML文件，用记事本或者其它你们喜欢用的前端软件打开。 2、建立一个HTML网页结构，如下代码（当前什么内容都没有，网页显示一片空白）。 /*css样式表位置*/ //JavaScript位置3、往网页内容区放进去一个评论文本框和一个发送评论按钮。 评论区 输入文字 发送评论现在网页的样子就如下图：无样式，按钮无JavaScript效果 5、添加一丢丢JavaScript效果： document.getElementById("btn").onclick=function(){send()};//设置按钮触发事件（函数send（）） function send(){ var value= document.getElementById("typing").value;//获得文本框里的内容 var p= document.createElement("p");//创建新元素，也即结点 p.innerHTML=''+value;//往结点里塞内容 document.getElementById("commend").prepend(p); 向指定内容（此处是id"commend"）里添加子节点，作为第一个结点。 }添加上面代码后，效果如下图：虽然有点简陋，但已基本实现评论功能。 和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=''+value+''+g.toUTCString();//往结点里塞内容 document.getElementById("commend").prepend(p); 向指定内容（此处是id"commend"）里添加子节点，作为第一个结点。 }现在效果如下图：
如下图： 四、总结 最后小编，还在想能不能实现评论文本保留的功能。但是上网一番了解后，才知道，实现这个要先实现服务器、数据库的功能。那评论区也只能先做到这一步了，没关系，我们来日方长！ 如果有问题的话，可以私聊小编或者在csdn我的blog的评论区里和我讨论哦！如果有什么有趣的想法，小编洗耳恭听。 |
4、在添加JavaScript效果前，我先为网页内容区的标签添加id，为添加JavaScript效果做准备：
再多亿些些JavaScript功能，再来个显示评论时间的功能吧：很简单，就一行代码
6、添加一丢丢CSS样式效果，并且调整了一下其它部分（本人大老粗一个，审美不行，请见谅）：
全部代码，我放在这里啦：【本文地址】
今日新闻 |
推荐新闻 |