练习；
要求：界面上有个登录按钮，点击登录的时候，界面中弹出一个登录的方框，点击登录方框中的×的，登录方框消失。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!--<link href="../css/lianxi1.css" rel="stylesheet">--> 7 <!--<script src="../js/lianxi1.js" type="text/javascript"></script>--> 8 <style> 9 #div{ 10 width: 300px; 11 height: 210px; 12 border: 1px red solid; 13 margin-top: 100px; 14 margin-left: 100px; 15 position: absolute; 16 display: none; 17 18 } 19 #div1{ 20 width: 30px; 21 height: 20px; 22 border: 1px red solid; 23 background-color: #C2776B; 24 margin-left: 270px; 25 line-height: 20px; 26 text-align: center; 27 } 28 29 button{ 30 margin: 50px; 31 } 32 </style> 33 <script> 34 window.onload=function(){ 35 var bnt=document.getElementsByTagName('button')[0]; 36 var div=document.getElementById('div'); 37 var div1=document.getElementById('div1'); 38 39 40 bnt.onclick=function(){ 41 div.style.display='block'; 42 }; 43 div1.onmouseover=function(){//鼠标移入时 44 div1.style.cursor='pointer'; 45 div1.style.backgroundColor='red'; 46 }; 47 div1.onmouseout=function(){//鼠标移出时 48 div1.style.backgroundColor='#C2776B'; 49 }; 50 div1.onclick=function(){ 51 div.style.display='none'; 52 }; 53 }; 54 </script> 55 </head> 56 <body> 57 <button>登录</button> 58 <div id="div"> 59 60 <div id="div1">×</div><br/> 61 用户名：<input type="text" id="one"/><br/><br/><br/> 62 密 码：<input type="password" id="two"/><br/> 63 <button>登录</button> 64 <button>取消</button> 65 </div> 66 </body> 67 </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="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