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 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
百度留言本js 大家可以参考下
Oct 13 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
Vue2.0 实现移动端图片上传功能
May 30 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
vue.js实现备忘录demo
Jun 26 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
原生js轮播特效
2017/05/18 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
jQuery实现评论模块
2020/08/19 jQuery
python采用getopt解析命令行输入参数实例
2014/09/30 Python
python开发中range()函数用法实例分析
2015/11/12 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
python构建深度神经网络(续)
2018/03/10 Python
python url 参数修改方法
2018/12/26 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
地道战观后感300字
2015/06/04 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android
python中pymysql包操作数据库方法
2022/04/19 Python
MySQL去除密码登录告警的方法
2022/04/20 MySQL