javascript之动态网页编程之四
2015-03-07 16:36
239 查看
第二十一章 使用Cookie保存对象
浏览器Cookie是一个容易引起误解的话题，普遍认为Cookie会对用户保密性造成威胁。然而实际上，Cookie确实会溢出。但在网页中却是不可缺少的。
Cookie产生于这样的事实，HTTP是一种超越国界的协议。如果同一个客户端向同一服务器多次发送请求，将无法保留其用户信息或总是保持连接，除非在服务器上保留一些状态，可以通过数据库来袜。，
20.1 Cookie概述
Cookie是一小段文本类型的数据，由服务器发送，并保留在客户端计算机上，一旦Cookie建立，客户端就会利用Cookie 产生的每个请求向服务器端返回Cookie,这就允许服务器为每个Cookie创建一个值，并记录在Cookie中，在产生应答时可以对这些Cookie进行访问，每一个Cookie由多个部分组成，其中，很多部分是可选项。
name=value[;expires=date][;domain=domain][;path=path][;secure]
其中，中括号的内容是可选的。并在相互之间可以打乱顺序。
name=value 为指定的Cookie设置一个由value指定的字符串
expires=date 设置一个由date指定的Cookie到期时间，date字符串为Internet标准GMT格式。可以使用Date的toGMtString（）方法。
domain=domain 为Cookie设置一个由domain指定的域名，仅当对该 域名发送请求时，Cookie才会被返回
path=path 是一个字符串，指明了Cookie要返回域名的路径的一个子集。
secure 指明Cookie仅以安全方式HTTPS返回
没有设置expires的Cookie称为会话期Cookie,仅在当前浏览器的会话期内有效。一旦用户关闭浏览器，Cookie就会失效，除会话期Cookie外，其他的Cookie称为持久性Cookie,持久性Cookie会被浏览器一直保留到失效期为止。
会话期有时也称为内存型Cookie,持久性Cookie也被称为磁盘型Cookie.
当用户连接一个站点时，浏览器会检查Cookie列表进行匹配。如果一个域名及其路径能够与给出的URL匹配。Cookie中的name=value项会被发送到服务器。如果有多个Cookie可以匹配，浏览器会将每个匹配项用分号;隔开。并组成一个字符串，。
21.2 在JavaScript中使用Cookie
几乎所有支持JavaScript的浏览器都支持使用脚本访问Cookie。Document对象提供了cookie属性。该属性即是可读的也是可写的。
当给document.cookie赋值后，浏览器会作为Cookie来处理，并将其加入Cookie列表中，例 如：
document.cookie="username=mengite;expires=Sun,01-Jul-2007 08:00:00 GMT;path=/home";
当产生一个请求时，该代码将会向当前Web服务器发送一个Cookie，其username为mengite，上面的代码省略了一些可选项。浏览器会使用默认设置。
浏览器假定任何Cookie都是完备的。在名称/值中不可以出现空格，逗号和分号。否则会使该Cookie被截断。全局方法escape()和unescape()可用于各主流浏览器，将接收到的字符串作为参数，进行编码或解码。然后返回相应的结果，。代码如下所示：
<!--21.1.html-->
<html>
<head>
<style>
</style>
<link type="text/css" rel="stylesheet" href="21.1.css">
<script src="21.1.js" language="javascript"></script>
</head>
<body>
<script language="javascript">
var problemString="get rid of, ; and ?";
var encodedString=escape(problemString);
alert("原始数据:"+problemString+"\n"+"编码结果："+encodedString+"\n"+"解码结果:"+unescape(encodedString));
</script>
</body>
</html>
当给document.cookie赋予一个新的Cookie值时，当前的Cookie并不会被替换。新的Cookie会被解析。并且其名称/值会被追加在列表的结尾。但如果为一个已经存在的Cookie值赋值新值。原来的值会被新值覆盖。
如下代码：
<!--21.2.html-->
<html>
<head></head>
<body>
<script language="javascript">
//document.cookie="username=thomas";
//document.cookie="username=mengite";
alert("Cookies:"+document.cookie);
</script>
</body>
</html>
从前面的例子可以看出，读取Cookie和检查document.cookie字符串一样，是很简单的事情，称有难度的是分析字符串，。并提取感兴趣的信息。
下面的代码会分析当前的Cookie，并将其放置在一个按名称索引的关联数组中。
<!--21.3.html-->
<html>
<head></head>
<body>
<script language="javascript">
var cookies=new Object();
function estractCookies(){
var name,value;
var beginning,middle,end;
for(name in cookies){
cookies=new Object();
break;
}
beginning=0;
while(beginning<<document.cookie.length){
middle=document.cookie.indexOf('=',beginning);
end=document.cookie.indexOf(';',beginning);
if(end==-1)
end=doucment.cookie.length;
if((middle>>end)||(middle==-1)){
name=document.cookie.substring(beginning,end);
value="";
}
else{
name=document.cookie.substring(beginning,middle);
value=document.cookie.substring(middle+1,end);
}
cookies[name]=unescape(value);
beginning=end+2;
document.write(name+":"+cookies[name]+"\n");
}
}
</script>
</body>
</html>
删除Cookie
如果设置了同名的Cookie，则原Cookie将被删除。
要删除一个名为username且不带域和路径的Cookie可以使用如下代码：
document.cookie="username=nothing;expires=thu,01-JAN-1970 00:00:01 GMT";
例如，下面的代码将建立一个Cookie，然后立即删除
document.cookie="username";
document.cookie="username;expires=Thu,01-Jan-1970 00:01:01 GMT";
21.2.5安全问题
由于Cookie驻留在用户的计算机中，所以无法阻止用户编辑Cookie，因此，对于没有加密的敏感信息，不应该存在于Cookie中，例如，假设在Cookie中设置了一个邮件地址的用户名，并且没有施加任何信息，如果将其中的用户名部分进行修改。就会读取其他用户的信息。
21.3 管理用户状态
Cookie可以用来存储状态信息，因此可以使用Cookie进行用户状态的管理。
21.3.1 重定向
有的网站会根据不同的判断条件，将浏览者引导到不同的页面，例如，第一次对页面的访问，会被引导到一个介绍性页面，以后的访问则被引导到内容页面。这咱方法的实现方式如下：
var cookies=new Object();
document.cookie="cookiesenabled=yes";
estractCookies();
if(cookies["cookiesenabled"]=="yes"){
if(cookies["returninguser"]=="true")
location.href="/content.html";
else
{
var expiration=new Date();expiration.setYear(expiration.getYear+2);
document.cookie="returningusr=true;expires="+expiration.toGMTString();
location.href="/introduction.html";
}
}
弹出窗口
var cookie=new Object();
document.cookie="cookiesenabled=yes";
extractCookies();
if(cookies["cookiesenabled"]=="yes"&&!cookies["has_seen_tip"])
{
document.cookie="has_seen_tip=true";
window.open("/tipoftheday.html","tipwindow","resizable");
}
21.4 IE浏览器状态扩展
IE5中包含了一项新技术，称为DHTMl行为。behavior.DHTML行为是具有特殊功能的小组件，可以被很容易的添加到页面当中，使用DHTMl可以不使用Cookie，而利用DHTML来存储客户端状态。
当用户返回时，saveHistory行为会保存页面状态。尽管这种存储只存在于当前会话期。但与传统的Cookie相比，更为灵活。
<style>
.saveHistory{behavior:url(#default#savehistory);
</style>
<form action="#" method="get">
<input type="text" class="saveHistory" id="persistentInput">
</form>
<br>
第二十二章 图像处理
图像是Web页面的一大组成部分。JavaScript提供了图像处理的功能。
22.1 通过单击按钮来改变图像
<!--22.1.html-->
<html>
<head></head>
<body>
<center>
<form name="myform" id="myform">
<img name="myimg" border="0" src="1.jpg" width="296" height="224">
<br>
<br>
<input type="button" value="change image" onclick="changeImage();">
</form>
</center>
<script language="javascript">
function changeImage(){
document.myform.myimg.src="2.jpg";
}
</script>
</body>
</html>
22.2 彩色页面
在前面的例子中已经初步了解到了图像处理，本节通过一个例子，来熟悉javaScript的image对象及功能。
程序的功能是，首先显示48幅相同的图像，然后通过单击按钮，随机的将其中的一些图像替换为其他图像。
因为在Web页面中所有<img>元素在document.images[]数组中都可以索引到，所以要在Web页面中放置一幅图像。可以使用该数组。
<!--22.2.html-->
<html>
<head></head>
<body>
<center>
<form>
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<br><br>
<input type="button" value="新图片" onclick="newImage();">
</form>
</center>
<script language="javascript">
var imageArray=new Array(5);
imageArray[0]=new Image(50,50);
imageArray[1]=new Image(50,50);
imageArray[2]=new Image(50,50);
imageArray[3]=new Image(50,50);
imageArray[0].src="5.jpg";
imageArray[1].src="2.jpg";
imageArray[3].src="3.jpg";
imageArray[4].src="4.jpg";
function newImage(){
document.images[Math.round(50*Math.random())].src=imageArray[Math.round(5*Math.random())].src;
}
</script>
</body>
</html>
223.3IE浏览器的结构化图形控件
上一节从磁盘文件将图像载入到Image对象中，其实，IE浏览器还支持“结构化图像控件”，该控件是Microsoft公司的ActiveX控件，可以通过<object>标识来创建该控件。
要使用结构化图形控件的属性。需要在<OBJECT>元素中放入一个<PARAM>标识。
<OBJECT id=object style="WIDTH:width;HEIGHT:height;Z-INDEX:z-index"classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C9083EE6">
<PARAM name="PropertyName" VALUE="Value">
</OBJECT>
下表列出了该控件的属性及含义：
CoordinateSystem 设置坐标系统
DrawingSurface 设置或返回DerectAnimation面板，该控件内容可见的描述
ExtentHeight,ExtentWidth,ExtentLeft,Extenttop 设置该图像的左，顶，宽，高值。、
HighQuality 返回anti-aliasing开关状态
Image 用DirectAnimationIDAImage填充结构化的图形形状
Library 返回DirectAnimation库的参数
MouseEventsEnabled 设置或返回鼠标事件是不是由结构化的图形对象处理
PreserveAspectRatio 设置或返回一个值，表明范围设置时是不是保持屏幕纵横比。
SourceURL 使结构化的图形控件能使用外部文件作为图形的原始描述
Transform
方法：
要使用结构化图形控件的方法，可以通过下面给出的代码事建立<OBJECT>标识
<OBJECT id=object style="WIDTH:width;HEIGHT:height;Z-INDEX:z-index"classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C9083EE6">
<PARAM name="linennn" value="method">
</OBJECT>
Arc 创建一个简单的圆弧或椭圆弧
FileSpline 创建一个封闭的由系列点定义的锯齿形
Oval 创建一个椭圆
Pie 创建一个在关联矩形中民封闭的椭圆弧
Polygon 创建一个封闭多边形
PolyLine 创建一个分段线
PolySpline 创建一个开发的锯齿形
Rect 创建一个矩形
RoundRect 创建一个圆矩形
SetFillColor 设置图形填充的前景色和背景色
SetFillStyle 设置填充类型
SetFont 设置控件字体
SetGradientFill 指定梯度填充的始末点
SetHatchFill 指定填充是不是透明
SetLineColor 设置绘制图形的线条颜色
SetLineStyle 改变当前图形的线条风格
SetGradientShape 设置梯度图形为多边形轮廓
SetTextureFill 设置结构化图形的主体源
Text 以当前字体和颜色创建一个字符串
下面是对该代码的应用：
22.4 在Web页面中定位图像
图像处理的功能还包括将其放在想要的位置，该工作在HTML中很容易实现。
22.5 在IE浏览器中拖动图像。
<html>
<head></head>
<body>
<center><h1>在IE中拖动图像</h1></center>
<div style="position:relative" id="imagediv">
<img id="image2" style="container:positioned;position:absolute;top:60px;left:250px;width:236px;height:108px" src="1.jpg">
<img style="container:positioned;position:absolute;top:60px;left:60px;width:236px;height:108px" src="2.jpg" onmouseMove="moveImage()">
</div>
<script type="text/javascript">
function moveImage(){
if(window.event.button!=1)
return;
with(window.event.srcElement.style){
pixelLeft=window.event.x-236/2-document.all.imagediv.offsetLeft;
pixelTop=window.event.y-108/2+document.all.imagediv.offsetTop;
}
window.event.returnValue=false;
}
</script>
</body>
</html>
图片倒映：
<html>
<head>图片倒映</head>
<body onload="f1()">
<img id="reflect" src="1.jpg"><br>
<img id="mdiv" src="1.jpg" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()">
<script type="text/javascript">
function f1(){
setInterval("mdiv.filters.wave.phase+=10",100);
}
</script>
</body>
</html>
不停闪烁的图片
<html>
<head>不停闪烁的图片</head>
<body onload="soccerOnload()">
<div id="soccer" style="position:absolute;left:50;top:50">
<a href="" target="_blank">
<img src="1.jpg">
</a>
</div>
<script type="text/javascript">
var mesecs=500;
var counter=0;
function soccerOnload(){
setTimeout("blink()",mesecs);
}
function blink(){
soccer.style.visibility=(soccer.style.visibility=="hidden")?"visible":"hidden";
counter+=1;
setTimeout("blink()",mesecs);
}
</script>
</body>
</html>
图片的渐隐渐现
<html>
<head></head>
<body onload="showimage()">
<div id="testimage" style="position:absolute;visibility:visible;top:30px;left:60px"></div>
<script type="text/javascript">
var i_strngth=1;
var i_image=0;
var imageurl=new Array();
imageurl[0]="1.jpg";
imageurl[1]="2.jpg";
imageurl[3]="3.jpg";
function showimage(){
if(document.all){
if(i_strngth<=110){
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth+10;
var timer=setTimeout("showimage()",100);
}
else{
clearTimeout(timer);
var timer=setTimeout("hideimage()",1000);
}
}
}
function hideimage(){
if(i_strngth>=-10){
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth-=10;
var timer=setTimeout("hideimage()",100);
}else{
clearTimeout(timer);
i_image++;
if(i_image>=imageurl.length)
i_image=0;
i_strngth=1;
var timer=setTimeout("showimage()",500);
}
}
</script>
</body>
</html>
浏览器Cookie是一个容易引起误解的话题，普遍认为Cookie会对用户保密性造成威胁。然而实际上，Cookie确实会溢出。但在网页中却是不可缺少的。
Cookie产生于这样的事实，HTTP是一种超越国界的协议。如果同一个客户端向同一服务器多次发送请求，将无法保留其用户信息或总是保持连接，除非在服务器上保留一些状态，可以通过数据库来袜。，
20.1 Cookie概述
Cookie是一小段文本类型的数据，由服务器发送，并保留在客户端计算机上，一旦Cookie建立，客户端就会利用Cookie 产生的每个请求向服务器端返回Cookie,这就允许服务器为每个Cookie创建一个值，并记录在Cookie中，在产生应答时可以对这些Cookie进行访问，每一个Cookie由多个部分组成，其中，很多部分是可选项。
name=value[;expires=date][;domain=domain][;path=path][;secure]
其中，中括号的内容是可选的。并在相互之间可以打乱顺序。
name=value 为指定的Cookie设置一个由value指定的字符串
expires=date 设置一个由date指定的Cookie到期时间，date字符串为Internet标准GMT格式。可以使用Date的toGMtString（）方法。
domain=domain 为Cookie设置一个由domain指定的域名，仅当对该 域名发送请求时，Cookie才会被返回
path=path 是一个字符串，指明了Cookie要返回域名的路径的一个子集。
secure 指明Cookie仅以安全方式HTTPS返回
没有设置expires的Cookie称为会话期Cookie,仅在当前浏览器的会话期内有效。一旦用户关闭浏览器，Cookie就会失效，除会话期Cookie外，其他的Cookie称为持久性Cookie,持久性Cookie会被浏览器一直保留到失效期为止。
会话期有时也称为内存型Cookie,持久性Cookie也被称为磁盘型Cookie.
当用户连接一个站点时，浏览器会检查Cookie列表进行匹配。如果一个域名及其路径能够与给出的URL匹配。Cookie中的name=value项会被发送到服务器。如果有多个Cookie可以匹配，浏览器会将每个匹配项用分号;隔开。并组成一个字符串，。
21.2 在JavaScript中使用Cookie
几乎所有支持JavaScript的浏览器都支持使用脚本访问Cookie。Document对象提供了cookie属性。该属性即是可读的也是可写的。
当给document.cookie赋值后，浏览器会作为Cookie来处理，并将其加入Cookie列表中，例 如：
document.cookie="username=mengite;expires=Sun,01-Jul-2007 08:00:00 GMT;path=/home";
当产生一个请求时，该代码将会向当前Web服务器发送一个Cookie，其username为mengite，上面的代码省略了一些可选项。浏览器会使用默认设置。
浏览器假定任何Cookie都是完备的。在名称/值中不可以出现空格，逗号和分号。否则会使该Cookie被截断。全局方法escape()和unescape()可用于各主流浏览器，将接收到的字符串作为参数，进行编码或解码。然后返回相应的结果，。代码如下所示：
<!--21.1.html-->
<html>
<head>
<style>
</style>
<link type="text/css" rel="stylesheet" href="21.1.css">
<script src="21.1.js" language="javascript"></script>
</head>
<body>
<script language="javascript">
var problemString="get rid of, ; and ?";
var encodedString=escape(problemString);
alert("原始数据:"+problemString+"\n"+"编码结果："+encodedString+"\n"+"解码结果:"+unescape(encodedString));
</script>
</body>
</html>
当给document.cookie赋予一个新的Cookie值时，当前的Cookie并不会被替换。新的Cookie会被解析。并且其名称/值会被追加在列表的结尾。但如果为一个已经存在的Cookie值赋值新值。原来的值会被新值覆盖。
如下代码：
<!--21.2.html-->
<html>
<head></head>
<body>
<script language="javascript">
//document.cookie="username=thomas";
//document.cookie="username=mengite";
alert("Cookies:"+document.cookie);
</script>
</body>
</html>
从前面的例子可以看出，读取Cookie和检查document.cookie字符串一样，是很简单的事情，称有难度的是分析字符串，。并提取感兴趣的信息。
下面的代码会分析当前的Cookie，并将其放置在一个按名称索引的关联数组中。
<!--21.3.html-->
<html>
<head></head>
<body>
<script language="javascript">
var cookies=new Object();
function estractCookies(){
var name,value;
var beginning,middle,end;
for(name in cookies){
cookies=new Object();
break;
}
beginning=0;
while(beginning<<document.cookie.length){
middle=document.cookie.indexOf('=',beginning);
end=document.cookie.indexOf(';',beginning);
if(end==-1)
end=doucment.cookie.length;
if((middle>>end)||(middle==-1)){
name=document.cookie.substring(beginning,end);
value="";
}
else{
name=document.cookie.substring(beginning,middle);
value=document.cookie.substring(middle+1,end);
}
cookies[name]=unescape(value);
beginning=end+2;
document.write(name+":"+cookies[name]+"\n");
}
}
</script>
</body>
</html>
删除Cookie
如果设置了同名的Cookie，则原Cookie将被删除。
要删除一个名为username且不带域和路径的Cookie可以使用如下代码：
document.cookie="username=nothing;expires=thu,01-JAN-1970 00:00:01 GMT";
例如，下面的代码将建立一个Cookie，然后立即删除
document.cookie="username";
document.cookie="username;expires=Thu,01-Jan-1970 00:01:01 GMT";
21.2.5安全问题
由于Cookie驻留在用户的计算机中，所以无法阻止用户编辑Cookie，因此，对于没有加密的敏感信息，不应该存在于Cookie中，例如，假设在Cookie中设置了一个邮件地址的用户名，并且没有施加任何信息，如果将其中的用户名部分进行修改。就会读取其他用户的信息。
21.3 管理用户状态
Cookie可以用来存储状态信息，因此可以使用Cookie进行用户状态的管理。
21.3.1 重定向
有的网站会根据不同的判断条件，将浏览者引导到不同的页面，例如，第一次对页面的访问，会被引导到一个介绍性页面，以后的访问则被引导到内容页面。这咱方法的实现方式如下：
var cookies=new Object();
document.cookie="cookiesenabled=yes";
estractCookies();
if(cookies["cookiesenabled"]=="yes"){
if(cookies["returninguser"]=="true")
location.href="/content.html";
else
{
var expiration=new Date();expiration.setYear(expiration.getYear+2);
document.cookie="returningusr=true;expires="+expiration.toGMTString();
location.href="/introduction.html";
}
}
弹出窗口
var cookie=new Object();
document.cookie="cookiesenabled=yes";
extractCookies();
if(cookies["cookiesenabled"]=="yes"&&!cookies["has_seen_tip"])
{
document.cookie="has_seen_tip=true";
window.open("/tipoftheday.html","tipwindow","resizable");
}
21.4 IE浏览器状态扩展
IE5中包含了一项新技术，称为DHTMl行为。behavior.DHTML行为是具有特殊功能的小组件，可以被很容易的添加到页面当中，使用DHTMl可以不使用Cookie，而利用DHTML来存储客户端状态。
当用户返回时，saveHistory行为会保存页面状态。尽管这种存储只存在于当前会话期。但与传统的Cookie相比，更为灵活。
<style>
.saveHistory{behavior:url(#default#savehistory);
</style>
<form action="#" method="get">
<input type="text" class="saveHistory" id="persistentInput">
</form>
<br>
第二十二章 图像处理
图像是Web页面的一大组成部分。JavaScript提供了图像处理的功能。
22.1 通过单击按钮来改变图像
<!--22.1.html-->
<html>
<head></head>
<body>
<center>
<form name="myform" id="myform">
<img name="myimg" border="0" src="1.jpg" width="296" height="224">
<br>
<br>
<input type="button" value="change image" onclick="changeImage();">
</form>
</center>
<script language="javascript">
function changeImage(){
document.myform.myimg.src="2.jpg";
}
</script>
</body>
</html>
22.2 彩色页面
在前面的例子中已经初步了解到了图像处理，本节通过一个例子，来熟悉javaScript的image对象及功能。
程序的功能是，首先显示48幅相同的图像，然后通过单击按钮，随机的将其中的一些图像替换为其他图像。
因为在Web页面中所有<img>元素在document.images[]数组中都可以索引到，所以要在Web页面中放置一幅图像。可以使用该数组。
<!--22.2.html-->
<html>
<head></head>
<body>
<center>
<form>
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<img width="50" height="50" src="1.jpg">
<br><br>
<input type="button" value="新图片" onclick="newImage();">
</form>
</center>
<script language="javascript">
var imageArray=new Array(5);
imageArray[0]=new Image(50,50);
imageArray[1]=new Image(50,50);
imageArray[2]=new Image(50,50);
imageArray[3]=new Image(50,50);
imageArray[0].src="5.jpg";
imageArray[1].src="2.jpg";
imageArray[3].src="3.jpg";
imageArray[4].src="4.jpg";
function newImage(){
document.images[Math.round(50*Math.random())].src=imageArray[Math.round(5*Math.random())].src;
}
</script>
</body>
</html>
223.3IE浏览器的结构化图形控件
上一节从磁盘文件将图像载入到Image对象中，其实，IE浏览器还支持“结构化图像控件”，该控件是Microsoft公司的ActiveX控件，可以通过<object>标识来创建该控件。
要使用结构化图形控件的属性。需要在<OBJECT>元素中放入一个<PARAM>标识。
<OBJECT id=object style="WIDTH:width;HEIGHT:height;Z-INDEX:z-index"classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C9083EE6">
<PARAM name="PropertyName" VALUE="Value">
</OBJECT>
下表列出了该控件的属性及含义：
CoordinateSystem 设置坐标系统
DrawingSurface 设置或返回DerectAnimation面板，该控件内容可见的描述
ExtentHeight,ExtentWidth,ExtentLeft,Extenttop 设置该图像的左，顶，宽，高值。、
HighQuality 返回anti-aliasing开关状态
Image 用DirectAnimationIDAImage填充结构化的图形形状
Library 返回DirectAnimation库的参数
MouseEventsEnabled 设置或返回鼠标事件是不是由结构化的图形对象处理
PreserveAspectRatio 设置或返回一个值，表明范围设置时是不是保持屏幕纵横比。
SourceURL 使结构化的图形控件能使用外部文件作为图形的原始描述
Transform
方法：
要使用结构化图形控件的方法，可以通过下面给出的代码事建立<OBJECT>标识
<OBJECT id=object style="WIDTH:width;HEIGHT:height;Z-INDEX:z-index"classid="CLSID:369303C2-D7AC-11d0-89D5-00A0C9083EE6">
<PARAM name="linennn" value="method">
</OBJECT>
Arc 创建一个简单的圆弧或椭圆弧
FileSpline 创建一个封闭的由系列点定义的锯齿形
Oval 创建一个椭圆
Pie 创建一个在关联矩形中民封闭的椭圆弧
Polygon 创建一个封闭多边形
PolyLine 创建一个分段线
PolySpline 创建一个开发的锯齿形
Rect 创建一个矩形
RoundRect 创建一个圆矩形
SetFillColor 设置图形填充的前景色和背景色
SetFillStyle 设置填充类型
SetFont 设置控件字体
SetGradientFill 指定梯度填充的始末点
SetHatchFill 指定填充是不是透明
SetLineColor 设置绘制图形的线条颜色
SetLineStyle 改变当前图形的线条风格
SetGradientShape 设置梯度图形为多边形轮廓
SetTextureFill 设置结构化图形的主体源
Text 以当前字体和颜色创建一个字符串
下面是对该代码的应用：
22.4 在Web页面中定位图像
图像处理的功能还包括将其放在想要的位置，该工作在HTML中很容易实现。
22.5 在IE浏览器中拖动图像。
<html>
<head></head>
<body>
<center><h1>在IE中拖动图像</h1></center>
<div style="position:relative" id="imagediv">
<img id="image2" style="container:positioned;position:absolute;top:60px;left:250px;width:236px;height:108px" src="1.jpg">
<img style="container:positioned;position:absolute;top:60px;left:60px;width:236px;height:108px" src="2.jpg" onmouseMove="moveImage()">
</div>
<script type="text/javascript">
function moveImage(){
if(window.event.button!=1)
return;
with(window.event.srcElement.style){
pixelLeft=window.event.x-236/2-document.all.imagediv.offsetLeft;
pixelTop=window.event.y-108/2+document.all.imagediv.offsetTop;
}
window.event.returnValue=false;
}
</script>
</body>
</html>
图片倒映：
<html>
<head>图片倒映</head>
<body onload="f1()">
<img id="reflect" src="1.jpg"><br>
<img id="mdiv" src="1.jpg" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()">
<script type="text/javascript">
function f1(){
setInterval("mdiv.filters.wave.phase+=10",100);
}
</script>
</body>
</html>
不停闪烁的图片
<html>
<head>不停闪烁的图片</head>
<body onload="soccerOnload()">
<div id="soccer" style="position:absolute;left:50;top:50">
<a href="" target="_blank">
<img src="1.jpg">
</a>
</div>
<script type="text/javascript">
var mesecs=500;
var counter=0;
function soccerOnload(){
setTimeout("blink()",mesecs);
}
function blink(){
soccer.style.visibility=(soccer.style.visibility=="hidden")?"visible":"hidden";
counter+=1;
setTimeout("blink()",mesecs);
}
</script>
</body>
</html>
图片的渐隐渐现
<html>
<head></head>
<body onload="showimage()">
<div id="testimage" style="position:absolute;visibility:visible;top:30px;left:60px"></div>
<script type="text/javascript">
var i_strngth=1;
var i_image=0;
var imageurl=new Array();
imageurl[0]="1.jpg";
imageurl[1]="2.jpg";
imageurl[3]="3.jpg";
function showimage(){
if(document.all){
if(i_strngth<=110){
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth+10;
var timer=setTimeout("showimage()",100);
}
else{
clearTimeout(timer);
var timer=setTimeout("hideimage()",1000);
}
}
}
function hideimage(){
if(i_strngth>=-10){
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth-=10;
var timer=setTimeout("hideimage()",100);
}else{
clearTimeout(timer);
i_image++;
if(i_image>=imageurl.length)
i_image=0;
i_strngth=1;
var timer=setTimeout("showimage()",500);
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript之动态网页编程
- JavaScript网页编程之------函数(一般函数、动态函数、匿名函数)
- CGI简介(Peercast使用的动态网页编程接口)
- 新手入门：学习掌握动态网页PHP的编程语句
- 提取javascript动态生存的网页
- 批处理解决ie不支持javascript及无法显示动态网页等问题[转]
- 【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
- JavaScript动态网页制作宝库
- 动态网页编程新手入门必读
- 学习掌握动态网页PHP的编程语句
- JavaScript与 HTML表单的交互过程，想要学习动态网页但是无从下手的新手看看。
- 由浅入深学习动态网页制作PHP的编程与应用(三）
- 由浅入深学习动态网页制作PHP的编程与应用(四-2）
- JAVASCRIPT实现网页动态鼠标跟随
- 动态网页编程中优化数据库注意的十大原则
- 由浅入深学习动态网页制作PHP的编程与应用(一）
- 读GI源码、学JS编程——Javascript动态加载技术。
- 由浅入深学习动态网页制作PHP的编程与应用(四-1）
- JavaScript网页脚本编程突击学习！
- JavaScript与 HTML表单的交互过程，想要学习动态网页但是无从下手的新手看看。