JavaScript DHTML/Window Browser/StatusBar
Содержание
- 1 Creating a Scrolling Banner in status bar
- 2 Date in the status bar
- 3 Displays the time in the status line
- 4 Handling Status Message Changes
- 5 JavaScript display infomation in Status Bar
- 6 Links with Custom Statusbar Messages
- 7 Scrolling Text in the Status Window
- 8 Setting the Default Status Message
- 9 The onFocus event Handler
- 10 Using Status Messages
- 11 Using the self Property in status bar
- 12 Working with Status Bar Messages
- 13 Write text to the window"s status bar
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> </p>
<p> </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> </p>
<p> </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>