现在很多类似以微博发布动态的效果，下面为一个用 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. Vue.js组件的通信之父组件向子父组件的通信

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. dstat用法；利用awk求dstat所有列每列的和；linux系统监控

    安装:yum install -y dstat dstat命令是一个用来替换vmstat.iostat.netstat.nfsstat和ifstat这些命令的工具,是一个全能系统信息统计工具.与sys ...

  3. Moravec算子

    Moravec在1981年提出了Moravec角点检測算子,并将它应用于立体匹配.它是一种基于灰度方差的角点检測方法.该算子计算图像中某个像素点沿着水平.垂直.对角线.反对角线四个方向的灰度方差,当中 ...

  4. golang 中可变参数的个数

    package main import "fmt" func Greeting(prefix string, who ... string) { fmt.Println(prefi ...

  5. CSS （二）解析CSS盒子

    话说.一写博客还有些莫名的兴奋感-- 这几天一直挤时间忙于赶牛腩视频,迟到的CSS盒子.请谅解. CSS盒子,一開始听起来还有点高大上的赶脚. 后来了解之后,发现事实上非常easy理解.从功能上讲非常 ...

  6. MySQLi 和 PDO 连接 MySQL

    PHP 连接 MySQL PHP 5 及以上版本建议使用以下方式连接 MySQL : MySQLi extension ("i" 意为 improved) PDO (PHP Dat ...

  7. PHP mysql 连接ipV6地址

    需要在PHP页面中通过ipv6连接数据库,但是发现无论是用mysql_connect还是mysqli_connect,如果host是ipv6格式,就不能正常连接,会提示“php_network_get ...

  8. mystr = '{}{}{}'.format(mystr, random.randint(0, 9), adurl)

    mystr = '{}{}{}'.format(mystr, random.randint(0, 9), adurl)

  9. Copy Selected Text from any window

    https://social.msdn.microsoft.com/Forums/windows/en-US/1dc356e6-9441-44de-9eda-247003fa6ef5/copy-sel ...

  10. 怎样处理Gradle中的这个文件下载慢的问题的

    如图:在build.gradle中的dependencies中加上要依赖的包后,就点击sync gradle.然后就开始了下载.在此过程中我是FQ了的(在此同时我是可以用chrome进入https:/ ...