效果图：

实现思路：

 当发布按钮被点击时，又会分为三种情况
 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. Django-rest Framework(四)

    序列化模块时rest-framework的很重要的组成部分 rest-framework序列化模块(核心) 一. 为什么要使用序列化组件? ​ 后台的数据多以后台的对象存在,经过序列化后,就可以格式化 ...

  2. Java程序员面试题收集（2）

    1 String = 与 new 的不同 使用“=”赋值不一定每次都创建一个新的字符串,而是从“字符串实例池”中查找字符串.使用“new”进行赋值,则每次都创建一个新的字符串.  2 String与S ...

  3. Leetcode80. Remove Duplicates from Sorted Array II删除排序数组中的重复项2

    给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素最多出现两次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 示例  ...

  4. 百度地图JavaScript API申请密钥注意要点

    1.应用类型:浏览器端 2.启用服务:Javascript API要勾选 3.IP白名单:*即可

  5. TZ_02MyBatis_lazy SqlMapConfig.xml

    Mybatis的延迟加载又称为懒加载 mybatis在一对多的查询中,例如查询一个用户时需要查询这个用户下的所有账户信息,如果一次性的select * from user u left join ac ...

  6. 常用web字体的使用指南

    而真正的挑战在于中文字体,由于中文字体组成的特殊性导致其体积过于庞大,除了操作系统内置的字体之外,我们很难在网站上应用其他的字体.在可选性很差的前提之下,如何正确的使用中文字体呢? 首先,以下的字体声 ...

  7. 零开始Android逆向教程(一)——初探Android逆向

    这段时间因为某些业务驱动,开始研究一些逆向相关的东西,浏览了下其所包含的大致内容,发现真是一个新大陆,跟之前耳听目染过的一些门面介绍完全不是一个层级的,真正的印证了下手难这一说法.   谨此以本文开始 ...

  8. python使用cPickle模块序列化实例

    python使用cPickle模块序列化实例 这篇文章主要介绍了python使用cPickle模块序列化的方法,是一个非常实用的技巧,本文实例讲述了python使用cPickle模块序列化的方法,分享 ...

  9. 【JZOJ5231】【NOIP2017模拟A组模拟8.5】序列问题 线段树

    题面 100 在\(O(n^2)\)的基础上,我们可以用线段树来加速. 枚举了左端点之后,需要知道以这个左端点为起点的前缀max,前缀min. 这里只讨论前缀max,前缀min同理. 当我们倒序枚举左 ...

  10. fixed和absolute的区别

    今天在实际项目中,写首页一屏的时候,发现页脚定位(position:absolute:)没有达到我想要的效果(不管屏幕大小,页脚始终相对浏览器底部定位).于是我觉得有点奇怪,然而我旁边的小哥说:很明显 ...