效果图：

实现思路：

 当发布按钮被点击时，又会分为三种情况
 1.如果输入的内容为空，弹出提示：不能发布空微博
 2.如果输入的文字超过120，弹出提示，微博内容不能超过120
 3.正常发布微博到列表里，并清空文本域。

4.消除 '< ' 对于文本域的影响.

代码:

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         *{

             margin:0;

             padding:0;

             list-style:none;

         }

         .weibo{width: 600px;border: 1px solid #ccc;margin: 100px auto;padding:10px;}

         .weibo textarea{ width: 598px;height:140px;border: 1px solid #ccc;outline: none;resize: none; }

         .weibo textarea:focus{border-color: #f40; }

         .weibo button{ width: 80px;height: 30px;background: orange;color:#fff;border: 0 none;margin-top: 5px;border-radius: 3px;

             cursor: pointer; }

         .weibo button:hover{background-color: #f40; }

         .weibo ul{margin-bottom: 10px;}

         .weibo li{border-bottom: 1px dotted #ccc;overflow: hidden;font-size: 14px;line-height: 30px;}

         .weibo li p{float: left;}

         .weibo li span{float: right;color:#333;text-decoration: none;cursor: pointer;}

         .weibo li span:hover{ color:#f40; }

     </style>

     <script>

         window.onload = function () {

             var weibobox = document.getElementById("weibo");

             var ul = weibobox.children[0];

             var text = weibobox.children[1];

             var btn = weibobox.children[2];

             btn.onclick = function () {

                 // 获取输入内容(去掉前后空格)

                 var value = text.value.trim();

                 // 排除 < 字符对于文本域的影响

                 if(value.indexOf("<") != -1) {

                   value =  value.replace("<", "&lt;");

                 }

                 // 判断输入内容是否合法

                 if(!value) {

                     alert("输入内容不能为空！")

                 }else if(value.length > 120) {

                     alert("发出的微博字数不能超过120个！")

                 }else {

                     // 创建li元素

                     var newli = document.createElement("li");

                     // 设置li内容

                     newli.innerHTML = "<p>"+value+"</p>";

                     // 插入li到原来li节点前面

                     ul.insertBefore(newli,ul.children[0]);

                     // 清空文本域

                     text.value = "";

                 }

             }

         }

     </script>

 </head>

 <body>

 <div class="weibo" id="weibo">

     <ul>

         <li><p>快来收了这九款用上就停不下来的应用吧！！</p></li>

         <li><p>超级详细的云南大理自助游攻略</p></li>

         <li><p>外国最近很火的舞蹈，舒服简单自然，太棒了！</p></li>

     </ul>

     <textarea id="text"></textarea>

     <button id="btn">发布</button>

 </div>

 </body>

 </html>

JavaScript--微博发布效果的更多相关文章

  1. 原生JS+tween.js模仿微博发布效果

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4816865.html 1.先看效果吧,有效果才有动力: 2.html结构: <!DOCTYPE ht ...

  2. VUE实现微博发布效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 微博发布效果jq版

    大家都看过新浪微博的发状态功能,我模拟了一下类似的效果,包括发布时间,删除效果等.代码如下: <!DOCTYPE HTML> <html> <head> <m ...

  4. 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  5. JS学习笔记 - 微博发布效果

    <script> window.onload = function() { var oTxt = document.getElementById('txt1'); var oBtn = d ...

  6. 原生JavaScript 全特效微博发布面板效果实现

    javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...

  7. js控住DOM实现发布微博简单效果

    这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为: <!DOCTYPE html> <html lang="en&quo ...

  8. js微博发布框的实现

    观察了微博发布框, 1.发现他的剩余文字是动态改变的, 2.且文字为零时 发布框颜色为暗色 3.文字不符合标准时提交不通过 整理了一下思路 js会主要用到的方法 1.onclick() //点击发布时 ...

  9. [js高手之路]设计模式系列课程-委托模式实战微博发布功能

    在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单? 大多数人的做法都是:获取元素,绑定事件 <ul> < ...

  10. JS 仿腾讯发表微博的效果

    JS 仿腾讯发表微博的效果 最近2天研究了下 腾讯发表微博的效果 特此来分享下,效果如下: 在此分享前 来谈谈本人编写代码的习惯,很多人会问我既然用的是jquery框架 为什么写的组件不用Jquery ...

随机推荐

  1. Spring AOP(二)--注解方式

    本文介绍通过注解@AspectJ实现Spring AOP,这里要重点说明一下这种方式实现时所需的包,因为Aspect是第三方提供的,不包含在spring中,所以不能只导入spring-aop的包,为了 ...

  2. 取消 ios 上下滑动

  3. line-height:2和line-height:2em的区别，它们是有区别的

    line-height:2是2倍的意思,如果内部有不同大小文字的情况下,以最大文字为倍数. line-height:2em也是2倍文字大小的意思,但如果内部有大文字,它还是会以父容 器的大小来计算. ...

  4. ArrayList基础知识

    ArrayList简介 ArrayList 的底层是数组队列,相当于动态数组.与 Java 中的数组相比,它的容量能动态增长.在添加大量元素前,应用程序可以使用ensureCapacity操作来增加 ...

  5. Zookeeper教程

    由于zookeeper使用java语言编写,因此我们运行zookeeper需要保证你的服务器上已经安装了jdk. 安装zk 本文介绍的前提是已经默认安装好了jdk,Linux安装JDK教程https: ...

  6. MATLAB---fopen、fprintf函数

    1 概述 fopen()是个将数据按指定格式读入到matlab中的函数. fprintf()是个将数据按指定格式写入到文本文件中的函数. 2 用法 2.1 fopen函数 matlab中fopen函数 ...

  7. Hibernate-实体-对象状态-一级缓存-事务-查询

    一 hibernate中的实体规则 1.1 实体类创建的注意事项 持久化类提供无参数构造         --在调用instance()方法时默认调用空参构造 成员变量私有,提供共有get/set方法 ...

  8. Hadoop 单机安装配置

  9. Vuejs实战项目四：权限校验

    路由跳转参考文档:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 在/src下创建permission.js进行权限 ...

  10. 2.android工具使用及appium启动

    1.adb devices  可以查看手机是否连接成功. 2.aapt dump badging xxx.apk  查看app信息. 3.启动appium需配置platformName和deviceN ...