JavaScript 小技巧(第六集)

2016-01-29 11:47 6 1 收藏

JavaScript 小技巧(第六集),JavaScript 小技巧(第六集)

【 tulaoshi.com - Javascript 】

以下是我们所制作的跑马灯效果的源程序

 <html
 <head
 <script language="JavaScript"
 <!-- Hide
 var scrtxt="这儿的讯息可以改为你要告诉别人的话  "+"
 或是注意事项 ...";
 var lentxt=scrtxt.length;
 var width=100;
 var pos=1-width;
 function scroll() {
 pos++;
 var scroller="";
 if (pos==lentxt) {
 pos=1-width;
 }
 if (pos<0) {
 for (var i=1; i<=Math.abs(pos); i++) {
 scroller=scroller+" ";}
 scroller=scroller+scrtxt.substring(0,width-i+1);
 }
 else {
 scroller=scroller+scrtxt.substring(pos,width+pos);
 }
 window.status = scroller;
 setTimeout("scroll()",150);
 }
 //--
 </script
 <body onLoad="scroll();return true;"
 Here goes your cool page!
 </body
 </html
  此一程式中我们使用了和上面同样的函数(或部分)setTimeout(...)通知,计时器在时间到时去呼叫 scroll()函数,使得跑马灯中的文字往前进一格。 在函数的一开始,有一些较罗嗦的计算部分,但这并不难使我们了解,这些计算主要是用来取得跑马灯中的文字应该由那一个位置开始显示的用途。一开始当然是必需加一些空白在字的左边,让文字部分能尽可能靠右,然后再一字字的将空白减少,结果自然就造成字往前移动的效果了。

来源:http://www.tulaoshi.com/n/20160129/1483361.html

延伸阅读
第九集 JAVASCRIPT基础(1) 一、什么是JAVASCRIPT语言? JavaScript是一种新的描述语言,此一语言可以被箝入HTML的文件之中,透过JavaScript可以做到回应使用者的需求事件(如form的输入)而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时,它不用经过传给服务器(server)处理,再传回来的过程,而直接可以被客户端(client)...
第十集 JAVASCRIPT基础(2) 二、如何执行JaveScript Netscape2.0beta3版以上,就可以执行JavaScript的功能了。我们测试过至少beta3版以上可以。目前为止,除了Netscape外,似乎尚没有其他种类的WWW浏览器有此一功能。 以下我们就以一些例子来告诉你如何将JavaScript写在HTML文件中,并且体会一下新语言的特性。我们从第一个例...
第八集 如何自动加上最后修改时间 我们在 HTML 文件档完成了以后,常会加上一行文件最后修改的日期。现在你可不用担心每次都要去改或是忘了改了,你可以很简单的写一个如下的描述语法程式。就可以自动的为你每次产生最后修改的日期了。 <html <body This is a simple HTML- page. <br Last changes: ...
第三集 如何在网页上使用history和forward 我们来看一个可以让你浏览不同文件的语法,我们这儿所要谈的是 back() 和 forward()这两个函数, 如果你本身的文件中有一个连结是回到你本身文件的上一个连结文件的话,那和Netscope 浏览器 中所提供的back 按钮功能是不一样的。例如,在我的文件中,正常的连结连到某些我们认为会是这个文件来...
以下是原始语法 <HTML <HEAD <TITLE浏览器的状态栏</TITLE </HEAD <BODY BGCOLOR="#FFFFFF" <SCRIPT language="JavaScript" <!-- Hide function statbar(txt) { window.status = txt; } // -- </SCRIPT <CENTER</CENTER <CENTER<B<FONT COLOR="#0000FF"</FONT</B</CENTER <P<FORM <P<FONT COLOR="#...

经验教程

432

收藏

43
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部