原生js DOM写的类似微博发布的效果

　　分享一下以前写的DOM操作的小效果（非常简单的那种），顺便复习一下关于DOM的各个知识点。注释写的还算清楚，这里就不废话了，直接上代码吧。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>微博发布</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
h1{margin:20px auto;font-size:30px;width:200px;text-align:center;color:blue;}
#test1{display:block;width:400px;height:70px;margin:20px auto 10px;}
#test2{display:block;margin-left:800px;width:60px;height:30px;font-size:20px;}
#test3{margin:10px auto;border:1px #444 solid;width:400px;min-height:300px;padding-bottom:10px;overflow:hidden;color:blue;}
.test{border:1px blue solid;width:400px;overflow:hidden;}
.time{margin-left:240px;color:#666;font-size:16px;}
.inf{margin:10px 10px;}
.con{margin:10px;min-height:20px;}
</style>
</head>
<body>
    <h1>微博发布</h1>
    <input type="text" id="test1" value="" />
    <input type="button" id="test2" value="发布"/>
    <div id="test3"></div>
<script type="text/javascript">
<!--
    var test1=document.getElementById("test1");
    var test2=document.getElementById("test2");
    var test3=document.getElementById("test3");
    var t,r,i=0;
    
    ///////////////点击发布的方法
    test2.onclick=move;
    function move(){
        var test=document.createElement('div');                            //创建一个微博框节点
        if(test1.value==""){                                            //如果输入的内容为空，重新输入
            alert("亲，请输入内容哦！");
            return;
        }else{
            test.setAttribute("class","test");                            //test的css样式
            test.innerHTML ='<p class="con">'+test1.value+'</p>';        //给节点添加内容 
            test3.insertBefore(test,test3.firstChild);                    //把创建的节点插入到temp3文档中,最新发布的放在第一个
            test1.value="";                                                //当发布微博后，输入框里的内容消失
        ///////////////微博框运动
            var child=document.getElementById("test3").childNodes;        //获取所有test3的所有子节点
            var n=-test.offsetHeight;
            function run(){                                                //点击按钮时，微博框运动方法
                n++; 
                test.style.marginTop=n+"px";
                if(n>=0){n=0;return;clearTimeout(t);}                    ////此处return?????
                t=setTimeout(run,20);
            }run();    
        }
        ////////创建微博中时间和删除按钮节点
        var inf=document.createElement('div');                            //创建一个div节点，此div的目的是包含时间和删除按钮事件
            inf.setAttribute("class","inf");                            //inf的css样式
            var d=new Date();                                            //设置时间
            inf.innerHTML ='<span class="time">'+d.getHours()+"时"+d.getMinutes()+"分"+d.getSeconds()+"秒"+'</span>';//绑定时间 
            test.appendChild(inf);                                        //把inf节点插入到test中        
        var del=document.createElement('input');                        //创建删除按钮节点
            del.type="button";                                            //input的类型为button
            del.value="删除";
            del.style.float="right";
            inf.appendChild(del);                                        //del节点插入到test中
        /////删除按钮事件,删除的动画效果
        del.onclick=dele;
        function dele(){    
            //点击按钮，微博消失
            var m=test.offsetHeight;                                    //高度的值不能直接赋给变量,所以此处不用test.style.height
            function run2(){
                m--;
                r=setTimeout(run2,20);
                test.style.height=m+"px";
                if(m<=0)
                {m=0;clearTimeout(r);test3.removeChild(test);}            //test3.removeChild(test);//删除test的内容    
            }run2();
        }
    }
//-->
</script>
</body>
</html>

效果图如下：

 

posted on 2012-10-19 23:32  挨踢前端  阅读(1857)  评论(0)  编辑  收藏  举报

导航