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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>微博发布</title>
  6.      <style type="text/css">
  7.  
  8.          *{
  9.              padding: 0;
  10.              margin: 0;
  11.          }
  12.          ul {
  13.  
  14.              list-style: none;
  15.          }
  16.  
  17.          .box {
  18.              width: 600px;
  19.              height: auto;
  20.              border: 1px solid #ccc;
  21.              margin: 100px auto;
  22.              text-align: center;
  23.              padding: 30px 0;
  24.              background-color: rosybrown;
  25.          }
  26.  
  27.          .box textarea {
  28.              width: 450px;
  29.              resize: none; /*设置文本不能过拖动*/
  30.          }
  31.          .box li {
  32.  
  33.              width: 450px;
  34.              line-height: 30px;
  35.              border-bottom: 1px dashed #ccc;
  36.              margin-left: 80px;
  37.              text-align: left;
  38.          }
  39.  
  40.          .box li a {
  41.  
  42.              float: right;
  43.          }
  44.      </style>
  45.  
  46.      <script type="text/javascript">
  47.  
  48.          window.onload = function (){
  49.              //获取数组的第一个
  50.              var btn = document.getElementsByTagName("button")[0];
  51.              var txt = document.getElementsByTagName("textarea")[0];
  52.              var ul = document.createElement("ul");
  53.              btn.parentNode.appendChild(ul); //添加子节点
  54.              btn.onclick = function (){
  55.  
  56.                  //1.需要判断文本中是否有内容
  57.                  if(txt.value == ""){
  58.  
  59.                      alert("亲!内容不能为空哦!!");
  60.  
  61.                      return false; //让操作就在这个地方终止
  62.                  }
  63.  
  64.                  var newli = document.createElement("li"); //创建一个新的li标签
  65.                  newli.innerHTML = txt.value +"<a href='javascript:;'>删除</a>"; //给新的标签添加内容，并拼接删除已连接
  66.                  ul.appendChild(newli);
  67.  
  68.                  //清空输入框
  69.                  txt.value = "";
  70.  
  71.                  var aa = document.getElementsByTagName("a");//获取所有的a标签
  72.  
  73.                  for(var i = 0;i<aa.length;i++){ // 遍历点击删除
  74.  
  75.                      aa[i].onclick = function () {
  76.  
  77.                          this.parentNode.remove();
  78.                      }
  79.                  }
  80.  
  81.              }
  82.  
  83.          }
  84.  
  85.      </script>
  86.  </head>
  87.  <body>
  88.  <div class="box">
  89.  
  90.      微博发布:<textarea name="" id="" cols="30" rows="10"></textarea>
  91.      <button>发布</button>
  92.  
  93.  </div>
  94.  </body>
  95.  </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. World is Exploding 树状数组+离散化

    Given a sequence A with length n,count how many quadruple (a,b,c,d) satisfies: a≠b≠c≠d,1≤a<b≤n,1≤ ...

  2. MongoDB环境搭建教程收集（待实践）

    先收集,后续再实践. https://my.oschina.net/leezhen/blog/207262 http://www.360doc.com/content/11/0708/09/26606 ...

  3. 【.Net 学习系列】-- FileSystemWatcher 监控文件夹新生成文件，并在确认文件没有被其他程序占用后将其移动到指定文件夹

    监控文件夹测试程序: using System; using System.Collections.Generic; using System.IO; using System.Linq; using ...

  4. Django学习系列之Form验证

    django表单基础 django表单分类 基于django.forms.Form:所有表单类的父类 基于django.forms.ModelForm:可以和模型类绑定的Form Form验证流程 定 ...

  5. 【剑指Offer学习】【面试题65：滑动窗体的最大值】

    题目:给定一个数组和滑动窗体的大小,请找出全部滑动窗体里的最大值. 举例说明 比如,假设输入数组{2,3,4,2,6,2,5,1}及滑动窗体的大小.那么一共存在6个滑动窗体,它们的最大值分别为{4,4 ...

  6. 面试题之strcpy/strlen/strcat/strcmp的实现

    阿里的电面要我用C/C++实现一个字符串拷贝的函数,虽然以前写过 strcpy 的函数实现,但时间过去很久了,再加上有点紧张,突然就措手不及了.最后写是写出来了,但没考虑异常的情况,面试官好像很不满意 ...

  7. 【MySQL】Win7下修改MySQL5.5默认编码格式

    一般安装MySQL程序过程中,有一步骤是选择MySQL的默认编码格式的,程序默认为Latin1编码格式,当然也可以选择第三个选项,手动选择gbk或utf8编码格式,以支持中文数据.如下图: 现在问题出 ...

  8. SQL Server 海量数据查询代码优化以及建议

    1.应尽量避免在  where  子句中对字段进行   null  值推断,否则将导致引擎放弃使用索引而进  行全表扫描,如:     select id from t where num is nu ...

  9. @SessionAttributes的覆盖与加入

    在我们使用@SessionAttributes 注解向session加入对象时.当我们使用ModelMap的addAttribute()方法是指向session中加入一个新的对象,而使用HttpSes ...

  10. [英语学习]微软面试前英语集训笔记-day 1

    最近有机会参加微软面试前的英语集训. 第一天是由wendy老师主讲.热场题目是介绍你自己.包括你的姓名,家庭hobby,爱好,专业,学校,工作经历等等. 接下来的主题是friendship.给我印象较 ...