WEB开发网
开发学院WEB开发Jsp 在自制主页中实现游走字幕 阅读

在自制主页中实现游走字幕

 2008-01-05 08:34:27 来源:WEB开发网   
核心提示:一个独具特色的主页将会在WWW海洋之中更加突出你的个性,应该说,在自制主页中实现游走字幕,在主页状态行中实现游走字幕只是一个非常小的应用,但javascript强大的主页创作能力,不是从最左端而是从状态行左边第seed个字符处开始显示...Ι/BODYΛΙ/HTMLΛJavaScript是自己编制主页不可缺少的、最理想

  一个独具特色的主页将会在WWW海洋之中更加突出你的个性。应该说,在主页状态行中实现游走字幕只是一个非常小的应用,但javascript强大的主页创作能力,或许会给你一些其他方面的启迪。

随着Internet的普及与发展,越来越多的人开始尝试自己制作主页。在浏览别人主页时,我们经常看到那些需要非凡强调、提醒的文本,通常都是做成游走字幕的形式。能不能在我们自己编制的主页中加上这些效果呢?本文将介绍其实现方法。
一、了解Javascript语言
JavaScript是Netscape公司为了扩展NetscapeNavigator的功能而开发的一种紧凑的、基于对象的描述语言,通常用来开发客户机或服务器端的Internet应用程序。JavaScript主要用于识别和响应某些用户事件,如页面浏览、文本输入、鼠标点击等,它能不经网络传输直接对上述事件进行回应。与Java相比,JavaScript小巧、灵活、轻易理解和使用;不需要声明变量类型;没有Java的类和继续的概念;更不需要象Java那样在客户机上运行前必须在服务器端进行编译。NetscapeNavigator2.0以上的浏览器都能解释执行那些直接嵌入在Html文档内的JavaScript语句。
二、把握setTimeout()函数
JavaScript提供了一个很有用的函数setTimeout(),它能在设定的时间之后,对某一事件作出反应。相当于其他高级语言中的定时器。
调用格式:
timeoutIDΚsetTimeout(eXPRession,msec)
参数说明:
timeoutID:一个仅供clearTimeout()终止事件用的标识
expression:字符表达式即对象属性
msec:毫秒数,表示多少毫秒以后事件动作
为了具体说明JavaScript的编程方法及setTimeout()函数的使用,让我们先来看一个小程序。
ΙhtmlΛ//超文本文件开始
ΙheadΛ//超文本文件头开始
ΙtitleΛ时钟小程序Ι/titleΛ//超文本标题
ΙscriptlanguageΚ″JavaScript″Λ//JavaScript开始
Ι!--//注释标志
vartimerIDΚnull
vartimerRunningΚfalse
//终止setTimeout()定义的事件
functionstopclock(){
if(timerRunning)
clearTimeout(timerID)
timerRunningΚfalse

//调用子过程
functionstartclock(){
//Makesuretheclockisstopped
stopclock()
showtime()

//取出机器时间,并每秒钟显示一次
functionshowtime(){
varnowΚnewDate()
varhoursΚnow.getHours()
varminutesΚnow.getMinutes()
varsecondsΚnow.getSeconds()
vartimeValueΚ″″+((hoursΛ12)?hours-12:hours)//24小时制转化为12小时制
timeValue+Κ((minutesΙ10)?″:0″:″:″)+minutes//小于10分时前面加“0”
timeValue+Κ((secondsΙ10)?″:0″:″:″)+seconds//小于10秒时前面加“0”
timeValue+Κ(hoursΛΚ12)?″P.M.″:″A.M.″//判定上、下午
document.clock.face.valueΚtimeValue//命名
timerIDΚsetTimeout(″showtime()″,1000)
//每1000毫秒即1秒执行一次
timerRunningΚtrue

//--Λ//注释标志
Ι/scriptΛ//JavaScript结束
Ι/headΛ//超文本文件头结束
//装入startclock()函数
ΙbodyonLoadΚ″startclock()″Λ//超文本正文主体开始
//在主页上创建一个用于显示时间的窗口
ΙformnameΚ″clock″onSubmitΚ″0″Λ//交互项元素开始
ΙinputtypeΚ″text″nameΚ″face″sizeΚ22valueΚ″″Λ//定义一个输入信息元素
Ι/formΛ//交互项元素结束
Ι/bodyΛ//超文本正文主体结束
Ι/htmlΛ//超文本文件结束
上例中整个HTML文件都用ΙhtmlΛ和Ι/htmlΛ括起来,JavaScript语句用ΙscriptΛ和Ι/scriptΛ括起来,它可以放在HTML文件中的任何地方,通常和窗口标题的起止标签ΙtitleΛΙ/titleΛ一起放在文件头的起止标签ΙheadΛΙ/headΛ内,由文件主体起止标签ΙbodyΛΙ/bodyΛ中的语句调用。JavaScript的语法说明部分用HTML的注释符号Ι!--和--Λ括了起来,以避免不支持JavaScript的浏览器产生错误。注释的顺序为:先ΙscriptΛ,接着是注释的开头Ι!--,然后是内容,再后是注释尾--Λ,最后是Ι/scriptΛ。另外,JavaScript本身也可以注释,和c++与Java一样,它的注释行符号为//,如本例所示。JavaScript中很多语法都和C相似,上述程序对于稍有点C基础的朋友一定不难理解。
三、实现游走字幕
在JavaScript中用window.status来控制状态行输出,假如能在程序的控制下,对状态行进行定时刷新,即可实现游走字幕的效果。所以,本程序实际上分两部分:动态生成字符串;定时重写状态行。本程序中所用的方法是:先在字幕内容前加上大于状态行长度的空格,循环递减空格并定时显示,即实现游走效果;当字幕运动到状态行最左端时,循环截取后面未显示的字幕内容,定时刷新;循环结束后,置空状态行,并设置下次循环初值。程序代码如下:
ΙHTMLΛ
ΙHEADΛ
ΙSCRIPTlanguageΚ″JavaScript″Λ
Ι!--BeginningofWebMania/JavaScriptApplet-------------------
/*Copyright(C)1996HeYuHai&PangGuSong
AllRightsReserved.
*/
functionscroll?status(seed)

varmsgΚ″欢迎访问何雨海个人主页″;
//汉字之间空一格是为了使字幕运动到状态行的最左端时不至于出现乱字符
varoutΚ″″;
varcΚ1;
//seed值大于150时,空循环。因为状态行的长度都小于150
if(150Ιseed){
seed--;
varcmdΚ″scroll?status(″+seed+″)″;
timerTwoΚwindow.setTimeout(cmd,100);

//字幕内容前的空格循环递减,并定时显示,实现字幕游走
elseif(seedΙΚ150&&0Ιseed){
for(cΚ0;cΙseed;c++){
out+Κ″″;

out+Κmsg;//循环赋值
seed--;//递减
varcmdΚ″scroll?status(″+seed+″)″;
window.statusΚout;//重写状态行
timerTwoΚwindow.setTimeout(cmd,100);//定时0.1秒

elseif(seedΙΚ0){
//当字模游走到状态行最左端时,循环截取未显示的部分,继续游走显示
if(-seedΙmsg.length){
out+Κmsg.substring(-seed,msg.length);
seed--;
varcmdΚ″scroll?status(″+seed+″)″;
window.statusΚout;
timerTwoΚwindow.setTimeout(cmd,100);

else{
window.statusΚ″″;//循环结束,置空状态行
timerTwoΚwindow.setTimeout(″scroll?status(150)″,100);//设置下次循环初值



//--EndofJavaScriptcode---------Λ//结束JavaScript调用
Ι/SCRIPTΛ
Ι/HEADΛ
ΙBODYonloadΚ″timerONEΚwindow.setTimeout(′scroll?status(100)′,50);″Λ//seed要大于状态行的长度,否则第一次显示时,不是从最左端而是从状态行左边第seed个字符处开始显示



Ι/BODYΛ
Ι/HTMLΛ
JavaScript是自己编制主页不可缺少的、最理想的一种脚本语言,愿本文能抛砖引玉,启发您更美妙的构思。

--------------------------------------------------------------------------------

报刊名称:中国计算机报
期号:667
版名:编程维修
栏目:编程与维修
标题:在自制主页中实现游走字幕
副标题:
作者:
日期:1997-07-21

Tags:自制 主页 实现

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接