1. 实现代码：

    <!DOCTYPE html>
    
<html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>Document</title>
    
        <style>
    
           *{
    
               padding: 0;
    
               margin: 0;
    
               list-style: none;
    
           }
    
           #header{
    
               position: relative;
    
               width: 800px;
    
               border:1px solid #ccc;
    
               padding-top: 30px;
    
               margin:100px auto;
    
               background-color: pink;
    
               box-shadow: 0 0 10px darkblue;
    
           }
    
           .tip{
    
               position: absolute;
    
               top: 5px;
    
               left: 10px;
    
           }
    
           #top #btn{
    
               position:absolute;
    
               top: 0;
    
               right: 100px;
    
               margin-top: 5px;
    
               width: 30px;

           }
    
           #my_textarea{
    
           width: 80%;
    
           height: 150px;
    
           margin-left: 50px;
    
           box-shadow: 0 0 15px black;
    
           color: black;
    
           font-weight: bolder;
    
           font-size: 16px;
    
           opacity: 0.2;
    
           z-index: 1;
    
           }
    
           #top{
    
               margin-bottom: 20px;
    
           }
    
          #bottom ul{
    
               margin: 0 80px;
    
               margin-bottom:20px;
    
           }
    
           #bottom ul li{
    
               border-bottom: 1px dashed #ccc;
    
               line-height: 44px;
    
               color: red;
    
           }
    
           #bottom ul li a{
    
               cursor: pointer;
    
               float:right;
    
           }
    
        </style>
    
    </head>
    
    <body>
    
        <div id="header">
    
           <div id="top">
    
              <label class="tip" for="my_textarea">发表评论:</label>
    
              <textarea cols="60" rows="10" id="my_textarea"></textarea>
    
              <button id="btn">发表</button>
    
           </div>
    
           <div id="bottom">
    
              <ul id="ul"></ul>
    
           </div>
    
        </div>
    
        <script>
    
             window.onload=function(){
    
                 $("btn").onclick=function(){
    
                     //alert("0");
    
                     // 用一个变量来接收输入的内容
    
                     var content=$("my_textarea").value;
    
                     //console.log(content);
    
                     //判断当输入的内容为空时,提示用户输入评论的内容
    
                     if(content.length===0){
    
                         alert('请输入评论的内容！');
    
                         return;
    
                     }

                     //创建一个li标签动态的插入ul中
    
                     var li=document.createElement("li");
    
                     li.innerHTML=content+'<a href="javascript:;">删除</a>';
    
                     /*
    
                     //将创建的li标签插入到ul标签中；
    
                     $("ul").appendChild(li);
    
                     */
    
                    //将新    输入的内容放在第一条
    
                    $("ul").insertBefore(li,$("ul").children[0]);

                     //清除输入框中的内容；
    
                     $("my_textarea").value='';

                     //删除评论内容
    
                     //1.获取a标签，监听a标签的点击事件
    
                     var aAll=$("ul").getElementsByTagName("a");
    
                     //console.log(aAll);
    
                    for(var i=0;i<aAll.length;i++){
    
                        var a=aAll[i];
    
                        a.onclick=function(){
    
                            //alert(1);
    
                            //获取父标签删除
    
                            this.parentNode.remove();
    
                        }

                    }
    
                 }
    
             }
    
             function $(id){
    
                 return typeof id==="string"?document.getElementById(id):null;
    
             }
    
        </script>
    
    </body>
    
</html>

    2.实现效果图：

JS特效实现微博评论逻辑的更多相关文章

  1. 如何科学地蹭热点：用python爬虫获取热门微博评论并进行情感分析

    前言:本文主要涉及知识点包括新浪微博爬虫.python对数据库的简单读写.简单的列表数据去重.简单的自然语言处理(snowNLP模块.机器学习).适合有一定编程基础,并对python有所了解的盆友阅读 ...

  2. vue教程2-07 微博评论功能

    vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  3. js特效 15个小demo

    js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title> ...

  4. 滚动变色的文字js特效

    Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 查看效果:http://keleyi.com/ ...

  5. 150个JS特效脚本

    收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...

  6. <一>初探js特效魅力之全选不选反选04

    初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...

  7. <一>初探js特效魅力之选项卡05

    初探js特效魅力05 接下来为大家介绍的选项卡的切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  8. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  9. 研究分析JS中的三种逻辑语句

    JS中的三种逻辑语句:顺序.分支和循环语句. 一.顺序语句 代码规范如下:1. <script type="text/javascript"> var a = 10;  ...

随机推荐

  1. Django_models下划线__正反查询,对象正反查询

    1.我们使用models对数据库进行查询的时候,想去拿到结果的时候有时直接使用".字段",有时是'[0].字段',区别就是我们使用的语句返回的到底是一个对象还是列表: obj=mo ...

  2. 编译wiredtiger rpm包

    1.安装rpm-build 使用rpmbuild打包rpm包前,首先安装rpmbuild: yum install rpm-build -y 2.创建打包文件目录 mkdir  -p  /root/r ...

  3. day37 异步回调和协程

    异步回调 """ 异步任务使用场景 爬虫 1.从目标站点下载网页数据 本质就是HTML格式字符串 2.用re从字符串中提取出你需要的数据 ""&quo ...

  4. cobbler的ks文件带有特殊字符导致错误

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAykAAACWAQMAAADg0FUUAAAAAXNSR0IArs4c6QAAAAZQTFRFq6urAA

  5. C++类有继承时，析构函数必须为虚函数

    C++类有继承时,析构函数必须为虚函数.如果不是虚函数,则使用时可能存在内在泄漏的问题. 假设我们有这样一种继承关系: 如果我们以这种方式创建对象: SubClass* pObj = new SubC ...

  6. Yii2增删改查

    Controller <?php namespace frontend\controllers; use frontend\models\User; use yii\data\Paginatio ...

  7. 利用redis制作消息队列

    redis在游戏服务器中的使用初探(一) 环境搭建redis在游戏服务器中的使用初探(二) 客户端开源库选择redis在游戏服务器中的使用初探(三) 信息存储redis在游戏服务器中的使用初探(四) ...

  8. Django手册

    Django教程 Python一直是我最喜欢的语言,在Django和Tornado之间我选择了前者,没有特别的原因,网上人云亦云的,肯定不会有一方离另一方差很远,我就直接去看了看Github上两个项目 ...

  9. 在datasnap 中使用unidac 访问数据（服务器端）

    从delphi 6 开始,datasnap 作为delphi 自带的多层框架,一直更新到最新的delphi 10.3 .同时逐步增加了很多新的功能 ,比如支持REST 调用,支持 IIS ,apach ...

  10. SAS 输入与输出格式

    SAS 输入与输出格式 一.认识SAS中的数据格式 SAS 中的格式有: 数字型 字符型 日期型 1.其中数字型的格式有一下集中表示方式: 整型数值:321 浮点数值:321.123 带逗号的数值:1 ...