分享
 
 
 

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

王朝other·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

一个独具特色的主页将会在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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有