效果图：

实现思路：

 当发布按钮被点击时，又会分为三种情况
 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. 第15章 RMAN备份 ​

    第15章 RMAN备份 oracle推荐的备份工具是rman(恢复管理器:recovery manager),用操作系统命令执行的备份被称为用户管理的备份.使用rman执行的备份被称为服务器管理备份. ...

  2. 2019.10.29 csp-s模拟测试93 反思总结

    T1: 求出前缀和,三维偏序O(nlog2n)CDQ 二维其实就可以 #include<iostream> #include<cstdio> #include<cstri ...

  3. java ssh框架全局变量，比如ip黑名单，毕竟比去数据库查询要快的没边儿

    https://blog.csdn.net/qq_41942909/article/details/80840915 首先在springservlet配置文件中添加一个bean <bean id ...

  4. JAVA获取磁盘空间

    需要把磁盘空间显示在页面上,这样就不用去服务器查看了,方便 两个办法 File file = new File("D:"); long totalSpace = file.getT ...

  5. springmvc报404错误No mapping found for HTTP request with URI [/mavenSpringmvc/requesttest] in DispatcherServlet with name 'spring'

    问题404错误的原因有很多种 有这种,后边不带url的 这种一般就是没有进入到controller中 可以在toncat中看到信息 十一月 12, 2018 12:21:25 下午 org.sprin ...

  6. java笔记之split

    Java split()用法 特殊情况有 * ^ : | . \ 一.单个符号作为分隔符  String address="上海\上海市|闵行区\吴中路"; String[] sp ...

  7. 基于HHT和RBF神经网络的故障检测——第二篇论文读后感

    故障诊断主要包括三部分: 1.故障信号检测方法(定子电流信号检测 [ 定子电流幅值和电流频谱 ] ,振动信号检测,温度信号检测,磁通检测法,绝缘检测法,噪声检测法) 2.故障信号的处理方法,即故障特征 ...

  8. 2019.9.16 csp-s模拟测试44 反思总结

    虽然说好像没有什么写这个的价值OAO 来了来了来写总结了,不能怨任何东西,就是自己垃圾x 开题顺序又和主流背道而驰,先一头扎进了公认最迷的T2,瞎搞两个小时头铁出来,然后T1和T3爆炸.基础很差,全靠 ...

  9. Hibernate_条件查询客户列表

    分析:通过名称查询 实现: 1.在list.jsp中修改 2.修改ListCustomerServlet 首先获取cust_name,增加条件:若不为空,则模糊搜索,再调用Service方法,结果放到 ...

  10. NOIP2016参赛日志+总结

    这个故事告诉我们,成绩出来之前一定要装弱.这些文字是作者拿到程序后测了洛谷民间数据后写的. 2016.11.18  Day    0 早上五点半起床,洗漱完毕,吃了早饭,收拾收拾,七点半从家出发,去了 ...