观察了微博发布框，

1.发现他的剩余文字是动态改变的，

2.且文字为零时 发布框颜色为暗色

3.文字不符合标准时提交不通过

整理了一下思路 js会主要用到的方法

　　1.onclick() //点击发布时触发

　　2.onmouseover()// 鼠标滑到 发布  触发

　　3.onmouseout() //鼠标离开 发布  时触发

　　4.onfocus() //点击到 输入框 时触发

　　5.onblur() //点击到 输入框 以外的区域触发

　　6.oninput() //输入内容改变时触发

以下是实现的思路

　　1.基本样式的实现 （就不赘述了）

　　2.判断输入框的内容 当没输入时 发布 一栏为暗色 当鼠标点击到输入框时 边框阴影出现 且文字提示出现 并随着文字输入增加相应数字减少

　　3.当鼠标点击到输入框外的内容时 ，边框阴影消失 文字提醒消失

　　4.当文字<=0 || >140时 发布 为暗色 且 当>140时 文字会提示超过的字数并建议转为长微博

　　5.定义getLength方法  来获取当前输入框的字数（当输入为汉字时 长度以aa计算） （用正则替换）

　　6.定义toChange方法 来修改输入框的数字变化

　　　　具体是修改innerHTML 来修改数字 并且在oninput执行时触发

以下是代码实现

<!DOCTYPE html>

<html>

<head land="en">

    <meta charset="UTF-8">

    <title>微博发布框</title>

    <style type="text/css">

        *{padding:0;margin: 0;font-size: 12px;}

        .weibodiv{

            margin: 20px auto;

            width: 600px;

        }

        .ad{

            background: url(img/1.png) no-repeat;

            width: 291px;

            height: 37px;

            display: block;

            float: left;

        }

        .adtext{

            float: right;

            position: relative;

            top: 14px;

            line-height: 37px;

            height: 37px;

        }

        .weibotext{

            float: left;

            top: 30px;

            margin: 5px auto;

            display: block;

        }

        textarea{

            height: 170px;

            width: 590px;

            border: 1px solid rgb(64,224,208);

            font-size: 20px;

            overflow: auto;

        }

        #weibotextnum{

            float: right;

            font-size: 14px;

    /*         opacity: 0; */

        }

        #weibotextnumber{

            font-size: 20px;

            font-family:Bell MT;

        }

        .post{

            width: 80px;

            height: 30px;

            border: 1px solid;

            text-align: center;

            font-size: 20px;

            text-decoration: none;

            border-radius: 5px;

            color: #ffffff;

            background: #8BC528;

            font-weight: bold;

            float: right;

            margin: 3px;

            letter-spacing: 5px;

            line-height: 30px;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div class="weibodiv">

        <a href="" class="ad"></a>

        <a href="" class="adtext">点击牛运按钮 赢取码上好礼</a>

        <div class="weibotext">

            <textarea></textarea>

            <span id = "weibotextnum">还能输入<span id="weibotextnumber">140</span>字</span>

        </div>

        <span class="weibobottomlink"><img src="img/2.png" alt=""></span>

        <a href="" class="post">广播</a>

        <script type="text/javascript">

            window.onload = function(){

                var oT = document.getElementsByTagName('textarea')[0];//获取到输入框

                var weibotext = document.getElementsByClassName('weibotext');////获取到输入区外容器

                var weibotextnum = document.getElementById('weibotextnum');

                var weibotextnumber = document.getElementById('weibotextnumber');

                var oA = document.getElementsByClassName('post')[0];

                 var ie = !-[1,];//判断是否为IE

                 //输入内容时执行

                 if(ie){

                     oT.onpropertychange = toChange;

                 }else{

                     oT.oninput = toChange;

                 }

                oT.onfocus = function(){

                    oT.style.border  = "1px #40E0D0 solid";

                    oT.style.boxShadow  = "0 0 10px #5CACEE";

                    weibotextnum.style.opacity = "1";

                    var num = Math.ceil(getLength(oT.value)/2);

                    if(num==""){

                        oA.style.background = "#7F7F7F";//第一次没字时应该为时是黑色

                    }

                }

                oT.onblur = function(){

                    weibotextnum.style.opacity = '0';

                    oT.style.boxShadow  = "";

                    oA.style.background = '#8BC528';

                }

                oA.onmouseover = function(){

                    oA.style.background = '#7CCD7C';

                    oT.blur();

                }

                oA.onmouseout = function(){

                    oA.style.background = '#8BC528';

                }

                oA.onclick = function(){

                    var num = Math.ceil(getLength(oT.value)/2);

                    if(num==0 || num>140){

                        alert("不符合发布要求，请检查");

                        return false;

                    }else{

                        alert("发布成功！");

                        oT.value = "";

                        weibotextnumber.innerHTML="140";

                    }

                }

                function toChange(){

                    var num = Math.ceil(getLength(oT.value)/2);

                    if(num<=140){

                        weibotextnum.innerHTML = "还能输入<span id='weibotextnumber'></span>字";

                        weibotextnumber = document.getElementById('weibotextnumber');

                        weibotextnumber.innerHTML = 140-num;

                        weibotextnumber.style.color = '';

                    }

                    else{

                        weibotextnum.innerHTML = "超出字数<span id = 'weibotextnumber'></span> 您可以转为<a href='#'>长微博</a>发送"

                        weibotextnumber = document.getElementById('weibotextnumber');

                        weibotextnumber.innerHTML = 140 - num;

                        weibotextnumber.style.color = 'red';

                    }

                    if(num>140 || oT.value==""){

                        oA.style.background = "#7F7F7F";

                    }else{

                        oA.style.background = "#8BC528";

                    }

                }

                function getLength(str){

                    return String(str).replace(/[^\x00-\xff]/g,'aa').length;//当为汉字时以aa为算长度

                }

            }

        </script>

    </div>

</body>

</html>

引用前请标明出处：http://www.cnblogs.com/zkhzz/ 谢谢

js微博发布框的实现的更多相关文章

  1. js微博发布框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

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

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

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

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

  5. 微博发布效果jq版

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

  6. VUE实现微博发布效果

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

  7. js控制文本框只能输入中文、英文、数字与指定特殊符号.

    先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...

  8. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  9. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

随机推荐

  1. tomcat 远程调试

    1.服务端查看cataline.sh 中的描述  cataline jpda start 开启服务端远程调试 远程调试端口JPDA_ADDRESS="8000" 2.本地代码参考  ...

  2. kettle系列-6.kettle实现多字段字典快速翻译

    在数据清洗转换中,常见的字典翻译,如性别在原表中是1(男).2(女)等,类似还有很多较大的字典需要翻译,若同一个表中有很多个字典需要翻译,采用[数据库查询]方式翻译的话效率就会相当低下. 这里采用ja ...

  3. Delphi使用ADO进行数据库编程

    Delphi是一个可视化的编程工具,ADO编程也是这样,所以话不多言,直接通过代码.截图和语言来说明. 我的数据库是Oracle,为了测试,先建一个表:create table practice(un ...

  4. [Java] CPU 100% 原因查找解决

    CPU 100%肯定是出现死锁,这个时候观察内存还是够用的,但是CPU一直100%,以下几步解决: 1. 找到进程消耗cpu最大的 $top top - :: up days, :, user, lo ...

  5. F#之旅4 - 小实践之快排

    参考文章:https://swlaschin.gitbooks.io/fsharpforfunandprofit/content/posts/fvsc-quicksort.html F#之旅4 - 小 ...

  6. Windows远程桌面打印机映射

    计算机的打印机驱动能打印,需要满足两个条件,一个是有打印驱动本身,一个是要有连接好了的端口.这样,打印作业就会被打印驱动程序封装成一种打印机能识别的组织形式,然后通过打印端口发送给打印机,然后打印! ...

  7. Express URL跳转（重定向）的实现

    Express URL跳转(重定向)的实现   Express是一个基于Node.js实现的Web框架,其响应HTTP请求的response对象中有两个用于URL跳转方法res.location()和 ...

  8. Global Translator

    Global Translator插件可以把已经通过翻译服务翻译好的内容生成对应语种的“静态”页面,或者说“缓存”起来,这样在一段时间内(可设置)想访问该语种的这 个页面的访客,就可以在不调用翻译服务 ...

  9. Idea在src下不能编译XML文件

    IDEA编译XML文件,如果需要在src下编译就需要在maven配置中加如下配置: <build> <finalName>SpringDemo</finalName> ...

  10. POJ 3415 Common Substrings ——后缀数组

    [题目分析] 判断有多少个长度不小于k的相同子串的数目. N^2显然是可以做到的. 其实可以维护一个关于height的单调栈,统计一下贡献,就可以了. 其实还是挺难写的OTZ. [代码] #inclu ...