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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
详解Vue This$Store总结
Dec 17 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
JS实现碰撞检测效果
Mar 12 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
PHP函数utf8转gb2312编码
2006/12/21 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
Jquery实现简单的动画效果代码
2012/03/18 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
python代码如何注释
2020/06/01 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
查询优化的一般准则有哪些
2015/03/08 面试题
工作时间上网检讨书
2014/02/03 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
专业见习报告范文
2014/11/03 职场文书
个人德育工作总结
2015/03/05 职场文书
开业典礼致辞
2015/07/29 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
企业管理不到位检讨书
2019/06/27 职场文书