Sie sind auf Seite 1von 3

Dr. Chao-Hsien Chu 1 SCROLLING MESSAGE A scrolling message can be used to attract the attention of viewers.

For exam ple, TV station has used it to announce the breaking news and companies often use scrolling mess ages on their web site to highlight breaking news, key products, or special promotions. To make it easier to build scrolling messages, Microsoft developed the Marquee HTML tag. While, Internet Explorer recognizes the Marquee tag, Netscape Navigator does not . By writing your own user-defined function using JavaScript, you can create a scrolling mess age that works with virtually any browser. A scrolling message has four basic components: (1) the display object; (2) the m essage; (3) the position; and (4) the delay. The display object defines where the scrolling mes sage will be dis-played, which is either in a text box or on the status bar. The message is a text string assigned to a variable. The text string is what the user see when the message displays. The position is the starting location in which the message first displays in the display object. Th e starting location can be either the left or right side of the display object. The delay is the l ength of time between when a me ssage ends and when it starts to appear again. Display in the Text Box: The code below will display the scrolling message Welcome to IST 220 in a text box . There are a number of key elements that makes the code work: ScrollingMsg() a function that makes the scrolling work. Onload event handler It activates the scrollingMsg() function when the file was loaded. window.setTimeout a method of Windows object, used to control the scrolling del ay. Text Box Form it creates the text box for message display. JavaScript function can be placed either inside the <Head> or <Body> sections. In this exa m-ple, we placed the function inside the <Head>. You can simply cop y the codes and modify the message to fit your own needs. Note: all the statements should be continued in one line, rather than breaking into two lines. Sample Code: <Head> <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- Hide from old browsers var scrollMsg = "Welcome to IST 220! "; var msgSpace = " "; var beginPos = 0; Dr. Chao-Hsien Chu 2 function scrollingMsg() { document.msgForm.scrollingMsg.value=scrollMsg.substring(beginPos,scrollMsg.l ength)+ msgSpace+scrollMsg.substring(0,beginPos); beginPos=beginPos + 1; if (beginPos > scrollMsg.length){ beginPos = 0; }

window.setTimeout("scrollingMsg()",400); } // End hiding --> </Script> </Head> <body onLoad="scrollingMsg()"> <Form Name="msgForm"> <INPUT Type="text" Name="scrollingMsg" Size="23"> </Form> </Body> Example: J16.htm shows a complete example of displaying a scrolling text in a text box. Run the code to get a feel of its use. Use the template file (templete.htm) as the basis for pra ctice. Discuss when can the text scrolling be used in practice. Display in the Status Bar: The code below will display the scrolling message Welcome to IST 220 at the status bar. There are a number of key elements that makes the code work: SetTimeout() This method is used to control the delay of scrolling. Onload event handler It activates the setTimeout() method when the file was loa ded. Scrollit() function the function make the scrolling work. Window.status specifies the message will be displayed at the status bar. In this example, we placed function inside the <Body> section. You can simply c opy the codes and modify the me ssage to fit your own needs. Sample Code: <body onLoad="timerONE=window.setTimeout ('scrollit_r21(100) ' ,500);"> Dr. Chao-Hsien Chu 3 <script LANGUAGE="JavaScript"> <!-- Beginning of Java Script function scrollit_r21(seed) { var msg=" Welcome to IST 220..." var out = " "; var c = 1; if (seed > 100) { seed--; var cmd="scrollit_r21(" + seed + ") "; timerTwo=window.setTimeout (cmd, 100) ; } else if (seed <= 100 && seed > 0) { for (c=0 ; c < seed ; c++) { out+=" "; } out+=msg; seed--; var cmd="scrollit_r21(" + seed + ") "; window.status=out; timerTwo=window.setTimeout (cmd, 100); } else if (seed <= 0) { if (-seed < msg.length)

{ out+=msg.substring(-seed,msg.length); seed--; var cmd="scrollit_r21(" + seed + ")"; window.status=out; timerTwo=window.setTimeout (cmd, 100) ; } else{ window.status=" "; timerTwo=window.setTimeout ("scrollit_r21(100)",75); } } } // -- End of JavaScript code --> </script> Example: Dr. Chao-Hsien Chu 4 J6.htm shows a complete example of displaying a scrolling text at the status bar . Run the code to get a feel of its use. Use the template file (templete.htm) as the basis for practice. Discuss when can the text scrolling be used in practice.

Das könnte Ihnen auch gefallen