js控住DOM实现发布微博简单效果

这段代码的效果具体是输入标题和内容，点击发布把消息发布出去，并使最新的消息始终在内容的最上面，代码为：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>微博消息效果</title>

    <style>

    *{margin:0;padding: 0;}

    .warp{

        width: 600px;

        margin:50px auto 0;

        background-color: #ccc;

    }

    #box{

        width: 600px;

        height: 340px;

        /*background-color: #ccc;*/

        position: relative;

        /*overflow: hidden;*/

        /*margin:50px auto 0;*/

        font-family: '微软雅黑';

    }

    #box .span1{

        position: absolute;

        font-size: 16px;

        line-height: 16px;

        top: 10px;

        left: 5px;

    }

    #box .span2{

        position: absolute;

        font-size: 16px;

        line-height: 16px;

        top: 50px;

        left: 5px;

    }

    #title{

        position: absolute;

        width: 460px;

        height: 20px;

        line-height: 20px;

        font-size: 16px;

        text-indent: 5px;

        left: 70px;

        top: 6px;

    }

    #text{

        position: absolute;

        width: 460px;

        height: 250px;

        resize: none;

        top: 50px;

        left: 70px;

        text-indent: 5px;

        font-size: 16px;

    }

    #box #prompt{

        position: absolute;

        top: 312px;

        left: 340px;

    }

    #prompt1{

        position: absolute;

        top: 312px;

        left: 340px;

        display: none;

    }

    #send{

        position: absolute;

        height: 25px;

        width: 60px;

        line-height: 20px;

        font-size: 16px;

        top: 310px;

        right: 68px;

    }

    #news{

        list-style: none;

        width: 490px;

        margin:10px auto 0px;

        padding-bottom: 5px;

    }

    #news li{

        width: 490px;

        font-size: 14px;

        overflow: hidden;

        background-color: #fff;

        margin-bottom: 5px;

        position: relative;

    }

    #news li h1{

        font-size: 16px;

        line-height: 20px;

    }

    #news li p{

        text-indent: 5px;

        clear: left;

    }

    #news li span{

        position: absolute;

        top: 0px;

        right: 0px;

        cursor: pointer;

    }

    #news span:hover{

        color: red;

    }

    </style>

</head>

<body>

    <div class="warp">

        <div id="box">

            <span class='span1'>标题：</span>

            <input id="title" type="text">

            <span class="span2">内容：</span>

            <textarea id="text"></textarea>

            <em id="prompt">还可以输入<var id="textnum">200</var>字</em>

            <em id="prompt1">你已超出<var id="textnum1"></var>字</em>

            <button id="send">发送</button>

        </div>

        <ul id="news">

                <li><h1></h1><span></span>

                        <p></p>

                </li>

            </ul>

    </div>

    <script>

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

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

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

        var ul=document.getElementById('news');

        var lis=ul.getElementsByTagName('li');

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

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

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

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

        var timer1=null,timer2=null;

        send.onclick=function(){

            if (text.value==''||title.value=='') {

                alert('亲~标题或内容不能为空');return false;

            }

            lis[0].innerHTML='<h1>'+title.value+'</h1><span>×</span><p>'+text.value+'</p>';

            lis[0].children[1].setAttribute('id','close');

            var newLi=document.createElement('li');

            ul.insertBefore(newLi,lis[0]);

            maxheight=lis[1].clientHeight;

            lis[1].style.height=0+'px';

            var x=0;

            var minstep=0;

            var maxstep=20;

            var change=maxheight/maxstep;

            clearInterval(timer1);

            timer1=setInterval(function(){

                minstep++;

                if (minstep>=maxstep) {

                    clearInterval(timer1);

                }

                x+=change;

                lis[1].style.height=x+'px';

            },10)

            title.value='';

            text.value='';

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

             for (var i = 0; i < lis.length; i++) {

                 close.onclick=function(){

                     var isme=this.parentNode;

                     var x=this.parentNode.clientHeight;

                    var minstep=0;

                    var maxstep=20;

                    var change=x/maxstep;

                    clearInterval(timer1);

                    timer1=setInterval(function(){

                        minstep++;

                        if (minstep>=maxstep) {

                            clearInterval(timer1);

                            ul.removeChild(isme);

                        }

                        x-=change;

                        isme.style.height=x+'px';

                    },10)

                   // ul.removeChild(lis[i]);//不可以，不知道绑定的是第几个。

                 }

             }

         }

        text.onfocus=function(){

            // console.log(prompt.children[0].innerHTML);//children是指带有标签的子节点；

            timer2=setInterval(function(){

                if(text.value.length<190){

                    var num=200-text.value.length;

                    textnum.style.color='black';

                    // prompt.style.color='black';

                    textnum.innerHTML=num;//

                    // prompt.innerHTML='还可以输入<var id="textnum">'+num+'</var>字</em>';

                }

                if (text.value.length>=190&&text.value.length<=200){

                    var num=200-text.value.length;

                    // prompt.style.color='black';

                    textnum.style.color='red';//为什么不变红呢？因为这他妹的也是一个未来事件！

                    // prompt.innerHTML='还可以输入<var id="textnum">'+num+'</var>字</em>';

                    textnum.innerHTML=num;

                }

                if (text.value.length>200){

                    var num=text.value.length-200;

                    // prompt.style.color='red';

                    prompt.style.display='none';

                    prompt1.style.display='block';

                    textnum1.style.color='red';

                    textnum1.innerHTML=num;

                }

                // console.log(text.value.length);

            },50)    

        }

        text.onblur=function(){

            clearInterval(timer2);

        }

    </script>

</body>

</html>
这段代码主要运用了一些DOM节点操作的知识，纯属学习之余练手作品，大家可以参考参考。
巴特西

js控住DOM实现发布微博简单效果

最新文章

热门文章
