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. vue项目中使用axios上传图片等文件

    form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据. html代码: <input name="file" type=&q ...

  2. C++ 迭代器的使用和操作

    迭代器是一种检查容器内元素并遍历元素的数据类型.C++更趋向于使用迭代器而不是下标操作,因为标准库为每一种标准容器(如vector)定义了一种迭代器类型,而只用少数容器(如vector)支持下标操作访 ...

  3. VueJs相关命令

    参考: https://www.jianshu.com/p/1626b8643676   安装axios $ npm install axios   如何打包 基于Vue-Cli,通过npm run ...

  4. mysql5.5升级到5.7

    一.首先把mysql服务停止,复制mysql5.5中的data文件夹中的内容(你需要的数据库),放在mysql5.7的data文件夹中; 二.启动切换mysql5.7版本,(我这用的是phpwamp, ...

  5. Java中CountDownLatch和CyclicBarrier

    Java编程思想中的例子import javax.validation.constraints.Size; import java.util.Random; import java.util.conc ...

  6. 688. Knight Probability in Chessboard棋子留在棋盘上的概率

    ［抄题］: On an NxN chessboard, a knight starts at the r-th row and c-th column and attempts to make exa ...

  7. 426. Convert Binary Search Tree to Sorted Doubly Linked List把bst变成双向链表

    ［抄题］: Convert a BST to a sorted circular doubly-linked list in-place. Think of the left and right po ...

  8. Linux驱动之按键驱动编写（中断方式）

    在Linux驱动之按键驱动编写(查询方式)已经写了一个查询方式的按键驱动,但是查询方式太占用CPU,接下来利用中断方式编写一个驱动程序,使得CPU占有率降低,在按键空闲时调用read系统调用的进程可以 ...

  9. Nodejs初识随笔

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. Node.js 单线程运行,不 ...

  10. leveldb 学习记录(五)SSTable格式介绍

    本节主要记录SSTable的结构 为下一步代码阅读打好基础,考虑到已经有大量优秀博客解析透彻 就不再编写了 这里推荐 https://blog.csdn.net/tankles/article/det ...