JavaScript Examples Bible - UserWorks Technologies

92 JavaScript Examples Bible: The Essential Companion to JavaScript Bible
by, the bars for hours, minutes, and seconds adjust their widths to reflect the current
time. At the same time, the innerHTML of SPAN elements to the right of each
bar display the current numeric value for the bar.
The dynamically calculated values in this example are based on the creation of
a new date object over and over again to get the current time from the client computer
clock. It is from the date object (stored in the variable called now) that the
hour, minute, and second values are retrieved. Some other calculations are
involved so that a value for one of these time components is converted into a
pixel value for the width of the bars. The bars are divided into 24 (for the hours)
and 60 (for the minutes and seconds) parts, so the scale for the two types differs.
For the 60-increment bars in this application, each increment is set to 5 pixels
(stored in shortWidth); the 24-increment bars are 2.5 times the shortWidth.
As the document loads, the three SPAN elements for the colored bars are given
no width, which means that they assume the default width of zero. But after the
page loads, the onLoad event handler invokes the init() function, which sets the
initial values for each bar’s width and the text (innerHTML) of the three labeled
spans. Once these initial values are set, the init() function invokes the
updateClock() function.
In the updateClock() function, a new date object is created for the current
instant. The document.recalc() method is called, instructing the browser to
recalculate the expressions that were set in the init() function and assign the new
values to the properties. To keep the clock “ticking,” the setTimeout() method is
set to invoke this same updateClock() function in one second.
To see what the getExpression() method does, you can click the button on the
page. It simply displays the returned value for one of the attributes that you assign
using setExpression().
Listing 15-32: Dynamic Properties
getExpression(), setExpression(), and recalc() Methods
TH {text-align:right}
SPAN {vertical-align:bottom}
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”)
elementObject.setExpression()