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

来源：互联网发布：电子图书数据库有哪些编辑：程序博客网时间：2024/06/10 03:01
这段代码的效果具体是输入标题和内容，点击发布把消息发布出去，并使最新的消息始终在内容的最上面，代码为：
<!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节点操作的知识，纯属学习之余练手作品，大家可以参考参考。
0 0