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. faster rcnn源码阅读笔记3

  2. PHPStorm 2018 的安装 汉化 与使用

    下载地址 和安装方法 链接:https://pan.baidu.com/s/1FT8aZoQajw044qlNXkRPfg 提取码:z4sx 配置与使用方法 https://blog.csdn.net ...

  3. 算法练习LeetCode初级算法之排序和搜索

    合并两个有序数组 class Solution { public void merge(int[] nums1, int m, int[] nums2, int n) { System.arrayco ...

  4. 249. Group Shifted Strings把迁移后相同的字符串集合起来

    ［抄题］: Given a string, we can "shift" each of its letter to its successive letter, for exam ...

  5. linux 下安装arm-linux-gnueabi交叉编译器

    1,开发平台 虚拟机:vm12 系统:ubuntu14.04 LTS  32位 2.准备ARM交叉编译工具包 编译uboot和linux kernel都需要ARM交叉工具链支持,这里使用Linaro提 ...

  6. MySQL开发——【联合查询、多表连接、子查询】

    联合查询 所谓的联合查询就是将满足条件的结果进行拼接在同一张表中. 基本语法: select */字段 from 数据表1 union [all | distinct] select */字段 fro ...

  7. Chapter3_操作符_关系操作符

    java中的关系操作符有等于“=”,不等于“!=”,大于“>”,小于“<”,大于等于“≥”,小于等于“≤”等.这些都不再赘述了,有一个有意思的点是关于等价性的讨论. 在java中测试两个对 ...

  8. JavaScript 排序算法

    排序也是在程序中经常用到的算法.无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小.如果是数字,我们可以直接比较,但如果是字符串或者两个对象呢?直接比较数学上的大小是没有意义的,因此,比较的 ...

  9. [uboot] （番外篇）uboot之fdt介绍

    http://blog.csdn.net/ooonebook/article/details/53206623 以下例子都以project X项目tiny210(s5pv210平台,armv7架构)为 ...

  10. canvas画圆环

    <!DOCTYPE html><html> <head> <title> </title> <meta http-equiv=&quo ...