正文

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

panda多读书  2022-02-10  321

关键词：

<!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实现简易转盘抽奖(代码片段)

...快乐。大家好，我是Counter。本章带大家来简单的了解下原生JS实现转盘抽奖。因为主要涉及到JS，在这里HTML和CSS起到的功能就没有那么重要，因此，没有过多的阐述HTML与CSS，而JS基本每行都有注释，但这里CSS也是起到了至关重要... 查看详情

原生js实现简易打字游戏

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metanam 查看详情

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

利用css+原生js制作简单的钟表。效果如下所示实现该效果，分三大块：html、javascript、csshtml部分html部分比较简单，定义一个clock的div，内部有原点、时分秒针、日期以及时间，至于钟表上的刻度、数字等元素，因为量比较多... 查看详情

博客valine评论样式美化

...的评论系统，目前很多静态博客如Hexo、Jekyll、Hugo等等都原生支持Valine，我使用的halo博客由于自带评论系统的表情包功能很让我抓狂（等于没有），所以我仍然选择继续使用Valine（我不会说是因为我不想放弃攒了一年的评论的）... 查看详情

原生js实现百度搜索功能

今天呢给大家分享一下自己用原生JS做的一个百度搜索功能，下面上代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><linkrel="shortcuticon"href="https://www.baidu.com/favicon.ico"type=" 查看详情

原生js实现简易扫雷游戏(代码片段)

注：使用了FontAwesome 字体图标库，使用前请下载引入(下载地址）<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metana... 查看详情

原生js实现简易打字游戏

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><ti... 查看详情

原生js实现vue组件功能

...情况下，我们一直在惊叹于VUE的组件的功能，却不知道，原生js早就已经支持了这个功能。最近在公开课学到的，js还有很多很多需要探索学习。下面是一个简单的例子<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title... 查看详情

原生js和jquery代码编写窗口捕捉函数和页面视觉差效果（scroll（）offsettop滚动监听的妙用）

　　想实现窗口滚动到一定位置时，部分网页的页面发生一些变化，但是手头没有合适的插件，所以就想到自己编写一个简易的方法，想到这个方法要有很高的自由度和适应性，在这，就尽量的削减其功能，若有错误的地方或者... 查看详情

原生js实现拖动功能

代码：1functiondrag(id){23varobj=document.getElementById(id),4resultX=0,5resultY=0;67functiongetPos(t){8varoffsetLeft=0,9offsetTop=0,10offsetParent=t;1112while(offsetParent){13offsetLeft+=offsetParent.of 查看详情

实现简单的评论区功能(代码片段)

题述：使用Node.js实现评论区功能，效果如下图。每条评论需要动态修改的部分为楼层号（如#6），时间戳（如2018-08-1311:30），评论内容；昵称和客户端提示不必修改。要求将评论数据存入文件中。实现所需的文件的目录... 查看详情

原生js实现购物车相关功能

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>实现购物车的相关功能</title><style>*{margin:0;padding:0;}table{width:600px;border-collapse:collapse;}th,t 查看详情

原生js实现table表格的各行变色功能

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>原生js实现各行变色</title><style>*{margin:0;padding:0;}#studentCore{width:300px;margin:0auto;}table{bor 查看详情

原生js实现ajax的文件异步提交功能图片预览功能.实例

<%--CreatedbyIntelliJIDEA.User:yhDate:2016/12/14Time:17:13TochangethistemplateuseFile|Settings|FileTemplates.--%><%@pagecontentType="text/html;charset=UTF-8"language="java"%><%@includef 查看详情

mock.js简易教程，脱离后端独立开发，实现增删改查功能

...模拟后台数据，但是很局限，比如增删改查这些接口怎么实现呢，于是今天我们来介绍一款非常强大的插件Mock.js，可以非常方便的模拟后端的数据，也可以轻松的查看详情

vue使用websocket模拟实现聊天功能-简易版(代码片段)

vue使用WebSocket模拟实现聊天功能-简易版效果展示两个浏览器相互模拟1.创建模拟node服务在vue根目录下创建server.js文件模拟后端服务器**在server终端目录下载**npminstall--sws2.编写server.js文件代码如下varuserNum=0;//统计在线人数varchat... 查看详情

如何为electron应用实现一个简易的更新功能(代码片段)

官方其实已经提供了几种很便捷的方案：https://www.electronjs.org/docs/tutorial/updates但是不是需要github，就是需要搭建一个服务端，因为我们的场景很小，electron只是一个壳，所以更新的需求不强烈，只是一个以... 查看详情

原生js实现购物车功能

html<divclass="catbox"><tableid="cartTable"><thead><tr><th><label><inputclass="check-allcheck"type="checkbox">  全选</label></th>& 查看详情