<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ font-size:12px;}
#div1{ width:400px; margin:20px auto;}
#div1 p{ float:right; margin:0;}
#div1 textarea{ width:400px; height:100px;}
#div1 a{ width:50px; height:30px; font-size:16px; line-height:30px; text-align:center; float:right; background:#00FF00; color:#FFFFFF;}
#div1 a.dis{ background:#CCCCCC; color:#666666;}
</style>

<script>

//onchange : 当光标消失的时候，只能触发一次

//ie : onpropertychange : 输入连续触发
//标准：oninput : 也是连续触发

window.onload = function(){
    var oDiv = document.getElementById('div1');
    var oP = oDiv.getElementsByTagName('p')[0];
    var oT = oDiv.getElementsByTagName('textarea')[0];
    var oA = oDiv.getElementsByTagName('a')[0];

    var ie = !-[1,];
    var bBtn = true;
    var timer = null;
    var iNum = 0;

    oT.onfocus = function(){

        if(bBtn){
            oP.innerHTML = '打击虚假消息，建设文明微博，还可以输入<span>140</span>字';
            bBtn = false;
        }

    };

    oT.onblur = function(){

        if(oT.value==''){
            oP.innerHTML = '《新浪微博社区公约(征求意见稿)》意见征求';
            bBtn = true;
        }

    };

    if(ie){
        oT.onpropertychange = toChange;
    }
    else{
        oT.oninput = toChange;
    }

    function toChange(){

        var num = Math.ceil(getLength(oT.value)/2);
        var oSpan = oDiv.getElementsByTagName('span')[0];

        if(!oSpan){return}

        if(num<=140){
            oSpan.innerHTML = 140 - num;
            oSpan.style.color = '';
        }
        else{
            oSpan.innerHTML = num - 140;
            oSpan.style.color = 'red';
        }

        if(oT.value=='' || num>140){
            oA.className = 'dis';
        }
        else{
            oA.className = '';
        }

    }

    function getLength(str){
        return String(str).replace(/[^\x00-\xff]/g,'aa').length;
    }

    oA.onclick = function(){

        if(this.className == 'dis'){

            clearInterval(timer);
            timer = setInterval(function(){

                if(iNum==5){
                    clearInterval(timer);
                    iNum = 0;
                }
                else{
                    iNum++;
                }

                if(iNum%2){
                    oT.style.background = 'red';
                }
                else{
                    oT.style.background = '';
                }

            },100);

        }
        else{
            alert('发布成功！');
        }

    };

};

</script>
</head>

<body>
<div id="div1">
    <p>《新浪微博社区公约(征求意见稿)》意见征求</p>
    <textarea></textarea>
    <a class="dis" href="javascript:;">发布</a>
</div>
</body>
</html>

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

  1. js微博发布框的实现

    观察了微博发布框, 1.发现他的剩余文字是动态改变的, 2.且文字为零时 发布框颜色为暗色 3.文字不符合标准时提交不通过 整理了一下思路 js会主要用到的方法 1.onclick() //点击发布时 ...

  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. 新年Uber司机端换新装啦！

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. PC问题-使用BAT方法设置IP地址

    ::------以下为批处理文件内容---- @echo off ::set slection1= set/p slection1=请输入IP地址: netsh interface ip set ad ...

  3. JBPM学习(五)：流程变量

    1.启动流程实例 // 启动流程实例 @Test public void startProcessInstance() { // 使用指定key的最新版本的流程定义启动流程实例 ProcessInst ...

  4. HDInsight-Hadoop实战（一）站点日志分析

    HDInsight-Hadoop实战(一)站点日志分析 简单介绍 在此演示样例中.你将使用分析站点日志文件的 HDInsight 查询来深入了解客户使用站点的方式.借助此分析.你可查看外部站点一天内对 ...

  5. 简洁 Abstract Factory模式（3.1）

    镇楼 在某些书中使用了二维图说明抽象工厂模式.非常好,可是yqj2065不喜欢他们的产品族/产品等级,改成品牌/产品类型. 抽象工厂模式(abstract factory pattern)较工厂方法模 ...

  6. string的操作

    除了顺序容器共有的操作之外,string类型还提供了一些额外的操作.这些操作中的大部分要么是提供string类和C风格字符数组之间的相互转换,要么是增加了允许我们用下标代替迭代器的版本. 构造stri ...

  7. 【转】Mac和iOS开发资源汇总—更新于2013-07-19

    小引 本文主要汇集一些苹果开发的资源,会经常更新,建议大家把这篇文章单独收藏(在浏览器中按command+D). 今天(2013年7月19日)收录了许多中文网站和博客.大家一定要去感受一下哦. 如果大 ...

  8. list add元素覆盖之前元素问题思考

    最近码墙时发现了一个很有意思的问题,定义一个引用对象,如果在循环外面定义对象,在循环里list.add(对象),最后的结果却是所有的对象值都是一样的,即每add一次,都会把之前所有的数据覆盖掉,蛮有趣 ...

  9. Spring MVC自定义统一异常处理类，并且在控制台中输出错误日志

    在使用SimpleMappingExceptionResolver实现统一异常处理后(参考Spring MVC的异常统一处理方法), 发现出现异常时,log4j无法在控制台输出错误日志.因此需要自定义 ...

  10. Modelsim仿真tcl脚本与wave.do文件

    Modelsim的仿真,如果一直使用图形界面建工程,编译,仿真,一个个加入观察波形的话,未免复杂了一些,尤其是当工程较大,需要观察的信号较多时,下面贴出一些常用的tcl脚本命令和wave.do常用语法 ...