网页制作入门（12）动态和交互效果

　　一个网页没有动态和交互性会显得很沉闷。目前要添加一些效果到网页中是很容易的。下面介绍几个常见动态效果：

　　1.跑马灯

　　跑马灯就是能把文字从一端按照设置的方式“移动”到另一端，然后重复这个动作。在FrontPage Express中很容易实现这个效果。单击菜单“插入”，点选“字幕”。在弹出的“字幕属性”面板设置定需要移动的文字，然后设置移动的方向，速度等。单击确定，然后利用浏览器打开包含跑马灯的网页就能看到所设置的文字在屏幕上移动了。

　　2.最后修改日期

　　每当你更新了网页后，最后修改日期就会自动更新。单击菜单“插入”，点选“脚本”，在脚本对话框，点选JavaScript，在脚本文本框，输入：

　　document.write（“最后更新时间： ” + document.lastModified + “”）

　　单击确定就可以了。大家会看到在编辑窗口里有个“J”的小图标，这就是JavaScript的模样，但在浏览时不会出现的。

　　3.自动跳转页面

　　单击菜单“查看”，点选“HTML”，在打开网页源代码对话框的《head》《/head》中间输入：

　　《meta HTTP-EQUIV=“Refresh” Content=“ 6;URL=xxx.htm”》

　　Content中，6为延迟的时间，xxx.htm为6秒钟后自动连接的网页。

　　4.在状态栏显示时间

　　单击菜单“插入”，点选“脚本”，在脚本对话框，点选JavaScript，在脚本文本框，输入：

　　《！-- Hide

　　timeID = null;

　　timeRunning = false;

　　function stop （） {

　　if（timeRunning）

　　clearTimeout（timeID）;

　　timeRunning = false;

　　}

　　function time （） {

　　tick = new Date（）;

　　hours = tick.getHours（）;

　　minutes = tick.getMinutes（）;

　　seconds = tick.getSeconds（）;

　　day = tick.getDay（）;

　　month = tick.getMonth（）;

　　date = tick.getDate（）;

　　year = tick.getYear（）;

　　current = “” + （（hours 》12） ？ hours -12 ：hours）

　　current += （（minutes 《 10） ？ “：0” ： “：”） + minutes

　　current += （（seconds 《 10） ？ “：0” ： “：”） + seconds

　　current += （hours 》= 12） ？ “ P.M.” ： “ A.M.”

　　if（day==0）{var weekday = “ 星期日”}

　　if（day==1）{var weekday = “ 星期一”}

　　if（day==2）{var weekday = “ 星期二”}

　　if（day==3）{var weekday = “ 星期三”}

　　if（day==4）{var weekday = “ 星期四”}

　　if（day==5）{var weekday = “ 星期五”}

　　if（day==6）{var weekday = “ 星期六”}

　　current +=（weekday）

　　window.status=current;

　　timeID = setTimeout（“time（）”，1000）;

　　timeRunning = true;

　　}

　　function run（）{

　　stop（）;

　　time（）;

　　}

　　//--》

　　单击菜单“查看”，点选“HTML”，在“查看或编辑HTML”框，找到《body》标签，并添加onload=“run（）; timerONE=window.setTimeout”代码。

　　5.自动开启新窗口

　　当载入一张网页的时侯，会自动开启另一张网页。

　　单击菜单“插入”，点选“脚本”，在脚本对话框，点选JavaScript，在脚本文本框，输入：

　　《！--

　　var gt = unescape（‘%3e’）;

　　var popup = null;

　　var over = “Launch Pop-up Navigator”;

　　popup = window.open（‘’， ‘popupnav’， ‘width=160，height=160，resizable=1，status=yes，

　　menubar=no，scrollbars=yes’）;

　　if （popup ！= null） {

　　if （popup.opener == null） {

　　popup.opener = self;

　　}

　　popup.location.href = ‘xxx.htm’;

　　}

　　// --》

　　其中xxx.htm可以设置为你的HTML文件，对于设置新窗口的属性，对照以下设置：

　　popup = window.open（‘’， ‘popupnav’， ‘width=200，height=170，resizable=1，scrollbars=auto’）;

　　width：宽，height：高，resizable：是否允许访客缩放新窗口，scrollbars：如果文本超过一屏，是否生成滚动条，

　　status：是否显示状态栏，menubar：是否显示菜单，location：是否显示地址栏。

　　以上所有属性使用格式为：属性=yes 或者 no.而width和height两个属性为：width=#pixels，height=#pixels.