JavaScript DHTML/Window Browser/StatusBar — различия между версиями

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

Текущая версия на 07:28, 26 мая 2010

Creating a Scrolling Banner in status bar

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

<HTML>
<HEAD>
<TITLE>Message Scroller</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var msg = "Welcome to my world..."
var delay = 150
var timerId
var maxCount = 0
var currCount = 1
function scrollMsg() {
    // set the number of times scrolling message is to run
    if (maxCount == 0) {
        maxCount = 3 * msg.length
    }
    window.status = msg
    // keep track of how many characters have scrolled
    currCount++
    // shift first character of msg to end of msg
    msg = msg.substring (1, msg.length) + msg.substring (0, 1)
    // test whether we"ve reached maximum character count
    if (currCount >= maxCount) {
        timerID = 0        // zero out the timer
        window.status = ""    // clear the status bar
        return            // break out of function
    } else {
        // recursive call to this function
        timerId = setTimeout("scrollMsg()", delay)
   }
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="scrollMsg()">
</BODY>
</HTML>



Date in the status bar

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function theclock(){
    var rightnow= new Date();
    
    var themonth= rightnow.getMonth();
    var today= rightnow.getDate();
    var theyear= rightnow.getYear();
    var thehours= rightnow.getHours();
    var themins= rightnow.getMinutes();
    var theseconds= rightnow.getSeconds();
    
    
    themonth+=1; //month number starts at 0
    
    //Set the Year Data for 4 Digits
    if (theyear<2000)
     theyear+=1900;
    
    if (thehours<10)
     thehours="0"+thehours;
    if (themins<10)
     themins="0"+themins;
    if (theseconds<10)
     theseconds="0"+theseconds;
    
    if (thehours<12)
     var ampm="AM";
    else
     var ampm="PM";
    
    if (thehours==0)
      thehours=12; 
    if (thehours>=13) 
     thehours-=12;
    
    window.status= themonth+"/"+today+"/"+theyear+" "+thehours+":"+themins+":"+theseconds+" "+ampm;
}
setInterval("theclock()",1000);
//-->
</SCRIPT>
</HEAD>
</HTML>



Displays the time in the status line

/*
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>
<!-- Don"t bother starting the clock till everything is loaded. The
  -- status line will be busy with other messages during loading, anyway. -->
<body onload="display_time_in_status_line();">
<!-- The HTML document contents go here. -->
</body>
</html>



Handling Status Message Changes

<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><P>
<A HREF="http://home.netscape.ru" onMouseOver="return showStatus("Visit
 Netscape Home page.")" onMouseOut="return showStatus("")">Netscape</A>
</BODY>
</HTML>



JavaScript display infomation in Status Bar

<html>
<head>
    <title>Status Bar</title>
    <script type="text/javascript">
    <!--      window.defaultStatus = "Welcome to the large URL page."
   
      function changeStatus() {
        window.status = "Click me to go to the Unleashed home page."
     }
   
     function changeDefaultStatus() {
        window.defaultStatus = 
        window.document.statusForm.messageList.options[window.document.statusForm.messageList.
        selectedIndex].text
     }
    //-->
    </script>
</head>
   
<body>
  <p>&#160;</p>
  <p>&#160;</p>
  <p align="center">
    <font size="7" color="#008040">
      <strong>http://www.wbex.ru</strong>
    </font>
  </p>
  <p align="center">
    <a href="http://www.wbex.ru" onmouseover="changeStatus();return true">Go...</a>
  </p>
  <p align=center>
    <font size="1">
      To change the default status bar message, select a message from the 
      list below and click the Change button. 
    </font>
  </p>
  <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>



Links with Custom Statusbar Messages

<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><P>
<A HREF="http://home.netscape.ru" onMouseOver="window.status = "Visit Netscape
 Home page. (home.netscape.ru)"; return true">Netscape</A>
</BODY>
</HTML>



Scrolling Text in the Status Window

<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!</p>
</body>
</html>



Setting the Default Status Message

<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><P>
<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>



The onFocus event Handler

<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>



Using Status Messages

<html>
<head>
<title>JavaScript Unleashed</title>
<script language= "JavaScript">
<!--
function statusMsg(msgType) {
   var message = "";
   if(msgType == "string") {
      message = "string";
   }
   if(msgType == "integer") {
      message = "integer";
   }
   else if(msgType == "dollar") {
      message = "dollar and float";
   }
   else if(msgType == "credit") {
      message = "credit number";
   }
   window.defaultStatus = message;
   window.status = message;
}
//-->
</script>
</head>
<body onFocus="statusMsg("")">
<form name="form1" action="#" method="post">
<br>First Name <input type="text" size=20 maxlength=20 name="Integer" onFocus="statusMsg("string")"><br>
 Last Name <input type="text" size=20 maxlength=20 name="Integer" onFocus="statusMsg("string")"><br>
Age <input type="text" size=5 maxlength=5 name="Integer" onFocus="statusMsg("integer")"><br>
Amount <input type="text" size=6 maxlength=6 name="Dollar" onFocus="statusMsg("dollar")"><br>
Card # <input type="text" size=16 maxlength=16 name="Credit" onFocus="statusMsg("credit")"><br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>



Using the self Property in status bar

<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>



Working with Status Bar Messages

<html>
<head>
<title>Status Bar</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
     window.defaultStatus = "Welcome to the large URL page."
   
     function changeStatus() {
          window.status = "Click me to go to wbex.ru."
     }
   
     function changeDefaultStatus() {
          window.defaultStatus = window.document.statusForm.messageList.
           options[window.document.statusForm.messageList.
           selectedIndex].text
     }
//-->
</SCRIPT>
</head>
   
<body>
<p>&#160;</p>
<p>&#160;</p><p align=center>
<font color="#008040">
<font size=7>
<strong>http://www.wbex.ru</strong></font></font></p>
<p align=center>
<a href="http://www.wbex.ru" onMouseOver="changeStatus();return true">Go...</a></p>
<form name="statusForm" method="POST">
<p><br>
<br>
<br>
<br>
</p>
<p align=center>
<font size=1>To change the default status bar message, select
a message from the list below and click the Change button. </font></p>
<p align=center><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()"></p>
</form>
</body>
</html>



Write text to the window"s status bar

<html>
<head>
<script type="text/javascript">
function load(){
    window.status="status bar"
}
</script>
</head>
<body onload="load()">
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Window_Browser/StatusBar&oldid=3953»