js微博发布框

<!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>
时间: 2024-10-06 03:40:10

js微博发布框的相关文章

js微博发布框的实现

引用前请标明出处:http://www.cnblogs.com/zkhzz/ 谢谢 观察了微博发布框, 1.发现他的剩余文字是动态改变的, 2.且文字为零时 发布框颜色为暗色 3.文字不符合标准时提交不通过 整理了一下思路 js会主要用到的方法 1.onclick() //点击发布时触发 2.onmouseover()// 鼠标滑到 发布  触发 3.onmouseout() //鼠标离开 发布  时触发 4.onfocus() //点击到 输入框 时触发 5.onblur() //点击到 输入

javascript 微博发布框

发布后的内容高度缓慢变大,透明度从0到100 js代码: <script> window.onload=function(){ <span style="white-space:pre"> </span>var oTxt=document.getElementById('txts'); <span style="white-space:pre"> </span>var oBtn=document.getEl

微博发布框---2017-04-14

实现效果: 1.文本框输入内容,低端字数对应减少 2.当文本框内容超出时,会显示字数超出多少 效果图如下: 实现代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #aa{ height: 150px; width: 300px; border: 1px solid grey; } #ff{ co

微博发布框的jquery

<style type="text/css"> textarea{ width: 300px; height: 300px; border: solid 1px #abcdef; } strong{ color: red; } </style> </head> <body> <textarea></textarea> <p>你还可以输入<strong>140</strong>个字

学前端开发:js 原生模仿微博发布

初学前端开发,需要掌握的基础项目案例:js 原生模仿微博发布 <!DOCTYPE html> <html> <head> <metacharset="UTF-8"> <title></title> </head> <styletype="text/css"> *{ margin:0; padding:0; list-style:none; font-family:&quo

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

转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4816865.html 1.先看效果吧,有效果才有动力: 2.html结构: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>模仿微博发布效果</title> 6 <link rel="stylesheet&quo

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

在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单? 大多数人的做法都是:获取元素,绑定事件 1 <ul> 2 <li>跟着ghostwu学习javascript设计模式的应用1</li> 3 <li>跟着ghostwu学习javascript设计模式的应用2</li> 4 <li>跟着ghostwu学习javascript设计模式的应用3</li&g

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

javaScript实现微博发布面板效果.采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninput.onpropertychange等事件 动态添加元素,获取设置动态属性 基本思路: 当内容为空时,发布按钮为灰色,点击时候文本框会闪动,输入文字会提示还可以输入多少文字,超出会提示,且不能发布,要注意的是,判断文本框内容的长度,不能直接来,因为英文属于一个字节,中文占两个,要用正则处理一下! 获取到所有头像的s

jq 微博发布评论案例

<style> * { margin: 0; padding: 0; } ul { list-style: none; } .box { width: 600px; margin: 100px auto; border: 1px solid #000; padding: 20px; } textarea { width: 450px; height: 160px; outline: none; resize: none; } ul { width: 450px; padding-left: 8