Build a DHTML Binary Clock

Build a DHTML Binary Clock Hot

Tag it:

Articles Reviews DHTML

Written by JOHN

Saturday, 11 August 2007

{mos_sb_discuss:20}

This script starts by setting up the bit table that will be used in the generation of the page and in the JavaScript that updates the clock. The bit_names array is used to name each bit in a clock element, starting at the top left and going down to the bottom right. The bit_masks array stores the bit number in the first position of the array, the JavaScript bit mask value in the second position, and the value of the bit in the third position.

The bit_table( ) function creates an HTML table with positions for each bit. It's used three times: the first for seconds, the second for minutes, and the third for hours. The PHP portion of the script also defines the set_clock() function, which decomposes a time value into its bits, and sets the clock accordingly.

Once the page is rendered, it's shown in the browser. The first thing the browser does after rendering the tables for seconds, minutes, and hours is to call the startup( ) function, which initializes the bits to the current time. The startup( ) function calls set_clock( ), which gets the current hour, minute, and second, and calls set_state( ) for each. The set_state() function simply sets the background color of the table element using CSS. If the bit is on, it sets the value to a color; otherwise, the element is set to white.

The startup() function also creates a timer that calls the set_clock( ) function every 500 ms, giving you a clock that continuously updates on the page.

Setting up an array of bit masks, and beyond

<?php
$bit_names = array( 1, 2, 4, 8, 10, 20 );
$bit_masks = array(
    array( '0', '0x1', '1' ),
    array( '1', '0x2', '2' ),
    array( '2', '0x4', '4' ),
    array( '3', '0x8', '8' ),
    array( '4', '0x10', '16' ),
    array( '5', '0x20', '32' )
);

$size = 40;

function bit_table( $name )
{
    global $size;
?>
<table width="<?php echo($size*2); ?>" cellspacing="2" cellpadding="0">
<tr>
<td id="<?php echo( $name ); ?>_1" width="<?php echo($size); ?>" height="<?php
    echo($size); ?>" /></td>
<td id="<?php echo( $name ); ?>_2" width="<?php echo($size); ?>" height="<?php
    echo($size); ?>" /></td>
</tr>
<tr>
<td id="<?php echo( $name ); ?>_4" width="<?php echo($size); ?>" height="<?php
    echo($size); ?>" /></td>
<td id="<?php echo( $name ); ?>_8" width="<?php echo($size); ?>" height="<?php
    echo($size); ?>" /></td>
</tr>
<tr>
<td id="<?php echo( $name ); ?>_10" width="<?php echo($size); ?>" height="<?php
    echo($size); ?>" /></td>
<td id="<?php echo( $name ); ?>_20" width="<?php echo($size); ?>" height="<?php
    echo($size); ?>" /></td>
</tr>
</table>
<?php
}
?>
<html>
<head>
<script>
var second_bits = [];
var minute_bits = [];
var hour_bits = [];

function startup( )
{
<?php foreach( $bit_names as $name ) { ?>
    second_bits.push( document.getElementById( "second_<?php echo( $name ) ?>" ) );

    minute_bits.push( document.getElementById( "minute_<?php echo( $name ) ?>" ) );
    hour_bits.push( document.getElementById( "hour_<?php echo( $name ) ?>" ) );
<?php } ?>

    set_clock( );

    window.setInterval( "set_clock( )", 200 );
}

function set_state( obj, val, on_color )
{
    obj.style.background = val ? on_color : "white";
}

function set_clock( )
{
    var now = new Date( );
    var seconds = now.getSeconds( );
    var minutes = now.getMinutes( );
    var hours = now.getHours( );

<?php foreach( $bit_masks as $mask ) { ?>
    set_state( second_bits[<?php echo($mask[0] ); ?>], ( ( seconds & <?php
    echo($mask[1] ); ?> ) == <?php echo($mask[2] ); ?> ), "red" );
    set_state( minute_bits[<?php echo($mask[0] ); ?>], ( ( minutes & <?php
    echo($mask[1] ); ?> ) == <?php echo($mask[2] ); ?> ), "green" );
    set_state( hour_bits[<?php echo($mask[0] ); ?>], ( ( hours & <?php
    echo($mask[1] ); ?> ) == <?php echo($mask[2] ); ?> ), "blue" );
<?php } ?>
}
</script>
</head>
<body onload="startup( );">
<table cellpadding="5" cellspacing="0">
<tr><td>
<?php bit_table( "second" ); ?>
</td><td>
<?php bit_table( "minute" ); ?>
</td><td>
<?php bit_table( "hour" ); ?>
</td></tr></table>
</body>
</html>

User reviews

There are no user reviews for this item.

Add new review

Last Updated ( Saturday, 11 August 2007 )

< Prev		Next >

[ Back ]