Search
Write a publication
Pull to refresh

Создание бинарных часов с помощью HDTML

Я увидел бинарные часы на сайте ThinkGeek.com и решил реализовать что-то подобное при помощи PHP и DHTML.

Мой сослуживец недавно приобрел битовые часы фирмы ThinkGeek (http://www.thinkgeek.com/). У часов есть три секции с восемью источниками света в каждой. Каждая секция отображает секунды, минуты и часы, а каждому биту соответствует свой собственный источник света. Несмотря на то что ни я, ни он не смогли толком понять, который час, мы оба пришли к выводу, что часы очень забавные. Итак, вашему вниманию представляется такой же гаджет на PHP.

Создание массива битовых масок и пр.

<?php
$bit_names = array(1, 2, 4, 8, 10, 20 );
$bit_masks = array(
array( '0', '0X1', '1' ),
array( '1', '0X2', '2' ),
array( '0', '0X4', '4' ),
array( '0', '0X8', '8' ),
array( '0', '0X10', '16' ),
array( '0', '0X20', '32' ),
);

$size = 40;

function bit_table( $name )
{
global $size;
?>


Эту часть необходимо поместить в таблицу

<tab le width="<?php echo($size*2); ?>" cellspacing="2" cellpadding="0"

id="<?php echo( $name ); ?>_1" width="<?php echo( $size ); ?>" height="<?php echo($size); ?>" />
id="<?php echo( $name ); ?>_2" width="<?php echo($size); ?>" height="<?php echo( $size) ; ?>" />

id="<?php echo( $name ); ?>_4" width="<?php echo( $size ); ?>" height="<?php echo($size); ?>" />
id="<?php echo( $name ); ?>_8" width="<?php echo($size); ?>" height="<?php echo( $size) ; ?>" />

id="<?php echo( $name ); ?>_10" width="<?php echo( $size ); ?>" height="<?php echo($size); ?>" />
id="<?php echo( $name ); ?>_20" width="<?php echo($size); ?>" height="<?php echo( $size) ; ?>" />

</tab le

<?php
}
?>



Теперь надо в шапку записать скрипт






И в заключение вписать в таблицу в теле следующее:

<bo dy onload=startup( );">

<?php bit_table( "second" ); ?>

<?php bit_table( "minute" ); ?>

<?php bit_table( "hour" ); ?>




Для начала в сценарии создается таблица битов, которая будет использоваться для создания страницы и JS, отвечающего за обновление часов. В массиве bit_names хранятся все имена битов в элементах часов, начиная с верхнего левого и заканчивая нижним правым. В массиве bit_masks в первом поле хранится номер бита, во втором — значение битовой маски на JS, а в третьем — значение бита.

Функция bit_table( ) создает HTML-страницу с месторасположениями для каждого бита. Она используется трижды: превый раз для секунды, второй раз для минут и третий раз для часов. В части сценария, написанной на PHP, также описывается функция set_clock, которая переводит время в битовый формат и соответственно изменяет часы. Когда страница готова, она отображается в браузере. Первое, что делает браузер после прорисовки таблиц для секунд, минут и часов, — вызывает функцию startup( ), которая инициализирует биты в соответствии с текущим временем. Затем функция startup( ) вызывает функцию set_click( ), которая получает текущие часы, минуты и секунды и вызывает для каждой из этих составляющих функцию set_state( ). Функция же set_state просто задает фоновый цвет таблицы элементов при помощи CSS. Если бит равен единице, то задается определенный цвет ячейки, иначе цвет остается белым. Функция startup( ) также создает таймер, который вызывает функцию set_clock( ) каждые 500 мс, позволяя таким образом часам постоянно обновляться.
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.