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