现在很多类似以微博发布动态的效果，下面为一个用 JavaScript写的小小的类似微博发布信息的案例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>微博发布</title>

     <style type="text/css">

         *{

             padding: 0;

             margin: 0;

         }

         ul {

             list-style: none;

         }

         .box {

             width: 600px;

             height: auto;

             border: 1px solid #ccc;

             margin: 100px auto;

             text-align: center;

             padding: 30px 0;

             background-color: rosybrown;

         }

         .box textarea {

             width: 450px;

             resize: none; /*设置文本不能过拖动*/

         }

         .box li {

             width: 450px;

             line-height: 30px;

             border-bottom: 1px dashed #ccc;

             margin-left: 80px;

             text-align: left;

         }

         .box li a {

             float: right;

         }

     </style>

     <script type="text/javascript">

         window.onload = function (){

             //获取数组的第一个

             var btn = document.getElementsByTagName("button")[0];

             var txt = document.getElementsByTagName("textarea")[0];

             var ul = document.createElement("ul");

             btn.parentNode.appendChild(ul); //添加子节点

             btn.onclick = function (){

                 //1.需要判断文本中是否有内容

                 if(txt.value == ""){

                     alert("亲!内容不能为空哦!!");

                     return false; //让操作就在这个地方终止

                 }

                 var newli = document.createElement("li"); //创建一个新的li标签

                 newli.innerHTML = txt.value +"<a href='javascript:;'>删除</a>"; //给新的标签添加内容，并拼接删除已连接

                 ul.appendChild(newli);

                 //清空输入框

                 txt.value = "";

                 var aa = document.getElementsByTagName("a");//获取所有的a标签

                 for(var i = 0;i<aa.length;i++){ // 遍历点击删除

                     aa[i].onclick = function () {

                         this.parentNode.remove();

                     }

                 }

             }

         }

     </script>

 </head>

 <body>

 <div class="box">

     微博发布:<textarea name="" id="" cols="30" rows="10"></textarea>

     <button>发布</button>

 </div>

 </body>

 </html>

布局出来的样式，点击蓝色的删除链接，会删除对应的那一行内容

陌陌说：重要知识点：获取输入框的数值，创建子节点和给子节点添加内容，删除对应的节点

javascript 信息的发布与删除的更多相关文章

  1. Javascript中理解发布--订阅模式

    Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 如何实现发布--订阅模式? 发布---订阅模式的代码封装 如何取消订阅事件? 全局--发布订阅对象代码封装 理解模块间通信 回到 ...

  2. [转] Javascript中理解发布--订阅模式

    发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 现实生活中的发布- ...

  3. 【转】Javascript中理解发布--订阅模式

    Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时 ...

  4. [转] JavaScript设计模式之发布-订阅模式（观察者模式）-Part1

    <JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...

  5. JavaScript实现的发布/订阅(Pub/Sub)模式

    JavaScript实现的发布/订阅(Pub/Sub)模式 时间 2016-05-02 18:47:58  GiantMing's blog 原文  http://giantming.net/java ...

  6. JavaScript设计模式 - 订阅发布模式(观察者模式)

    var Event = (function() { var global = this, Event, _default = 'default'; Event = function() { var _ ...

  7. PLSQL_统计信息系列04_统计信息的锁定和删除

    20150506 Created By BaoXinjian

  8. javascript中的发布订阅模式与观察者模式

    这里了解一下JavaScript中的发布订阅模式和观察者模式,观察者模式是24种基础设计模式之一. 设计模式的背景 设计模式并非是软件开发的专业术语,实际上设计模式最早诞生于建筑学. 设计模式的定义是 ...

  9. WPF DataGrid显示MySQL查询信息，且可删除、修改、插入 （原发布 csdn 2018-10-13 20:07:28）

    1.入行好几年了,工作中使用数据库几率很小(传统行业).借着十一假期回家机会,学习下数据库. 2.初次了解数据库相关知识,如果本文有误,还望告知. 3.本文主要目的,记录下wpf界面显示数据库信息,且 ...

随机推荐

  1. 如何使用python书写守护进程？daemon、python-daemon

    可以参考的supervisor实现:https://github.com/Supervisor/supervisor:http://supervisord.org/configuration.html ...

  2. Kernel与用户进程通信

    测试IPv6 ready logo   rfc 3315的时候,遇到一个问题,要求在收到ICMPv6 RA的时候,DHCPv6  Client要发Solicit消息.在平常的应用中,都是启动DHCPv ...

  3. 009 NAT

    static nat r1(config)#ip nat inside source static 192.168.1.2 10.0.0.2 r1(config)#int f0/0 r1(config ...

  4. Unity3D研究之多语言用中文做KEY

     做多语言的时候用中文做KEY绝对是有100%的优点,假设用英文表示那么代码里面给文字赋值的地方全都是英文.写的代码多了以后维护起来就没有人能看懂了,或者看起来非常费劲. 对PoolManager ...

  5. 一起talk C栗子吧（第七回：C语言实例--进制转换）

    各位看官们.大家好,从今天開始.我们讲大型章回体科技小说 :C栗子,也就是C语言实例. 闲话休提, 言归正转.让我们一起talk C栗子吧! 看官们.上一回中咱们说的是生成随机数的样例.这一回咱们说的 ...

  6. ORA-00907: 缺失右括号（通用解决办法）

    PL/SQL 的SQL语句可以执行,但是放在hibernate中,后台打印,出现了错误. 错误的SQL解析:黄色为错误部分 Hibernate:      select         examine ...

  7. document.getElementsByClassName("head")[0].parentElement

    document.getElementsByClassName("head")[0].parentElement

  8. HDU 1023 Catalan数+高精度

    链接:HDU 1023 /**************************************** * author : Grant Yuan * time : 2014/10/19 15:5 ...

  9. android studio 使用

    java5-7适用android,java8对安卓支持不好. mac osx 需要安装jdk8, google Nexus模拟器, Intellij是JetBrains发布的. Intellij有2个 ...

  10. XML解析方式汇总

    XML解析方式汇总 分类: XML2011-08-23 19:19 167人阅读 评论(0) 收藏 举报 xmlstringexceptionattributesclassiterator DOM解析 ...