原生JS实现简易评论更新功能

<!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>

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

评论前:

评论后:

时间: 2024-11-10 18:58:56

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

原生JS实现简易轮播图

原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = function() { var tab = 0; var loop_imgs = new Array("img/l1.jpg", "img/l2.jpg", "img/l3.jpg", "img/l4.jpg", "img/l5

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

在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边开始写代码了: HTML代码: <ul> <li class="click">red</li> <li>blue</li> <li>yellow</li> </ul> <div class

原生JS实现简易转盘抽奖

我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述HTML与CSS,而JS基本每行都有注释,但这里CSS 也是起到了至关重要的一步,那就是控制背景色,以及结果的显示与隐藏,效果先给出,如下: 代码给出: <!DOCTYPE html> <html lang="zh"> <head> <meta ch

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

利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet' h

原生js实现简易ATM功能

简易ATM 题目描述: 里面现存100块钱. 如果存钱,就用输入的钱数加上先群的钱,然后弹出余额. 如果取钱,就减去取的钱,然后显示余额. 如果显示余额,就显示余额. 如果退出,就进行判断再退出. <script> var money = 100; var moneySum = 0; var num = parseInt(prompt('请输入你的操作:' + '\n' + '1.存钱' + '\n' + '2.取钱' + '\n' + '3.显示余额' + '\n' + '4.退出'));;

原生JS实现简易计算器

<!doctype html> <html> <head> <meta charset="utf-8"> <title>简易计算器</title> <style> #div{ width: 300px; height: 500px; background: #ccc; margin: auto; border: 1px solid red; } table{ width: 97%; height: 48

原生js库,持续更新中……

//元素获取 function $(v){ if(typeof v==='function') { return window.onload=v} else if( typeof v==='object') { return v} else if( typeof v==='string') { return document.getElementById(v)} } //获取样式 注意事项:不能或许未设定的样式,不能有空格,只能或许单一样式 function getStyle(obj,attr)

js 实现简易留言板功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

原生js简易日历效果实现

这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <div class="container_cont"> <ul id="cont_ul"> <li class="active"> <span>1</span> <p>jan</p&