原生js DOM写的类似微博发布的效果
原生js DOM写的类似微博发布的效果<div class="postText"><div id="cnblogs_post_body"> 分享一下以前写的DOM操作的小效果（非常简单的那种），顺便复习一下关于DOM的各个知识点。注释写的还算清楚，这里就不废话了，直接上代码吧。
<div class="cnblogs_code"><!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>
页:
[1]