您的位置：首页 > Web前端 > JavaScript

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

2012-10-19 23:32 239 查看

　　分享一下以前写的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>

效果图如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航