Here is what we will be creating:
To create this graphic clock we will need 11 images. We need an image for each number(0-9) which we will call 0.jpg to 9.jpg. We will also need an image for the colon in the center of this 24 hour digital clock.
The code for showing the time is very simple. In php it is as simple as echoing the funtion date(). The date() function can display many parts of the date and time. For example Date(H:j) would return the time in the format 18:55.
You can find more info on using the date function along with a list of all of its uses here.
In our script we will need to store the 24 hour time in a variable and store the minutes value in another variable. Doing this would allow us to easily create the script for a 24 hour clock, but using this method would mean we would need an image for every number from 01 to 60, and im sure neither you or me have the time for that. At first this would seem a problem as we need to seperate each digit to give us 4 variables for each digit of the 24 hour time. However there are several functions that will allow us to separate these 2 digit values into 2 seperate strings which we will store in an array. (An array basically allows us to store separate strings under 1 variable by indexing them)
Lets begin writing the code. We allways begin our code with <?php when writing php scripts because this tells the server that this script should be run server side. The first lines of our code will look like this:
<?php $hour = date(H);
$minute = date(i);
This code declares two variables $hour and $minute, these variables are then set to their corresponding value using the date function.
We now need to separate these variables into individual digits stored in arrays. The following lines of code will do this for us.
$sepmin = preg_split('//', $minute, -1, PREG_SPLIT_NO_EMPTY);
$sephour = preg_split('//', $hour, -1, PREG_SPLIT_NO_EMPTY);
The function preg_split() separates the stings by searching for a defined value, and using it to define how the string will be split. For example if we used preg_split() to split the string "bob@james@fred" and split by "@" it would return an array of 1. bob 2. james 3.fred . However in our script there is nothing dividing the digits in our variables so we need to tell preg_split() to sperate them by nothing(thus separating by individual digits). We do this by using '//'. For the first setting for preg_split() we use '//' so preg split now looks like preg_split('//',). There are a few other things pregsplit requires to funtion correctly, we need to tell it which string to split, the limit to the number of values in the array, and further settings such as, values in the array cannot be empty. So our funtion now looks like preg_split('//', $minute, -1, PREG_SPLIT_NO_EMPTY) This tells the function to separate string $minute by individual digits, not to limit how many separate values can be stored in the array and not to allow any values in the array to be blank. We declare this as array $sepmin and do the same for hours.
Now all there is left to do is create the image tags and tell them to get the image name from the variable and where to find the images (mine are located in a folder called "images"). We do this with the following line of code.
echo '<img src="images/'.$sephour[0].'.jpg"><img src="images/'.$sephour[1].'.jpg"><img src="images/colon.jpg"><img src="images/'.$sepmin[0].'.jpg"><img src="images/'.$sepmin[1].'.jpg">';
We then end the php script with:
?>
Our complete script now looks like:
<?php $hour = date(H);
$minute = date(i);
$sepmin = preg_split('//', $minute, -1, PREG_SPLIT_NO_EMPTY);
$sephour = preg_split('//', $hour, -1, PREG_SPLIT_NO_EMPTY);
echo '<img src="images/'.$sephour[0].'.jpg"><img src="images/'.$sephour[1].'.jpg"><img src="images/colon.jpg"><img src="images/'.$sepmin[0].'.jpg"><img src="images/'.$sepmin[1].'.jpg">';
?>
discuss this topic to forum
