现在很多类似以微博发布动态的效果，下面为一个用 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. Codeforces Round #343 (Div. 2)【A,B水题】

    A. Far Relative's Birthday Cake 题意: 求在同一行.同一列的巧克力对数. 分析: 水题~样例搞明白再下笔! 代码: #include<iostream> u ...

  2. java反射与注解结合使用(根据传入对象输出查询sql)

    我们在项目开发中有很多地方使用到了注解,关于注解的定义与创建小伙伴可以参考我的文章<java注解>.有任何问题的小伙伴们可以在评论区指出哦,欢迎各位大佬指出问题. 今天我要说的是使用注解与 ...

  3. scikit-learn：3. Model selection and evaluation

    參考:http://scikit-learn.org/stable/model_selection.html 有待翻译,敬请期待: 3.1. Cross-validation: evaluating ...

  4. 【手势交互】8. Nimble Sense

    早在2012.2013年度,手势识别领域就发生了几起重要的行业并购.比方英特尔对Omek的收购,谷歌对Flutter的收购.而苹果公司更是以3.45亿美金得高价收购了之前为微软Kinect提供技术支持 ...

  5. Android处理日期

    近期做一个项目,后台返回的日期是RFC3339格式的.之前没有看到过,当中遇到了几个问题以及解决 1.2015-11-18T14:49:55Z转换 在SimpleDateFormat中给出了几种格式 ...

  6. Cocos2d-x编译Android环境

    1.Android环境搭配: 下载jdk 下载Android ADT 下载安装Android SDK,地址:http://developer.android.com/sdk/index.html#do ...

  7. Java：String和Date、Timestamp之间的转换【转】

    原文地址:http://yunnick.iteye.com/blog/1074495 一.String与Date(java.util.Date)互转 1.1 String -> Date Str ...

  8. NSArray和NSMutableArray的常用方法 (转)

    NSArray和NSMutableArray的常用方法 (转) (2013-09-06 15:13:46) 标签: it 分类: ios编程 初始化方法:   1.init返回一个空数组    2.i ...

  9. hdu1162

    #include<cstdio> #include<cmath> #include<climits> #include<algorithm> #defi ...

  10. Windows10、ARM开发板、VMware虚拟机同时连接Internet

    前段时间有人遇到一些网络连接问题,让我帮忙处理,他想让ARM开发板连接外网,可以连接网络数据库,同时保证自己的电脑可以上网. 本来说直接可以连接一个路由器,分配一个内网IP给ARM就可以了,但是当时那 ...