JavaScript DHTML/Window Browser/StatusBar

Материал из Web эксперт
Перейти к: навигация, поиск

Creating a Scrolling Banner in status bar

   <source lang="html4strict">

/* JavaScript Bible, Fourth Edition by Danny Goodman John Wiley & Sons CopyRight 2001

  • /

<HTML> <HEAD> <TITLE>Message Scroller</TITLE> <SCRIPT LANGUAGE="JavaScript">

</SCRIPT> </HEAD> <BODY onLoad="scrollMsg()"> </BODY> </HTML>

      </source>
   
  


Date in the status bar

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT language="JavaScript">

</SCRIPT> </HEAD> </HTML>


      </source>
   
  


Displays the time in the status line

   <source lang="html4strict">

/* Examples From JavaScript: The Definitive Guide, Fourth Edition Legal matters: these files were created by David Flanagan, and are Copyright (c) 2001 by David Flanagan. You may use, study, modify, and distribute them for any purpose. Please note that these examples are provided "as-is" and come with no warranty of any kind. David Flanagan

  • /

<html> <head> <script> // This function displays the time in the status line. // Invoke it once to activate the clock; it will call itself from then on. function display_time_in_status_line() {

   var d = new Date();                // Get current time.
   var h = d.getHours();              // Extract hours: 0 to 23.
   var m = d.getMinutes();            // Extract minutes: 0 to 59.
   var ampm = (h >= 12)?"PM":"AM";    // Is it am or pm?
   if (h > 12) h -= 12;               // Convert 24-hour format to 12-hour.
   if (h == 0) h = 12;                // Convert 0 o"clock to midnight.
   if (m < 10) m = "0" + m;           // Convert 0 minutes to 00 minutes, etc.
   var t = h + ":" + m + " " + ampm;  // Put it all together.
   defaultStatus = t;                 // Display it in the status line.
   // Arrange to do it all again in 1 minute. 
   setTimeout("display_time_in_status_line()", 60000); // 60000 ms is 1 minute.

} </script> </head>

<body onload="display_time_in_status_line();">

</body> </html>


      </source>
   
  


Handling Status Message Changes

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Generalizable window.status Property</TITLE> <SCRIPT LANGUAGE="JavaScript"> function showStatus(msg) {

   window.status = msg
   return true

} </SCRIPT> </HEAD> <BODY>

<A HREF="http:// www.wbex.ru " onMouseOver="return showStatus("Go to www.wbex.ru.")" onMouseOut="return showStatus("")">Home</A>

<A HREF="http://home.netscape.ru" onMouseOver="return showStatus("Visit Netscape Home page.")" onMouseOut="return showStatus("")">Netscape</A> </BODY> </HTML> </source>

JavaScript display infomation in Status Bar

   <source lang="html4strict">

<html> <head>

   <title>Status Bar</title>
   <script type="text/javascript">
   
   </script>

</head>

<body>

<p> 

 

http://www.wbex.ru

<a href="http://www.wbex.ru" onmouseover="changeStatus();return true">Go...</a>

To change the default status bar message, select a message from the list below and click the Change button.

 <form name="statusForm" method="POST">
  
   <select name="messageList" size="1">
     <option selected>Welcome to the large URL page.</option>
     <option>A</option>
     <option>B</option>
     <option>C</option>
   </select>    
   <input type="button" name="Change" value="Change"
      onclick="changeDefaultStatus()">
 </form>

</body> </html>

      </source>
   
  


Links with Custom Statusbar Messages

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>window.status Property</TITLE> </HEAD> <BODY>

<A HREF="http://www.wbex.ru" onMouseOver="window.status = "Go to www.wbex.ru"; return true">Home</A>

<A HREF="http://home.netscape.ru" onMouseOver="window.status = "Visit Netscape Home page. (home.netscape.ru)"; return true">Netscape</A> </BODY> </HTML> </source>

Scrolling Text in the Status Window

   <source lang="html4strict">

<html> <head> <title>Scrolling Text</title> <script language="JavaScript"> var scrollPos = 0 var maxScroll = 100 var blanks = "" function scrollText(text, milliseconds) {

  window.setInterval("displayText(""+text+"")", milliseconds)

} function displayText(text) {

    window.defaultStatus = blanks + text
    ++scrollPos
    blanks += " "
    if(scrollPos > maxScroll) {
       scrollPos = 0
       blanks = ""
    }

} </script> </head> <body onload="scrollText("Watch this text scroll!!!", 300)">

<p>Watch the text scroll at the bottom of this window!

</body> </html>

      </source>
   
  


Setting the Default Status Message

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>window.defaultStatus property</TITLE> <SCRIPT LANGUAGE="JavaScript"> window.defaultStatus = "Welcome to my Web site." </SCRIPT> </HEAD> <BODY> <A HREF="http://www.wbex.ru" onMouseOver="window.status = "Visit wbex\"s Home page.";return true"

onMouseOut="window.status = "";return true">wbex.ru</A>

<A HREF="http://home.netscape.ru" onMouseOver="window.status = "Visit Netscape\"s Home page.";return true" onMouseOut="window.status = window.defaultStatus;return true">Netscape</A> </BODY> </HTML> </source>

The onFocus event Handler

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Elements Array</TITLE> <SCRIPT LANGUAGE="JavaScript"> function prompt(msg) {

   window.status = "Please enter your " + msg + "."

} </SCRIPT> </HEAD> <BODY> <FORM> Enter your first name:<INPUT TYPE="text" NAME="firstName" onFocus="prompt("first name")"><P> Enter your last name:<INPUT TYPE="text" NAME="lastName" onFocus="prompt("last name")"><P> Enter your address:<INPUT TYPE="text" NAME="address" onFocus="prompt("address")"><P> Enter your city:<INPUT TYPE="text" NAME="city" onFocus="prompt("city")"><P> </FORM> </BODY> </HTML>

      </source>
   
  


Using Status Messages

   <source lang="html4strict">

<html> <head> <title>JavaScript Unleashed</title> <script language= "JavaScript">

</script> </head> <body onFocus="statusMsg("")"> <form name="form1" action="#" method="post">
First Name <input type="text" size=20 maxlength=20 name="Integer" onFocus="statusMsg("string")">

Last Name <input type="text" size=20 maxlength=20 name="Integer" onFocus="statusMsg("string")">

Age <input type="text" size=5 maxlength=5 name="Integer" onFocus="statusMsg("integer")">
Amount <input type="text" size=6 maxlength=6 name="Dollar" onFocus="statusMsg("dollar")">
Card # <input type="text" size=16 maxlength=16 name="Credit" onFocus="statusMsg("credit")">

<input type="submit" value="Submit"> </form> </body> </html>

      </source>
   
  


Using the self Property in status bar

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>self Property</TITLE> <SCRIPT LANGUAGE="JavaScript">

   self.defaultStatus = "Welcome to my Web site."

</SCRIPT> </HEAD> <BODY> <A HREF="http:// www.wbex.ru" onMouseOver="self.status="Visit wbex.ru\"s Home page.";return true"

onMouseOut="self.status = "";return true">wbex.ru</A><P>

<A HREF="http://www.wbex.ru" onMouseOver="self.status = "Visit www.wbex.ru\"s Home page.";return true"

onMouseOut="self.status = self.defaultStatus;return true">wbex.ru</A>

</BODY> </HTML>

      </source>
   
  


Working with Status Bar Messages

   <source lang="html4strict">

<html> <head> <title>Status Bar</title> <SCRIPT LANGUAGE="JavaScript">

</SCRIPT> </head>

<body>

<p> 

 

http://www.wbex.ru

<a href="http://www.wbex.ru" onMouseOver="changeStatus();return true">Go...</a>

<form name="statusForm" method="POST">





To change the default status bar message, select a message from the list below and click the Change button.

<select name="messageList" size=1> <option selected>Welcome to the large URL page.</option> <option>A</option> <option>B</option> <option>C</option> </select> <input type=button name="Change" value="Change" onClick="changeDefaultStatus()">

</form> </body> </html>


      </source>
   
  


Write text to the window"s status bar

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function load(){

   window.status="status bar"

} </script> </head> <body onload="load()"> </body> </html>


      </source>