您的位置：首页 > 其它

文档对象模型DOM(二)

2015-09-10 20:02 501 查看

练习；

要求：界面上有个登录按钮，点击登录的时候，界面中弹出一个登录的方框，点击登录方框中的×的，登录方框消失。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--<link href="../css/lianxi1.css" rel="stylesheet">-->
<!--<script src="../js/lianxi1.js" type="text/javascript"></script>-->
<style>
#div{
width: 300px;
height: 210px;
border: 1px red solid;
margin-top: 100px;
margin-left: 100px;
position: absolute;
display: none;

}
#div1{
width: 30px;
height: 20px;
border: 1px red solid;
background-color: #C2776B;
margin-left: 270px;
line-height: 20px;
text-align: center;
}

button{
margin: 50px;
}
</style>
<script>
window.onload=function(){
var bnt=document.getElementsByTagName('button')[0];
var div=document.getElementById('div');
var div1=document.getElementById('div1');

bnt.onclick=function(){
div.style.display='block';
};
div1.onmouseover=function(){//鼠标移入时
div1.style.cursor='pointer';
div1.style.backgroundColor='red';
};
div1.onmouseout=function(){//鼠标移出时
div1.style.backgroundColor='#C2776B';
};
div1.onclick=function(){
div.style.display='none';
};
};
</script>
</head>
<body>
<button>登录</button>
<div id="div">

<div id="div1">×</div><br/>
  用户名：<input type="text" id="one"/><br/><br/><br/>
  密  码：<input type="password" id="two"/><br/>
<button>登录</button>
<button>取消</button>
</div>
</body>
</html>

要求：有一个写评论的方框，点击评价的时候，评论语从上往下放置，点击删除的时候，评论语从下往上删除；（创建节点，添加节点，删除节点）

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--<script src="../js/lianxi2.js" type="text/javascript"></script>-->
<script>
/**
* Created by acer on 2015/9/10.
*/
window.onload=function(){
function $(id){
return document.getElementById(id);
}

var text=$('text');//评价的内容
var bnt=$('bnt');//评价
var bnt1=$('bnt1');//删除
var btt=$('btt');//评论语放在下面的一个div中

bnt.onclick=function(){
var conent=text.value;
if(conent!=''){
p1=document.createElement('p');//创建节点
p1.innerHTML=conent;
btt.insertBefore(p1,btt.firstChild);//在btt.firstChild之前插入p1
text.value='';
}else{
alert('您还没写评价呢！')
}

};
bnt1.onclick=function(){
if(btt.childNodes.length>0){
btt.removeChild(btt.lastChild);//删除节点
}else{
alert('您没有评语可以删除的！')
}
};

};
</script>
</head>
<body>
<textarea name="text1" id="text" cols="30" rows="10"></textarea>
<button id="bnt">评价</button>
<button id="bnt1">删除</button>
<div id="btt"></div>
</body>
</html>

要求：有三个按钮，点击哪个按钮，这个div就显示成那个按钮的颜色；

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--<script src="../js/lianxi3.js" type="text/javascript"></script>-->
<script>
/**
* Created by acer on 2015/9/10.
*/
window.onload=function(){
function $(id){
return document.getElementById(id);
}
var div1=$('div');
var bnt1=$('red');
var bnt2=$('green');
var bnt3=$('blue');

bnt1.onclick=function(){
div1.style.backgroundColor='red';
};
bnt2.onclick=function(){
div1.style.backgroundColor='green';
};
bnt3.onclick=function(){
div1.style.backgroundColor='blue';
};
};

</script>
</head>
<body>
<h1>请选择您的颜色</h1>
<div id="div" style="width:700px;height: 700px;">
<button id="red">红色</button>
<button id="green">绿色</button>
<button id="blue">蓝色</button>
</div>
</body>
</html>

要求：超简单的QQ发送消息那样

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" href="../css/QQ.css">-->
<!--<script  type="text/javascript" src="../js/QQ.js"></script>-->
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 390px;
height: 300px;
border: 1px blue solid;
margin: 100px;
background-color: aqua;
position: absolute;
}
.left{
left:400px;
}

input{
width: 300px;
height: 20px;
position: absolute;

}
.leftin{
top :420px;
left: 100px;
}
.rightin{
top:420px;
left: 500px;
}
button{
position: absolute;
}
.leftsend{
top:420px;
left: 430px;
}
.rightsend{
top:420px;
left: 830px;
}
.lp{
left: 140px;
top:70px;
color:blueviolet;
font-size: 24px;

}
.rp{
left: 540px;
top:70px;
color:blueviolet;
font-size: 24px;
}

</style>

<script>
/**
* Created by acer on 2015/9/10.
*/

window.onload=function(){
var ldiv=document.getElementsByTagName('div')[0];
var rdiv=document.getElementsByTagName('div')[1];
var ltext=document.getElementsByTagName('input')[0];
var rtext=document.getElementsByTagName('input')[1];
var lbnt=document.getElementsByTagName('button')[0];
var rbnt=document.getElementsByTagName('button')[1];

lbnt.onclick=function(){
var lcontent=ltext.value;
if(lcontent!=''){
var rh=document.createElement('h3');
rh.innerHTML='我：';
var rp=document.createElement('p');
rp.innerHTML='<br/>'+lcontent;

rdiv.appendChild(rh);
rdiv.appendChild(rp);

var lh=document.createElement('h3');
lh.innerHTML='hellokitty燕 ：';
var lp=document.createElement('p');
lp.innerHTML='<br/>'+lcontent;

ldiv.appendChild(lh);
ldiv.appendChild(lp);

ltext.value="";

}
else{
alert('消息不为空！！');
}

};
rbnt.onclick=function(){
var rcontent=rtext.value;
if(rcontent!=''){
var lh=document.createElement('h3');
var rh=document.createElement('h3');
var lp=document.createElement('p');
var rp=document.createElement('p');

lh.innerHTML='*hellokitty燕：';
lp.innerHTML="<br/>"+rcontent;
rh.innerHTML='*我：';
rp.innerHTML="<br/>"+rcontent;
ldiv.appendChild(rh);
rdiv.appendChild(lh);
ldiv.appendChild(rp);
rdiv.appendChild(lp);
rtext.value="";

} else{
alert('消息不为空！！');
}

}

};
</script>
</head>
<body>

<div class="left">hellok燕</div>
<div class="right">我</div>
<input type="text" class="leftin"/>
<button class="leftsend">发送</button>

<input type="text" class="rightin"/>
<button class="rightsend">发送</button>

</body>
</html>

节点类型常量和值（长使用的）

元素类型   NodeType   nodeName     nodeValue
元素          1       元素标签       null
属性          2       属性的名字     属性的值
文本          3        #test        文本值
注释          8        #comment     注释的值
文档          9       #document     null

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

标签：

相关文章推荐

新的分享

章节导航