现在很多类似以微博发布动态的效果，下面为一个用 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. Critical Links-UVa796(无向图求桥)

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  2. 恢复表数据的办法（delete删除可恢复，truncate不可恢复）

    select * from table_name as of timestamp to_timestamp('2018-12-20 00:00:00', 'yyyy-mm-dd hh24:mi:ss' ...

  3. python性能优化、内存优化、内存泄露；与其他语音比较效率如何？

    1.内存泄露:http://www.cnblogs.com/xybaby/p/7491656.html 2.内存优化:http://www.cnblogs.com/xybaby/p/7488216.h ...

  4. 【转】C++ 进程间的通讯(一):简单的有名管道实现

    原文: C++ 进程间的通讯(一):简单的有名管道实现 -------------------------------------------------- 进程间的通讯(一):简单的有名管道实现   ...

  5. 【block第四篇】实现

    -------------------------------------------欢迎查看block连载博客[专栏]--------------------------------------[b ...

  6. CI知识：GitLab

    Gitlab简介 GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的web服务. 可通过Web界面进行访问公开的或者私人项目.它拥有与Github类似的 ...

  7. 卷积神经网络-进化史】从LeNet到AlexNet

    目录视图 摘要视图 订阅 [置顶] [卷积神经网络-进化史]从LeNet到AlexNet 标签: cnn 卷积神经网络 深度学习 2016年05月17日 23:20:3046038人阅读 评论(4)  ...

  8. 软考之J2SE

    特别感谢软考让我如今就接触了神奇的java.曾经尽管真不知道java是个神马,看完马士兵的视频发现里面的东西并不陌生.有vb,c++,c#做基础加上这次的J2SE发现原来编程语言有非常多同样的特性.也 ...

  9. HDU5294 Tricks Device（最大流+SPFA） 2015 Multi-University Training Contest 1

    Tricks Device Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) To ...

  10. 浏览器对MP4视频 帧宽度 高度的兼容性

    传入oss后 或者 本地 拖动到   浏览器 谷歌 都不能播放 Edge 可以播放 但 Edge不支持 本地拖入 播放 搜狗浏览器 同谷歌