<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #outside{

                width: 1000px;

                margin: 0 auto;

                border: 1px solid #E7EAEE;

                overflow: hidden;

                padding-bottom: 15px;

            }

            #outside h3{

                width: 95%;

                margin: 15px auto;

                padding-bottom: 10px;

                border-bottom: 1px solid #E7EAEE;

                font-family: "宋体",sans-serif;

            }

            #outside .comment1{

                width: 95%;

                margin: 10px auto;

                color: #BBBBBB;

                font-size: 12px;

                border-bottom: 1px dashed #E7EAEE;

                font-family: "宋体",sans-serif;

            }

            #outside  time{

                float: right;

            }

            #outside .comment1 span{

                color: #5979B2;

                margin-left: 5px;

                font-weight: bold;

            }

            #outside .comment1 p{

                font-size: 16px;

                color: black;

            }

            #outside h4{

                width: 95%;

                margin: 15px auto;

                color: #404E73;

                font-size: 16px;

                font-weight: bold;

                font-family: "宋体",sans-serif;

            }

            #outside #addComment{

                width: 95%;

                margin: 0 auto;

                font-size: 12px;

                color: #BBBBBB;

            }

            #outside #name{

                width: 200px;

                border: 1px solid #D9E2EF;

            }

            #outside #comContent{

                width: 800px;

                height: 100px;

                resize: none;

                border: 1px solid #D9E2EF;

                vertical-align: text-top;

            }

            #outside button{

                width: 100px;

                height: 30px;

                background-color: #2D46A3;

                color: white;

                border: hidden;

                float: right;

                margin: 15px 100px;

            }

        </style>

    </head>

    <body>

        <div id="outside">

            <h3>最新平均</h3>

            <div id="comment">

                <div id="comment1" class="comment1">

                    腾讯网友

                    <span>李二狗</span>

                    <time>2010年10月5日 19:21:12</time>

                    <p>

                        公务员好啊！可以为人民服务！

                    </p>

                </div>

            </div>

            <h4>发表评论</h4>

            <div id="addComment">

                昵&nbsp;&nbsp;&nbsp;&nbsp;称：<input type="text" id="name" />

                <br /><br />

                评论内容:<textarea id="comContent"></textarea>

                <button onclick="addComment()">提交评论</button>

            </div>

        </div>

    </body>

    <script type="text/javascript">

        var idNum = 1;

        function addComment(){

            idNum++;
　　　　　　　//获取input中用户新输入的昵称和评论内容

            var inputValue = document.getElementById("name").value;

            var textValue = document.getElementById("comContent").value;

            //判断是否为空

            if(inputValue==""||textValue==""){

                alert("昵称和评论内容不能为空！！");

                return;

            }

            //获取已有评论的ID

            var comContent1 = document.getElementById("comment1");
　　　　　　　//克隆已有评论的节点，true为包含子节点

            var newComment = comContent1.cloneNode(true);
　　　　　　　//给新克隆的评论设置新的ID

            newComment.setAttribute("id","comment"+idNum);
　　　　　　　//在标签内赋入新的昵称和评论内容

            newComment.getElementsByTagName("span")[0].innerText = inputValue;

            newComment.getElementsByTagName("p")[0].innerText = textValue;

            //将新克隆并新赋值的评论加到原有评论的后面

            var commentDiv = document.getElementById("comment");

            commentDiv.appendChild(newComment);

            document.getElementById("name").value = "";

            document.getElementById("comContent").value = "";

        }

    </script>

</html>

上述代码有一个缺陷，即时间无法更新，之后再来补充修改。基本效果图如下：

评论前：

评论后：

原生JS实现简易评论更新功能的更多相关文章

  1. 原生JS实现简易随机点名功能

    定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...

  2. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  3. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  4. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...

  5. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  6. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  7. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  8. 原生JS实现简易计算器

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 原生JS制作简易Tabs组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. centos 6.8 配置 Redis3.2.5

    配置Redis3.2.5 与 php-redis 一.配置Redis 1.下载Redis3.2.5安装包 [root@zhangsan /] wget http://download.redis.io ...

  2. 移除 iview的Table组件固定两头后box-shadow阴影效果

    .ivu-table-fixed{ box-shadow:0 0 0 #fff; }

  3. C#之事件与eventArgs

    static void Main(string[] args)         {             MyText myText = new MyText();             myTe ...

  4. 队列（FIFO）—循环队列、队列的链式存储

    1 队列的定义 队列是只允许在一端(队尾)进行插入操作,而在另一端(队头)进行删除操作的线性表. 2 队列的特点 1)先进先出是队列最大的特点,是应用中非常常见的模型,例如排队: 2)队列也属于线性表 ...

  5. CentOS7使用yum安装MySQL8.0

    1.yum仓库下载MySQL:sudo yum localinstall https://repo.mysql.com//mysql80-community-release-el7-1.noarch. ...

  6. BZOJ3032 七夕祭

    https://remmina.github.io/BZPRO/JudgeOnline/3032.html 题目 背景 七夕节因牛郎织女的传说而被扣上了「情人节」的帽子.于是TYVJ 今年举办了一次线 ...

  7. Linux 系统从入门到精通的学习大纲；

    以前没有接触过Linux,生产环境需要,有时候遇到问题,百度一下,问题解决了,在遇到问题,在百度,有时候问题是如何解决的,为什么会解决有点丈二的和尚摸不着头脑, 为此,想用一段时间,系统的学习下Lin ...

  8. 机器学习---感知机（Machine Learning Perceptron）

    感知机(perceptron)是一种线性分类模型,通常用于二分类问题.感知机由Rosenblatt在1957年提出,是神经网络和支持向量机的基础.通过修改损失函数,它可以发展成支持向量机:通过多层堆叠 ...

  9. [BJOI2019]排兵布阵（动态规划）

    [BJOI2019]排兵布阵(动态规划) 题面 洛谷 题解 暴力dp: 设\(f[i][j]\)表示考虑到了第\(i\)座城市用了\(j\)人的最大收益,枚举在这个城市用多少人就可以了. 优化: 发现 ...

  10. CF1157A-Reachable Numbers题解

    原题地址 题目大意:有一个函数\(f(x)\),效果是将\(x+1\)后,去掉末尾所有的\(0\),例如: \(f(599)=6\),因为\(599+1=600→60→6\) \(f(7)=8\),因 ...