位置：首页>> 网络编程>> 网页设计>> Dhtml网页实例教程（11）

Dhtml网页实例教程（11）

　来源：动态WEB脚本技术论坛　发布时间：2007-10-09 13:39:00　

标签：html,dhtml,教程

Dhtml实例教程（十三）

哈哈，今天又有新的东西介绍给您，您知道过滤器（filter）吗？如果您经常使用图形软件（如PhotoShop等），那您肯定有所了解。过滤器可以用来对可见对象进行过滤以达到各种动态的效果。CSS拥有扩充的过滤器，我们可以将它与动态HTML相结合，制造出各种动态效果。有些书上将它称为“过渡”，它是IE4.0动态HTML技术的一部分。

对于所有可视化的对象，我们都可以使用过渡的方法将它从一种状态转换为另一种状态，并且这种转换过程在浏览器重视可以清楚看到的。

HTML4.0有两种类型的过渡过滤器：Blend和Reveal。Blend过渡可以在指定的时间间隔内实现图像的简单淡出和淡入，基本句型为：style="filter:blendTrans(Duration=过渡的时间)"//过渡时间的单位为"秒"而Reveal过渡可以通过使用不同的技术选择地显示或隐藏图像，它的效果有很多，基本句型是：style="filter:revealTrans(Duration=过渡的时间,Transition=过渡的类型)"//过渡时间的单位为"秒",Transition的取值范围是0～23，下面就是一个用Blend过滤图像的例子。
例19 图像自动交替地淡出
<html><head><title>DHtml举例19</title><style></style><script language="JavaScript">var flag=0;//全局变量flag用来控制绘出的图象；flag=0时绘出图象lkjx2.jpg，而flag=1时则绘出lkjx1.jpgvar act;function Change(){act=window.setInterval("AutoChange()",9500);//每隔9.5秒钟执行函数AutoChange()}//functionfunction AutoChange(){if(flag==0){flag=1;Img.filters.blendTrans.Apply(); //用Apply方法停止原图象的绘出Img.src = "lkjx2.jpg"; //将Img设置成另一幅图象jklx2.jpgImg.filters.blendTrans.Play(); //用Play方法调用过滤器的淡出效果}else{flag=0;Img.filters.blendTrans.Apply();Img.src = "lkjx1.jpg";Img.filters.blendTrans.Play();}//if}//function</script></head><body onload="Change()"><img id="Img" src="lkjx1.jpg" alt="会变换的图象！" style="filter:blendTrans(duration=7)"></body></html>

act=window.setInterval("AutoChange()",9500)设置的时间（9.5秒）一定要比style="filter:blendTrans(duration=7)"设置的时间（7秒）长，否则将产生脚本语言出错。
既然Reveal有24种之多的过渡效果，我们就不妨试试看。
例20 Reveal过渡过滤器的24中动态效果
<html><head><title>DHtml举例19</title><style></style><script language="JavaScript">var shape=0;//变量shape用来存储transition的数值，即动态效果的类型var flag=0;//全局变量flag用来控制绘出的图象；flag=0时绘出图象lkjx2.jpg，而flag=1时则绘出lkjx1.jpgvar act;function ChangeImg(){act=window.setInterval("ChangeShape()",7500);//每隔7.5秒钟执行函数ChangeShape()}//functionfunction ChangeShape(){if(shape==24) shape=0; //因为transition的值在0～23之间，故不能让它超过23if(flag==0){Insert.innerHTML="<img id='Shp' src='image\sunset.jpg' class=i1 style='filter:revealTrans(duration=6,transition="+shape+")'><br>这是transition="+shape+"时的效果";Shp.filters.item(0).Apply(); //用Apply方法停止原图象的绘出Shp.src='image\spac001.jpg'Shp.filters.item(0).Play(); //用Play方法调用过滤器的动态效果flag=1;}else{Insert.innerHTML="<img id='Shp' src='lkjx2.jpg' class=i1 style='filter:revealTrans(duration=6,transition="+shape+")'><br>这是transition="+shape+"时的效果";Shp.filters.item(0).Apply(); //用Apply方法停止原图象的绘出Shp.src='lkjx1.jpg'Shp.filters.item(0).Play(); //用Play方法调用过滤器的动态效果flag=0;}//ifshape++; //shape自身加1}//function</script></head><body onload="ChangeImg()"><p id="Insert"><img id="Shp" src="lkjx1.jpg" alt="会变换的图象！" style="filter:revealTrans(duration=6,transition=00)"></p></body></html>

Dhtml实例教程（十四）
　除了前边我所讲的那些动态效果外，动态HTML还可以显示时间，或通过时间来进行动态的设计交互式网页。具体步骤如下：
通过调用函数Date()和关键字new创建一个时间对象，如语句：today=new Date();将创建时间对象today；利用这个时间对象的getYear、getMouth、getDate、getDay、getHours、getMinutes和getSeconds等方法得到时间；利用得到的时间进行判断和相应的操作；
在HTML文档中输出结果。

下面是一个显示当日的年份、月份和星期的简单例子。
例21 显示当天的年月日和星期
<html><head><title>DHtml举例21</title><style><!--body {font-size:9pt;color:blue}</style><script language="JavaScript">var today;var day;var date;today=new Date(); //此语句通过调用函数Date()和关键字new将today变成了一个时间对象//通过时间对象today的getDay方法确定星期几，并将相应的字符串赋给变量dayif(today.getDay()==0) day="星期日 ";if(today.getDay()==1) day="星期一 ";if(today.getDay()==2) day="星期二 ";if(today.getDay()==3) day="星期三 ";if(today.getDay()==4) day="星期四 ";if(today.getDay()==5) day="星期五 ";if(today.getDay()==6) day="星期六 ";//变量date用于存储年月日date="今天是19"+(today.getYear())+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日 ";//在HTML文档中输出"年月日"和"星期"document.write(date);document.write(day);</script></head><body></body></html>

我们还可以通过获得时间判断是上午、下午或是晚上，然后相应的在网页中输出问候语：“早上好”、“下午好”或“晚上好”。
例22 给您一个问候

<html>
<head>
<title>DHtml举例22</title>
<style><!--
body {font-size:9pt;color:blue}
</style>
<script language="JavaScript">
var today;
var hello;
today=new Date(); //此语句通过调用函数Date()和关键字new将today变成了一个时间对象
//通过对象today的getHours方法确定时间是商务、下午还是晚上，并将相应的问候语字符串赋给变量hello
if(today.getHours()<=12) hello="早上好! ";
if(12<today.getHours()<=18) hello="下午好! ";
if(today.getHours()>18) hello="晚上好! ";
//在HTML文档中输出当前的具体时间
document.write(hello);
document.write("现在是"+today.getHours()+":"+today.getMinutes()+":"+today.getSeconds()+"。");
</script>
</head>
<body>
</body>
</html>

第一页上一页 7 8 9 10

投稿

Dhtml网页实例教程（11）

猜你喜欢