JavaScript仿微博发布信息案例


Posted in Javascript onNovember 16, 2016

现在很多类似以微博发布动态的效果,下面为一个用 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仿微博发布信息案例

陌陌说:重要知识点:获取输入框的数值,创建子节点和给子节点添加内容,删除对应的节点。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
redux处理异步action解决方案
Mar 22 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
使用Node.js给图片加水印的方法
Nov 15 #Javascript
Node.js批量给图片加水印的方法
Nov 15 #Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 #Javascript
AngularJS extend用法详解及实例代码
Nov 15 #Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 #Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 #Javascript
javascript实现消灭星星小游戏简单版
Nov 15 #Javascript
You might like
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
smarty实现多级分类的方法
2014/12/05 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
js点击选择文本的方法
2015/02/09 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python操作MySQL简单实现方法
2015/01/26 Python
深入浅析Python字符编码
2015/11/12 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
没编程基础可以学python吗
2020/06/17 Python
如何通过python计算圆周率PI
2020/11/11 Python
我的未来不是梦演讲稿
2014/09/02 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
民间借贷借条如何写
2015/05/26 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
导游词之南京中山陵
2019/11/27 职场文书