javascript基础总结之实例(一)
样式
<!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"> .c1{color:red;border:5px solid purple;} </style> <script type="text/javascript"> function addStyle(){ var ob=document.getElementById('div1'); ob.style.border="1px solid red";//div1，加边框 ob.style.height="100px"; ob.style.backgroundColor="#abcdef"; } function addClass(){ var ob=document.getElementById('div1'); ob.className="c1"; } </script> </head> <body> <div id="div1">abc</div> <input onclick="addStyle();" type="button" value="增加行内样式"/> <input onclick="addClass();" type="button" value="增加类别样式"/> </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>今天天气很好，两会马上召开了，邀请了何老师，李老师，邀请王老师，王老师没有去。</title> <script type="text/javascript"> var start=0; var t="今天天气很好，两会马上召开了，邀请了何老师，李老师，邀请王老师，王老师没有去。今天天气很好，两会马上召开了，邀请了何老师，李老师，邀请王老师，王老师没有去。"; function showTitle(){ //每次切去一个字，并显示在title中 start++; if(start==t.length/2){ start=0; } var str=t.substr(start); document.title=str; } </script> </head> <body> </body> </html> <script type="text/javascript"> setInterval(showTitle,250); </script>
对联广告
<!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"> *{padding:0;margin:0;} .content{width:800px;height:100px;margin:0 auto;} #advL,#advR{top:0;position:absolute;border:5px solid orange;width:75px;font-size:50px;text-align:center;padding:20px 0;} #advL{left:5px;} #advR{right:5px;} </style> </head> <body> <div id="advL">天<br/>王<br/>盖<br/>地<br/>虎</div> <div id="advR">小<br/>鸡<br/>炖<br/>蘑<br/>菇</div> <div class="content" style="background:#ccc;"></div> <div class="content" style="background:#abc;"></div> <div class="content" style="background:#ccc;"></div> <div class="content" style="background:#abc;"></div> <div class="content" style="background:#ccc;"></div> <div class="content" style="background:#abc;"></div> <div class="content" style="background:#ccc;"></div> <div class="content" style="background:#abc;"></div> <div class="content" style="background:#ccc;"></div> <div class="content" style="background:#abc;"></div> <div class="content" style="background:#ccc;"></div> <div class="content" style="background:#abc;"></div> <div class="content" style="background:#ccc;"></div> <div class="content" style="background:#abc;"></div> <div class="content" style="background:#ccc;"></div> <div class="content" style="background:#abc;"></div> <div class="content" style="background:#ccc;"></div> <div class="content" style="background:#abc;"></div> <div class="content" style="background:#ccc;"></div> <div class="content" style="background:#abc;"></div> <div class="content" style="background:#ccc;"></div> <div class="content" style="background:#abc;"></div> <div class="content" style="background:#ccc;"></div> <div class="content" style="background:#abc;"></div> </body> </html> <script type="text/javascript"> window.onscroll=function(){ //滚动条滚动的距离 var T=document.body.scrollTop+document.documentElement.scrollTop; //让advL advR和滚动条一起动。 var obL=document.getElementById("advL"); var obR=document.getElementById("advR"); obL.style.top=T+"px"; obR.style.top=T+"px"; } </script>
