效果图：

实现思路：

 当发布按钮被点击时，又会分为三种情况
 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. JEECMS8——系列文档

    jeecms8 系列文章地址 https://blog.csdn.net/weixin_37490221/article/details/78652035

  2. 转：linux select 多路复用机制

    源地址:http://blog.csdn.net/turkeyzhou/article/details/8609360 2013-02-25 14:18 442人阅读 评论(1) 收藏 举报   目录 ...

  3. python-基础-面向对象2-异常-模块工厂模式

    1 工厂模式和单例模式 1简单工厂模式 1.1.使用函数实现 # 定义伊兰特车类 class YilanteCar(object): # 定义车的方法 def move(self): print(&q ...

  4. JasperReports报表字段11

    报表字段是代表数据源和报表模板之间的数据映射元素.字段可以在报告中的表达式进行组合,以获得所需的输出.报表模板可以包含零个或更多的<field>元素.当声明报表字段,数据源应提供相应的数据 ...

  5. 2019-10-11-VisualStudio-配置多进程调试快捷键启动项目

    title author date CreateTime categories VisualStudio 配置多进程调试快捷键启动项目 lindexi 2019-10-11 15:33:32 +080 ...

  6. Latex报错： Could not start the command: xelatex.exe -synctex=1 -interaction=nonstopmode?

    Latex报错: Could not start the command: xelatex.exe -synctex=1 -interaction=nonstopmode 网上还有很多说出Could ...

  7. pytorch 加载训练好的模型做inference

    前提: 模型参数和结构是分别保存的 1. 构建模型(# load model graph) model = MODEL() 2.加载模型参数(# load model state_dict) mode ...

  8. Codeforces 142D（博弈）

    要点 不难发现问题转化成:n堆石子,每次最多选k堆最少选1堆然后拿走一个石子,谁先没子可拿谁败.本题中撤退不必考虑. 就是记笔记吧,类似nim的博弈,举例:\[k=3,n=4\]\[4堆石子分别是1. ...

  9. SQL 约束和表修改语句

    1.约束作用: 约束的目的就是确保表中的数据的完整性 2.常用的约束类型如下 主键约束:(Primary Key constraint) 要求主键列唯一,并且不允许为空    唯一约束:(Unique ...

  10. laravel--laravel的重定向类Redirector

    laravel的重定向类Redirector 在laravel5中,重定向类可以直接通过redirect()方法直接获取,不需要声明,有几个常用的方法: redirect() -> to( “重 ...