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_Form验证(一)

    Django为我们提供了一个模板来做Form验证,不需要我们再去写复杂的验证代码了 简单的提交信息html页面: <form action="/fff/Form" metho ...

  2. hive的常用操作

    1.hive的数据类型 tinyint/smallint/int/bigint tinyint:从 0 到 255 的整型数据 smallint:从 0 到 65535 的整型数据 int:从 0 到 ...

  3. windows下webstorm调试react native

    安装请参考:http://www.cnblogs.com/wjx0912/p/5662457.html webstorm在2016.10.20的版本才正式增加react native的调试支持,所以w ...

  4. [费用流][BZOJ1070]修车

    修车 题目描述 同一时刻有位车主带着他们的爱车来到了汽车维修中心.维修中心共有M位技术人员,不同的技术人员对不同的车进行维修所用的时间是不同的.现在需要安排这M位技术人员所维修的车及顺序,使得顾客平均 ...

  5. JAVAC 命令详解

    转自:http://jeffchen.iteye.com/blog/395671 结构 javac [ options ] [ sourcefiles ] [ @files ] 参数可按任意次序排列. ...

  6. xbeePROS1发送的数据在802.15.4网络中有多大时延？

    完整的计算过程请参考Digi官方网站的文章:Sending data through an 802.15.4 network latency timing. Digi的S1模块可以跑802.15.4固 ...

  7. hadoop启动

    安装完hadoop集群之后,第一次启动之前必须初始化,之后就可以不用再初始化(注意:初始化操作只可以一次) hdfs namenode -format (hadoop namenode -format ...

  8. form表单保存和取出

    function saveConfig() { var configName = document.title; if (!localStorage) return; var Config = {}; ...

  9. Python开发——3.基本数据类型之列表、元组和字典

    一.列表(list) 1.列表的格式 li = [11,22,"kobe",["lakers","ball",11],(11,22,),{& ...

  10. 居于H5的多文件、大文件、多线程上传解决方案

    文件上传在web应用中是比较常见的功能,前段时间做了一个多文件.大文件.多线程文件上传的功能,使用效果还不错,总结分享下. 一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件进行上传: 支 ...