javascript中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> |
|
补充：网页制作,Dom教程 
