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 iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
原生js实现随机点名功能
Nov 05 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
使用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 URL跳转代码 减少外链
2011/06/25 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
基于python指定包的安装路径方法
2018/10/27 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Django中信号signals的简单使用方法
2019/07/04 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
房地产销售经理岗位职责
2014/01/01 职场文书
表演方阵解说词
2014/02/08 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
工作决心书
2014/03/11 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
师德师风学习材料
2014/12/19 职场文书
党员承诺书范文2015
2015/04/27 职场文书
超级礼物观后感
2015/06/15 职场文书