现在很多类似以微博发布动态的效果，下面为一个用 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. springboot技术

      一 我们为什么要用SpringBoot? 1. SpringBoot核心功能 SpringBoot的核心最足要的功能是自动配置,简单说下springBoot,springboot可以替代额xml配 ...

  2. jmeter的dubbo压测，依赖jar包要放到执行机的lib/ext下

    对于jmeter的dubbo压测场景的master-slave结构: 即master的jmeter进行任务的下发和报告的生成,slave进行任务的执行 因为dubbo压测需要依赖很多三方jar包,那么 ...

  3. COCOS学习笔记--即时动作ActionInstant

    Cocos引擎中的动作类的关系图例如以下: 能够看出,Action是继承自Ref类的,之前我的博客中也有讲过,Ref类是cocos2dx全部类的基类.动作类(Action)是全部动作的基类.它通过cr ...

  4. Ubuntu虚拟机安装遇到的各种坑

    配置 13年Macbook Pro 虚拟机环境 Parallels Desktop Linux 版本 Ubuntu 16.04 1.分辨率问题 进入只有一种分辨率 终端输入 sudo xdiagnos ...

  5. WWDC笔记:2013 Session 201 Building User Interfaces for iOS 7

    Text Dynamic Type Specifies fonts semantically Supports user text sizing Optimized for legibility Su ...

  6. linux下的C语言开发 GDB的例子

    在很多人的眼里,C语言和linux常常是分不开的.这其中的原因很多,其中最重要的一部分我认为是linux本身就是C语言的杰出作品.当然,linux操作系统本身对C语言的支持也是相当到位的.作为一个真正 ...

  7. CMake使用总结

    总结CMake的常用命令,并介绍有用的CMake资源. CMake意为cross-platform make,可用于管理c/c++工程.CMake解析配置文件CMakeLists.txt生成Makef ...

  8. 移动前端第二弹：善用meta

    前言 在移动前端第一弹:viewport详解中,我们讲了viewport,那是一个关于meta的故事.这次我们会就将meta这个故事讲得更广阔.更有意思一些. 写过HTML的童鞋,应该都对这个不陌生, ...

  9. Runtime ----- 带你上道

    在IOS开发和学习过程中,我们经常会接触到一个词: Runtime  .很多开发者对之既熟悉又陌生,基本都是浅尝辄止,达不到灵活使用的水平(话说开发中也确实不经常用..)本文和大家一起研究一下,Run ...

  10. Java多线程系列五——列表类

    参考资料: http://xxgblog.com/2016/04/02/traverse-list-thread-safe/ 一些列表类及其特性  类 线程安全 Iterator 特性 说明 Vect ...