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中eval函数的使用方法与示例
Apr 09 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
npm ci命令的基本使用方法
Sep 20 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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
介绍几个array库的新函数 php
2006/12/29 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
PHP如何将XML转成数组
2016/04/04 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
Yii框架安装简明教程
2020/05/15 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
Python 字符串操作方法大全
2014/03/11 Python
python实现多线程采集的2个代码例子
2014/07/07 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
金士达面试非笔试
2012/03/14 面试题
高级方案规划工程师岗位职责
2013/11/29 职场文书
人事部岗位职责范本
2014/03/05 职场文书
自我鉴定总结
2014/03/24 职场文书
受伤赔偿协议书
2014/09/24 职场文书
给客户的感谢信
2015/01/21 职场文书
安全教育日主题班会
2015/08/13 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang