Dhtml网页实例教程(11)
来源:动态WEB脚本技术论坛 时间:2007-10-09 13:39:00
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 图像自动交替地淡出
act=window.setInterval("AutoChange()",9500)设置的时间(9.5秒)一定要比style="filter:blendTrans(duration=7)"设置的时间(7秒)长,否则将产生脚本语言出错。
既然Reveal有24种之多的过渡效果,我们就不妨试试看。
例20 Reveal过渡过滤器的24中动态效果
Dhtml实例教程(十四)
除了前边我所讲的那些动态效果外,动态HTML还可以显示时间,或通过时间来进行动态的设计交互式网页。具体步骤如下:
通过调用函数Date()和关键字new创建一个时间对象,如语句:today=new Date();将创建时间对象today; 利用这个时间对象的getYear、getMouth、getDate、getDay、getHours、getMinutes和getSeconds等方法得到时间; 利用得到的时间进行判断和相应的操作;
在HTML文档中输出结果。
下面是一个显示当日的年份、月份和星期的简单例子。
例21 显示当天的年月日和星期
我们还可以通过获得时间判断是上午、下午或是晚上,然后相应的在网页中输出问候语:“早上好”、“下午好”或“晚上好”。
例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>