Javascript progress bar
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>getExpression(), setExpression(), and recalc() Methods</TITLE>
<STYLE TYPE="text/css">
TH {text-align:right}
SPAN {vertical-align:bottom}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
var now = new Date()
var shortWidth = 5
var multiple = 2.5
function init() {
with (document.all) {
hoursBlock.style.setExpression("width",
"now.getHours() * shortWidth * multiple","jscript")
hoursLabel.setExpression("innerHTML",
"now.getHours()","jscript")
minutesBlock.style.setExpression("width",
"now.getMinutes() * shortWidth","jscript")
minutesLabel.setExpression("innerHTML",
"now.getMinutes()","jscript")
secondsBlock.style.setExpression("width",
"now.getSeconds() * shortWidth","jscript")
secondsLabel.setExpression("innerHTML",
"now.getSeconds()","jscript")
}
updateClock()
}
function updateClock() {
now = new Date()
document.recalc()
setTimeout("updateClock()",1000)
}
function showExpr() {
alert("Expression for the \'Hours\' innerHTML property is:\r\n" +
document.all.hoursLabel.getExpression("innerHTML") + ".")
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>getExpression(), setExpression(), recalc() Methods</H1>
<HR>
<P>This clock uses Dynamic Properties to calculate bar width and time
numbers:</P>
<TABLE BORDER=0>
<TR>
<TH>Hours:</TH>
<TD><SPAN ID="hoursBlock" STYLE="background-color:red"></SPAN>
<SPAN ID="hoursLabel"></SPAN></TD>
</TR>
<TR>
<TH>Minutes:</TH>
<TD><SPAN ID="minutesBlock" STYLE="background-color:yellow"></SPAN>
<SPAN ID="minutesLabel"></SPAN></TD>
</TR>
<TR>
<TH>Seconds:</TH>
<TD><SPAN ID="secondsBlock" STYLE="background-color:green"></SPAN>
<SPAN ID="secondsLabel"></SPAN></TD>
</TR>
</TABLE>
<HR>
<FORM>
<INPUT TYPE="button" VALUE="Show 'Hours' number innerHTML Expression"
onClick="showExpr()"
</FORM>
</BODY>
</HTML>
Related examples in the same category