效果图：

实现思路：

 当发布按钮被点击时，又会分为三种情况
 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. node.js 安装步骤

    1.打开链接(http://nodejs.cn/download/) 2.下载自己所需的安装包(32位 or 64位.哪个系统) 3.双击直接安装(成功如下图) 4.点击 Node.js comman ...

  2. 【DM8168学习笔记3】CodSourcery GCC Tool Chain安装过程记录

    eagle@eagle-desktop:~$ cd/home/eagle/desktop eagle@eagle-desktop:~/desktop$ cd./vboxshared eagle@eag ...

  3. python运~算~~符！！！！！！！！！！！

    目录: 算术运算, 用于加减乘除等数学运算 赋值运算,用于接收运算符或方法调用返回的结果 比较运算, 用于做大小或等值比较运算 逻辑运算,用于做 与.或.非运算 位运算, 用于二进制运算 每种运算中所 ...

  4. Math concepts / 数学概念

    链接网址:Math concepts / 数学概念 – https://www.codelast.com/math-concepts-%e6%95%b0%e5%ad%a6%e6%a6%82%e5%bf ...

  5. Luogu P1967 货车运输(Kruskal重构树)

    P1967 货车运输 题面 题目描述 \(A\) 国有 \(n\) 座城市,编号从 \(1\) 到 \(n\) ,城市之间有 \(m\) 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 \ ...

  6. 《2018年云上挖矿态势分析报告》发布，非Web类应用安全风险需重点关注

    近日,阿里云安全团队发布了<2018年云上挖矿分析报告>.该报告以阿里云2018年的攻防数据为基础,对恶意挖矿态势进行了分析,并为个人和企业提出了合理的安全防护建议. 报告指出,尽管加密货 ...

  7. 开户项目的sql查询语句备查

    查询全国所有的券商名录 SELECT id,security,province,city,borough FROM t_security GROUP BY security ; 查询某个省份的所有券商 ...

  8. Vue.之.创建项目

    Vue.之.创建项目 第一次使用vue的时候,在已完成node的情况下,还需要在进行安装vue. 指令:cnpm install vue-cli -g      //全局安装 vue-cli 检查vu ...

  9. Nginx 编译设置模块执行顺序

    Nginx编译时,配置"--add-module=xxx"可以加入模块,当我们需要按照指定顺序来设置过滤模块执行顺序时,先配置的"--add-module=xxx&quo ...

  10. 怎样判断一个exe可执行程序(dll文件)是32位的还是64位的

    看到一个比较简单粗暴的方式,做个记录. 直接用记事本或者notepad++(文本编辑软件都可)打开exe文件(dll文件), 会有很多乱码,接下来只需要在第二段中找到PE两个字母,在其后的不远出会出现 ...