JavaScript对象应用-字符串和图片对象
1.1 应用 String对象截取特定文字
利用String 对象的charAt() 和 substring() 方法等，截取特定文字或字段文字显示在页面上
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html"; charset="gb2312"> 4 <title>字符串对象应用实例</title> 5 <script language="JavaScript"> 6 <!-- 7 function CheckSpace(string) 8 { 9 var index,len 10 while(true) 11 { 12 index=string.indexOf(" "); 13 //如果没有空格，就终止 14 if(index==-1) 15 break; 16 //求出字符串的长度 17 len=string.length; 18 //删除空格 19 string=string.substring(0,index)+string.substring((index+1),len); 20 21 } 22 return string 23 24 } 25 --> 26 </script> 27 </head> 28 <body> 29 <script language="JavaScript"> 30 <!-- 31 var s1=new String("I love China !"); 32 document.write("<h1>[1]"+s1.charAt(7)+"<br>"); 33 34 var s2=new String("中国首都是北京"); 35 document.write("[2]"+s2.charAt(4)+"<br>"); 36 37 var s3=new String("I love China !"); 38 document.write("[3]"+s3.substring(1,6)+"<br>"); 39 40 document.write("[4]"+"中国的首都是北京".substring(0,5)+"<br>"); 41 42 document.write("[5]"+"I love China !".substring(4)+"<br>"); 43 44 document.write("[6]"+"I love China !".substring(5,2)+"<br>"); 45 document.write("<h1>"); 46 47 var str="" 48 str+=CheckSpace("I am a student.")+"\n"; 49 str+=CheckSpace("成了一名 奥运 志愿者!"); 50 alert(str); 51 --> 52 </script> 53 </body> 54 </html>
1.2 应用 Image 对象实现动画
1 <html> 2 <head> 3 <title>应用image对象实现动画</title> 4 </head> 5 <script language="JavaScpript"> 6 var myImage=new Array[10]; 7 for(i=0;i<11; i++) 8 myImage[i] =new Image(); 9 myImage[0].src="pic/t0.jpg"; 10 myImage[1].src="pic/t1.jpg"; 11 myImage[2].src="pic/t2.jpg"; 12 myImage[3].src="pic/t3.jpg"; 13 myImage[4].src="pic/t4.jpg"; 14 myImage[5].src="pic/t5.jpg"; 15 myImage[6].src="pic/t6.jpg"; 16 myImage[7].src="pic/t7.jpg"; 17 myImage[8].src="pic/t8.jpg"; 18 myImage[9].src="pic/t9.jpg"; 19 myImage[10].src="pic/t10.jpg"; 20 21 var k=0; 22 function changePIC(){ 23 document.mi1.src=[k].src; 24 k++; 25 if(k==9) 26 k=0; 27 setTimeout(changePIC,200); 28 } 29 </script> 30 <body> 31 <img name="mi1" src="pic/t0.jpg"> 32 <script language="JavaScript"> 33 changPIC(); 34 </script> 35 </body> 36 </html>
1.3 Style 对象应用
1 <html> 2 <head> 3 <title>style 对象应用</title> 4 </head> 5 <script language="JavaScript"> 6 function changeTablePro(){ 7 MTB.style.borderLeft="solid red 2px"; 8 MTB.style.borderRight="solid red 2px"; 9 MTD1.style.borderLeft="solid blue 2px"; 10 MTD1.style.borderRight="solid blue 2px"; 11 MTD2.style.borderLeft="solid blue 2px"; 12 MTD2.style.borderRight="solid blue 2px"; 13 MTD3.style.borderLeft="solid blue 2px"; 14 MTD3.style.borderRight="solid blue 2px"; 15 MTD4.style.borderLeft="solid blue 2px"; 16 MTD4.style.borderRight="solid blue 2px"; 17 } 18 function resetTablePro(){ 19 MTB.style.borderLeft="solid blue 1px"; 20 MTB.style.borderRight="solid blue 1px"; 21 MTD1.style.borderLeft="solid red 1px"; 22 MTD1.style.borderRight="solid red 1px"; 23 MTD2.style.borderLeft="solid red 1px"; 24 MTD2.style.borderRight="solid red 1px"; 25 MTD3.style.borderLeft="solid red 1px"; 26 MTD3.style.borderRight="solid red 1px"; 27 MTD4.style.borderLeft="solid red 1px"; 28 MTD4.style.borderRight="solid red 1px"; 29 } 30 <script> 31 <body id="BD" style="background:url(back49.gif)repeat fixed;"> 32 <p> 33 <br> 34 <pre> 35 这里是关于style 对象的应用实例，我们将通过对 style 对象的应用来改变页面的背景属性 36 <br> 37 </pre> 38 <from> 39 <input type="button" value="背景图像滚动" onclick="JavaScript:BD.style.backgroundAttachment='scroll' "> 40 <input type="button" value="背景图像静止" onclick="JavaScript:BD.style.backgroundAttachment='fixed'"> 41 <p> 42 <input type="button" value="清除背景图像" onclick="JavaScript:BD.style.backgroundImage=' ' "> 43 <input type="button" value="添加背景图像" onclick="JavaScript:BD.style.backgroundImage='url(back49.gif)'"> 44 <p> 45 <input type="button" value="还 原 背 景 初 始 设 置" onclick="JavaScript:BD.style.background='url(back49.gif)repeat fixed'"> 46 <p> 47 <input type="button value="改变表格边框属性"" onclick="changeTablePro()"> 48 <p> 49 <input type="button value="还原表格初始设置" onclick="resetTabelPro()"> 50 </from> 51 <p> 52 <table id="MTB" style="border-left:solid blue 1px;border-right:dotted blue 1px;"> 53 <tr> 54 <td id="MTD1" style="border-left:solid red 1px;border-right:solid 1px;padding:10px;spacing:10px;"> 55 <pre> 56 这个实例中，初始化设置了网页背景图像，在水平和垂直方向重复显示并静止不动，不随滚动条的拖动而滚动。 57 </pre> 58 </td> 59 <td id="MTD2" style="border-left:solid red 1px;border-right:solid 1px;padding:10px;spacing:10px;"> 60 <pre> 61 当利用鼠标单击各个按钮是，会见到所发生的改变。 62 </pre> 63 </td> 64 </tr> 65 <tr> 66 <td id="MTD3" style="border-left:solid red 1px;border-right:solid red 1px;padding:10px;spacing:10px;"> 67 <pre> 68 每一种改变和变化，都是针对特定的id 才随着变化的。 69 </pre> 70 </td> 71 <td id="MTD4" style="border-left:solid red 1px;border-right:solid red 1px;padding:10px;spacing:10px;"> 72 <pre> 73 本实例中的六个按钮，执行相应程序后会对页面背景属性，表格属性进行更改。 74 程序代码中都采用 style 对象属性来调用相应的属性，进行控制实现各种变化。 75 </pre> 76 </td> 77 </tr> 78 </table> 79 </body> 80 </html>
