javascript基础总结之实例(二)
div的显示和隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <style type="text/css"> #div1{color:red;border:5px solid purple;width:300px;height:200px;} </style> <script type="text/javascript"> function show(){ var ob=document.getElementById('div1'); ob.style.display="block"; } function hide(){ var ob=document.getElementById('div1'); ob.style.display="none"; } </script> </head> <body> <div id="div1">div-1</div> <input onclick="show();" type="button" value="显示div"/> <input onclick="hide();" type="button" value="隐藏div"/> </body> </html>
给div追加内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> </head> <body> <div id="div1"></div> <input type="button" value="给div1追加内容"/> </body> </html> <script type="text/javascript"> document.getElementsByTagName('input')[0].onclick=function(){ document.getElementById('div1').innerHTML="nihao"; } </script>
给img添加属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <script type="text/javascript"> function fun1(){ var obC=document.getElementsByTagName("img"); for(var i=0;i<obC.length;i++){ obC[i].title="tu"+(i+1); } } </script> </head> <body> <img src="images/a.jpg"/> <img src="images/b.jpg"/> <img src="images/c.jpg"/> <br/> <input onclick="fun1();" type="button" value="给img增加属性title"/> </body> </html>
简单的轮滑效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <style type="text/css"> #content{padding:3px;position:relative;width:550px;height:240px;border:5px solid orange;margin:100px auto;} #d1,#d2,#d3,#d4{cursor:pointer;background:#abcdef;position:absolute;border:1px solid red;padding:3px 5px;} #d1{bottom:10px;right:90px;} #d2{bottom:10px;right:65px;} #d3{bottom:10px;right:40px;} #d4{bottom:10px;right:15px;} </style> <script type="text/javascript"> var imgName=['images/a.jpg','images/b.jpg','images/c.jpg','images/d.jpg']; function showImage(num){ curNum=num; //num 1 ----- a.jpg 2----b.jpg var imgPath=imgName[num-1]; document.getElementById('image1').src=imgPath; //无条件把所有的块，背景置#abcdef，去掉加粗效果 for(var i=1;i<=4;i++){ document.getElementById('d'+i).style.background="#abcdef"; document.getElementById('d'+i).style.fontWeight="none"; } //找到当前的小方块，改变背景颜色 document.getElementById("d"+num).style.background="yellow"; document.getElementById("d"+num).style.fontWeight="bold"; } var curNum=1; function autoShowImg(){ curNum++; if(curNum>4){ curNum=1; } showImage(curNum); } </script> </head> <body> <div id="content"> <img onmouseover="clearInterval(t)" onmouseout="t=window.setInterval(autoShowImg,1500)" id="image1" src="images/a.jpg"/> <div id='d1' onclick="showImage(1)" style="background:yellow;font-weight:bold;">1</div> <div id='d2' onclick="showImage(2)">2</div> <div id='d3' onclick="showImage(3)">3</div> <div id='d4' onclick="showImage(4)">4</div> </div> </body> </html> <script type="text/javascript"> var t=window.setInterval(autoShowImg,1500); </script>
获取div中的内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <style type="text/css"> </style> <script type="text/javascript"> function getContent(){ var content=document.getElementById('div1').innerHTML; alert(content.replace(/<.*?>/g,"")); } </script> </head> <body> <div id="div1">div-1<b>nn</b></div> <input onclick="getContent();" type="button" value="获取div的内容"/> </body> </html>
