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. 微信小程序页面跳转 的几种方式

    最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式 一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面” 类 ...

  2. 连续子数组最大和(python)

    题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向量 ...

  3. 命名空间 extern的用法 static全局变量

    std是标准库中的命名空间: 关于extern的用法可以参考文献http://blog.163.com/sunjinxia%40126/blog/static/94984879201312145021 ...

  4. 863. All Nodes Distance K in Binary Tree 到制定节点距离为k的节点

    ［抄题］: We are given a binary tree (with root node root), a target node, and an integer value K. Retur ...

  5. 24. Swap Nodes in Pairs 链表每2个点翻转一次

    ［抄题］: Given a linked list, swap every two adjacent nodes and return its head. Example: Given 1->2 ...

  6. React-router4 第六篇 No Match 404

    https://reacttraining.com/react-router/web/example/no-match react-router-dom 又一个新属性 Switch 在Switch 的 ...

  7. Hadoop学习之路（二十三）MapReduce中的shuffle详解

    概述 1.MapReduce 中,mapper 阶段处理的数据如何传递给 reducer 阶段,是 MapReduce 框架中 最关键的一个流程,这个流程就叫 Shuffle 2.Shuffle: 数 ...

  8. 使用sublime 正则匹配替换大批量代码

    1,在使用Django框架时,导入之前没有使用框架完成的网页,这时会遇到静态文件地址不匹配的问题,需要大量修改. 研究了一下sublime编译器,大家都使用正则匹配替换 2,位置在查找--替换与匹配, ...

  9. git stash错误小记

    git出错小记 想要push代码,我们经常这样做. 1.查看状态 git status 2.隐藏本地编辑的新内容 git stash 3.拉远程的代码 git pull 这一步操作有的时候会报错,没有 ...

  10. SQL SERVER 小语法

    1. 取字段长度:len select * from 表名 where len(expmessage)=1 2.rtrim, ltrim rtrim(ObjectName)